Jquery EasyUI Datagrid的使用

中文API地址：

http://www.cnblogs.com/Philoo/archive/2011/11/16/jeasyui_api_datagrid.html

類似於Extjs的輕量級Jquery插件

使用過程遇到問題：

1.Q：demo中，數據綁定的json不支持中文

　R: 只要把文本另存，編碼格式從ascii改成utf-8就行

2.Q：Datagrid url數據源綁定

　R: 字符串：$("#table").datagrid('loadData',json對象)

　　 url：如果使用ajax，可以用ashx文件，或者mvc 的jsonresult路徑，只要返回json字符串就可以

3.Q：為Datagird添加Icon圖標

　R：把easyui的demo icon.css拷貝到自己的項目中，在樣式里，更改路徑，調用方式，如：<input type='button' iconCls='icon-look' />

4.Q:  復雜的datagird設置

$("#table").datagird({
    //不設置其他屬性
    fit:true,  //表格隨窗體大小改變
    url:"MeesageHandler.ashx?.....",
    pageSize:20,
    frozenColumns:[[     //必要列
        {field:'ID',checkbox:true,width:100,align:'center'},
        {field:'Name',title:'名稱',sortable:true,
          ,formatter:function(value,rec)
           {
               if(value.length>30)
                  return value.substring(0,30);
              else
                  return value;
            }
        }
    ]],
    columns:[[//設置跟frozen一樣]]
    //屬性具體參加中文api
});    

5.Q:  幾個關鍵事件使用

onRowContextMenu:function(data,index){  //表格右鍵觸發

  var selected=$("#table").datagrid('getRows'); //獲取所有行集合對象

  selected[index].ID //index為當前右鍵行的索引，指向當前行對象

  //你也可以這里使用easyui的contextmenu,來完善右鍵使用功能的完善

},

onDblClickRow:function(index,data){}

onLoadSuccess:function(data){}

5.Q:　分頁的設置以及分頁的修改

var p=$("#table").datagrid('getPager');
if(p)
{
  $(p).pagination({
      pageSize:10,  //這個是頁面板的設置，具體顯示還得在datagrid里的pageSize屬性設置。
      pageList:[10,20,50,100],
      beforePageText:'第',
      afterPageText:'頁    共{pages}頁'，
      displayMsg:'當前顯示{from}-{to} 條記錄   共{total}條記錄'  
  });
}

6.Q:   url路徑引用時，路徑接到的request請求參數，分頁不用設置

request.params["page"]   //當前頁碼

request.params["rows"]   //頁面顯示數據數

request.params["sort"]   //排序列名

request.params["order"]   //倒序or升序

 7.Q： datagrid的詳細分頁

 

var grid = $('#datagrid');  

var options = grid.datagrid('getPager').data("pagination").options;  

var curr = options.pageNumber;  

var total = options.total;  

var max = Math.ceil(total/options.pageSize);

 

 

.pagination 生成一個頁碼工具條。

屬性如下：
1)total:當分頁條創建后設置的記錄數。默認1。
2)pageSize:頁面大小。默認10。
3)pageNumber:當分頁創建后顯示的頁碼。默認1。
4)pageList:用戶能更改頁面的大小。您也可以改變該屬性定義的默認大小。默認[10,20,30,50]。
5)loading:定義是否正在加載。默認false。
6)buttons:定義自定義按鈕，每個按鈕都包含兩個屬性:
iconCls: 該CSS類將顯示一個背景圖標。
handler: 當按鈕點擊時觸發一個處理函數。
7)beforePageText:當輸入組件前顯示一個標簽文本。
8)afterPageText:當輸入組件后顯示一個標簽文本。
9)displayMsg:顯示一個頁面信息。
方法如下:
1)onSelectPage:當用戶選擇一個新頁面時激活。該回調函數包括兩個參數:
pageNumber: 該新頁面的頁碼。
pageSize:該新頁面的大小