Jquery EasyUI学习总结二datagrid

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

1、数据的读取和显示

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

简单介绍下Datagrid的使用：

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

<tableid="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. selectB.*,Rownumrfrom(

3. SELECTA.*FROMtable1A

4. )B

5. whereRownum<=5)

6. whereR>0

后台处理过程：

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

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

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

4. CallableStatementControlEJBremote=newCallableStatementControlEJB();

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

6. JSONObjectjsonObject=newJSONObject();

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

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

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

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