1. 程式人生 > >JQuery EasyUI DataGrid 程式設計經驗

JQuery EasyUI DataGrid 程式設計經驗

原創地址: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。我的解決辦法是,把每個域設為"",這樣在頁面上就會出現一行空內容的資料。如果遇到這個問題並解決的朋友,可以給我建議。