DataGrid 初识

介绍

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
图示：

创建表格

通过<table >标签创建DataGrid控件。在表格用<th>标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>  

说明：class=”easyui-datagrid” 表示引用easyui框架的数据表格；
style=”width:400px;height:250px” 对表格的宽高设置
data-options=”url:’datagrid_data.json’,fitColumns:true,singleSelect:true”
对表格数据及相关操作的设置，必须写在data-options中。url表示远程访问路径，在下面的远程加载数据说明， fitColumns 表示真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。singleSelect表示只能选择一行，更多的属性可以参考手册中的grid属性，但是这些属性都要写在data-options中。
使用Javascript去创建DataGrid控件。

<table id="dg"></table>  

$('#dg').datagrid({    
    url:'datagrid_data.json',//远程访问路径，下面或解释
    columns:[[    //填充数据
        {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ],[
     {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
    // columns属性为二维数组，存放多行多列数据
}); 

列属性简单说明

field 表格字段
title 表格列名
对列的宽高等都在这里面设置
在js中是设置时，在{}中
在标签中设置时，在列中的data-options中添加设置

填充表格数据

填充表格数据分为两种，

A、本地给表格写死数据

1、可以通过在标签内直接加，就像tabel操作一样
2、通过js设置，创建表格时通过js方式创建时，对colums
进行数据填充

B、远程访问服务器加载数据

tabel中的data-options属性url就是远程访问获取数据的路径，一般访问到Servlet中，在servlet中获取的数据应该是以 表格列的字段属性组成的对象 的集合，将集合写入流中，这样在前台的表格会自动抓取数据。注意的地方：前台表格中的字段和后台封装数据的对象中的字段必须一样。
例如：前台表格数据的列（列中的file字段的值）有 name ，age ，sex，
则后台的对象
data{
String name;
String age;
String sex;
构造（无参、有参）
set、get方法
}
data d =new data（name ，age ，sex，）
将d放入集合，再将集合放入流中
Servle中的代码例子

protected void getdatalist(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding( "utf-8");   //设置编码字符集，一般需要在过滤器中设置，不然会出现乱码
        String suname = req.getParameter("uname");  
        int sage = RequestUtil.getIntParam(req, "age", 0);
        Reger re = new Reger();
        re.setUname(suname);
        re.setAge(sage);
        int pageno =RequestUtil.getIntParam(req, "page", 1);
        int rows = RequestUtil.getIntParam(req, "rows", 0);
        Page page = new Page(pageno,rows);
                //以上是分页查询是获取的数据，后面会讲到

          RegDao rd=  new RegDaoIml();

          Page pageA=  rd.FindWhereTo(re, page); //数据库中获取数据，这里已经对其做了封装
        Map map = new HashMap();
        map.put("total", pageA.getTotal());
        map.put("rows", pageA.getDatalist()); //集合里为获取的多行数据
        String jsonStr=JsonUtil.transToJsonStr(map); //将数据转换成json格式
        JsonUtil.outJsonStrAndColse(resp, jsonStr);  //将json写入流中
    }  

public class JsonUtil {
    //将对象转换成json字符串
    public static String transToJsonStr(Object obj){

         ObjectMapper mapper = new ObjectMapper();  
    //     mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL); //表示自动去掉值为null的，当你object对象中某个成员没有设置，会自动去掉，不在传递到前台
         StringWriter sw = new StringWriter();  
         String strJson = null ;
         try {
            mapper.writeValue(sw, obj);
            strJson = sw.toString();
        } catch (JsonGenerationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (JsonMappingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return strJson ;
    }

    //将json字符串写到流中
    public static void outJsonStrAndColse(HttpServletResponse resp,String jsonStr){
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html");
        PrintWriter out;
        try {
            out = resp.getWriter();
            out.write(jsonStr);
            out.flush();
            out.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
}

这样之后在前台的datagrid表格会自动抓取数据，
$(‘#dg’).datagrid(‘reload’); // 重新载入当前页面数据

DataGrid常用属性

| toolbar | 参数为数组 表格工具栏
在div标签上定义

$('#dg').datagrid({
    toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
//对于手册中的属性的设置多在data-options中

在js中设置

$('#dg').datagrid({
    toolbar: [{
        iconCls: 'icon-edit', //图标 在导入的jqueryeasyui中的easyui/themes/icon.css中提供
        handler: function(){alert('编辑按钮')} //点击事件
    },'-',{
        iconCls: 'icon-help',
        handler: function(){alert('帮助按钮')}
    }]
});
//数组的形式设置每个工具

| striped | 参数boolean 设置斑马线效果
| method | 参数字符串 访问时的方式 post get （必须大写）
| url | 字符串参数 访问路径

         $("#dg").datagrid({ url:"EasyUiServlet.do", method:"post",queryParams:{"uname": suname,"age": sage};});
    //查询的例子，后面会讲到