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。個人解決辦法是，把每一個域設爲""，這樣在頁面上就會出現一行空內容的數據。若是遇到這個問題並解決的朋友，能夠給我建議。