Jquery EasyUI学习总结二datagrid

项目中数据显示使用了jqueryeasyui 的datagrid，它对表格进行了封装，实现了很多的功能，比如分页，数据的操作，鼠标划过，多选等，使用起来十分的方便。

1、数据的读取和显示

Datagrid通过url属性来读取数据，它会通过ajax方式向后台发送请求。项目中使用的是Struts1,url:'cpxzAction.do?method=getCpxhListByNsrsbh'，返回的是JSON。值得注意的是JSON串要根据Datagrid中字段的名称来封装，前后名称要一致。

简单介绍下Datagrid的使用：

1、 必须在页面中有一个table标签，指定唯一的id

<table id="tt"></table>

2、 创建表格可以在页面中的table中定义，也可以通过js来创建。

 第一种方式：table中定义

<table 
        id="tt" 
		style="width:700px;height:auto"
		title="Editable DataGrid" 
		iconCls="icon-edit" 
		singleSelect="true"
		idField="itemid" 
		url="datagrid_data2.json">
	<thead>
	    <tr>
		    <th field="ck" width="20" checkbox="true" width="20"></th>  
		    <th field="username"  width="200">用户名</th>  
		    <th field="password"  width="100">密码</th>  
		    <th field="opt" formatter='operatorFormatter' width="150">操作</th>  
	    </tr>
	</thead>
</table>

 第二种方式：js创建

<script>
      $(function(){
          $('#tt').datagrid({
                    url: 'datagrid_data2.json',
                    title: 'DataGrid',
                    width: 700,
                    height: 300,
                    fitColumns: true,
                    nowrap:false,
                    idField:'xh',
                    frozenColumns : [[{field:'ck', checkbox:true}]],
                    columns:[[
                    {field:'username',title:'用户名',width:80},
                    {field:'password',title:'密码',width:120},
                    {field: opt,title:'操作',width:120, 
                      formatter: function(value, row, index){
                              var s = "<a href=\"javascript:delete(" + index + ")\">删除</a>";
                               return s;
                              }
                      } 
                    ]]
                 });
          });
</script>

2、数据的分页

分页时需要设置pagination:true，这样，在表格下方将显示分页工具栏。分页工具栏将向服务器发送二个参数：

·        page: 页号，从1计起。

·        rows: 每页记录大小。

这两个参数分别对应属性pageNumber，pageSize。 

分页的SQL语句(Oracle)如下:

1.  select * from (   

2.  select B.*,Rownum r from (  

3.  SELECT A.* FROM  table1 A    

4.  )B  

5.  where Rownum<=5)   

6.  where R>0  

后台处理过程：

1.  String page = request.getParameter("page");  

2.  String rows = request.getParameter("rows");     

3.  //执行数据操作并组织返回结果   

4.  CallableStatementControlEJB remote = new CallableStatementControlEJB();  

5.  Map map = remote.getList(Integer.valueOf(page), Integer.valueOf(rows));  

6.      JSONObject jsonObject = new JSONObject();  

7.  jsonObject.put("total", map.get("total"));  

8.  jsonObject.put("rows", map.get("khxxList"));   

接受传递过来的page和rows，调用分页方法读取数据，将数据库中读取的数据列表及数据的总条数封装成JSON对象返回。

注意：datagrid在回调函数中必须获得两项json数据：total表示查询出的总结果，rows表示显示在table中的数据集合。