JQuery EasyUI DataGrid

转：http://www.cnblogs.com/archie2010/archive/2011/01/17/1937327.html，有增加

 

最近，在项目中用到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, 是当然需要的。

 

在controller层获取每页的行数和当前多少页，用如下方法：

pageSize = Integer.parseInt(request.getParameter("rows") .toString());

pageNo = Integer.parseInt(request.getParameter("page") .toString());

 

 

 

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     
     );
  }  

这样页面的删除和数据库中的删除都实现了。

 

 

 

另参见：http://www.cnblogs.com/zgqys1980/archive/2011/01/04/1925775.html

http://www.jeasyui.com/documentation/datagrid.php