原創地址：http://xiaomao870311.blog.51cto.com/1458701/384400

最近，在專案中用到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     
     );
  }         這樣頁面的刪除和資料庫中的刪除都實現了。

4.待解決的問題

如果返回的資料為空，則在IE瀏覽器下，頁面會有Bug。我的解決辦法是，把每個域設為""，這樣在頁面上就會出現一行空內容的資料。如果遇到這個問題並解決的朋友，可以給我建議。