JQuery EasyUI DataGrid 编程经验

最近，在项目中用到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)以下:

select * from(
select rownum r,  field1,field2 from table_name where rownum <= page* rows(
)
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     
     );
  }         这样页面的删除和数据库中的删除都实现了。

4.待解决的问题

若是返回的数据为空，则在IE浏览器下，页面会有Bug。个人解决办法是，把每一个域设为""，这样在页面上就会出现一行空内容的数据。若是遇到这个问题并解决的朋友，能够给我建议。