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){   
				           
				        }   
				   });   
				}  */