easyui-datagrid

动态改变他的url,并出传入参数：

 $("#projectlisttable").treegrid({                             url:url,                             queryParams:{sbny:sbny,zdxlx:zdxlx,jslx:jslx,proivnce:proivnce,city:city,county:county,status:status,pc:pc},                             method:"post"});

最近，在项目中用到JQuery EasyUI DataGrid，虽然它封装了表格的实现，为我们提供很多便利，但是在使用的过程中，还是会遇到一些困难和问题。目前，问题都已经解决，特分享我使用 DataGrid开发的经验。(PS:我用的是JSP和J2EE框架开发)。

1.数据的提取和显示。

DataGrid是通过url属性获取数据的。例如:url:'ListInfo.action',这样通过调用Action中的方法获取数据。返回的是JSON字串。注意，JSON字串必须按照DataGrid定义的数据格式进行拼装。这种数据格式，可以参考我前面的文章中的附件。特别强调的是，JSON字串中的total域的值是数据的条数，用于数据的分页。

2.数据的分页。

数据的分页分为前台分页和后台分页，前台分页，DataGrid已经封装好了。 DataGrid定义了两个参数: rows(每页的条数)，page(当前的页数)，这两个参数分别对应属性pageSize，pageNumber。用户可以在 pageSize，pageNumber属性中设置，也可以不设置，这样就取默认值。我们只需在Action中定义两个变量，private int rows; private int page; 接着通过SQL语句获取需要取的值。分页的SQL语句(Oracle)如下:

   1. select * from(      2. select rownum r,  field1,field2 from table_name where rownum <= page* rows(    3. )       4. where r > (page-1) * rows  

这样提取的数据的条数赋值给total域，拼装在JSON字串中返回，就可以实现分页了。当然，pagination:true,是当然需要的。

3.数据的操作。

数据的操作大致可分为：查看，删除。对于查看，我们可以通过onClickRow或onDblClickRow事件实现。如：

$(function(){   $('#test').datagrid({    title:'数据列表',    width:900,    height:500,        .......(省略的属性)    onDblClickRow: function() {    var selected = $('#test').datagrid('getSelected');    if (selected){      window.open("DataView.action?Id="+selected.ID);   }}  

这样双击就可以查看了。

关于删除，可以通过点击删除按钮，调用删除方法来实现。删除按钮可以在拼装JSON字串的时候，赋值给OPERATION域，这样设置{field:'OPERATION',title:'操作',width:120}，就可以在页面上显示删除按钮了。删除的实现，如下：

代码

function DelAff(){   $.messager.confirm('确认','是否真的删除?',function(r){   if (r){   var selected = $('#test').datagrid('getSelected');   if (selected){      var index = $('#test').datagrid('getRowIndex', selected);      $('#test').datagrid('deleteRow', index);    DeleteSubmit(selected);   }   }   });  }  function DeleteSubmit(selected)  {       var url="DataDelete.action?Id="+selected.ID;       $.post(       url          );  }  

分页中的pagination事件：

/*var pg = $("#projectlisttable").datagrid("getPager");   if(pg)   {      $(pg).pagination({          onBeforeRefresh:function(){         // alert("ddd");      // rowNumberIndex=0;      return true;       },          onRefresh:function(pageNumber,pageSize){          //rowNumberIndex=0;        },          onChangePageSize:function(){                       },          onSelectPage:function(pageNumber,pageSize){                      }      });   }  */