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};});    //查询的例子，后面会讲到