LigerUi中Grid控件的相關屬性

// ========================================= 【每一項的TYPE類型】
{ display: '主鍵', name: 'id', width: 50, type: 'int' },    // 整型
{ display: '生日', name: 'birthday', type: 'date', width: 100 },  // 日期型{ display: '主鍵', name: 'id', width: 50, type: 'Text' },   // 文本型

{display: "序號", name: "Sort", width: 50, type: "text", align: "left" },

//========================================== 【詳細說明】
 【display】 -- 標題內容 -- 【display: "序號"】  【name】 -- 對應字段名稱 -- 【name: "Sort"】\
 【width】 -- 寬度 -- 【width: 50】
 【type】 -- 文本型、數值型、日期型 -- 【type: "text"，type: "int"，type: "Text"，type: "date",type:"float"】
 【align】 --   左對齊、右對齊、居中 -- 【align: "left" --left/center/right】
 【minWidth: 140 】 --列的最小寬度-- 【minWidth: 140】
 【hide】 -- 是否隱藏 -- 【hide: false】
 【minWidth 】 -- 列的最小寬度 -- 【minWidth: 40】
 【isSort】 -- 是否容許此列排序,默認爲容許排序 -- 【isSort: true】
 【sAllowHide】 -- 是否容許隱藏,若是容許，將會出如今【顯示/隱藏列右鍵菜單】 -- 【isAllowHide: true】
 【string】 -- 類型,用於排序 -- 【type: 'string'】
  【editor】 -- 單元格編輯器 -- 全部的編輯器的構造的定義在$.ligerDefaults.Grid.editors，好比 
                editor: { type: 'text'},    // 【文本框】                editor: { type: 'select'},  // 【選擇框】

[js] view plaincopy

1. editor: { type: 'spinner' }   

             將會使用$.ligerDefaults.Grid.editors['spinner'] 進行建立編輯器進行構建。 
             ligerGrid內置提供了 複選框、文本框、日期、數字調整器、下拉框 等編輯器。

 

 【validate】 -- 驗證控件 -- 【validate: { required: true, digits: true },】
   validate:    {        required: true,    // 是否必填項       digits: true       // 是不是數值型或數字       maxlength: 50      // 最大長度
       min:1              // 最小長度

   },



 【】 -- 最小值 -- 【】
 【】 -- 最小值 -- 【】
 【】 -- 最小值 -- 【】

// ==================================== 【表標頭設置】

              表格的列提供了很完整的接口能夠擴展。不管是內容單元格或者是表頭單元格均可以對內容、佈局、大小進行自定義。 

            自定義表頭 
            好比表頭，咱們能夠把display直接設置一段html: 

[js] view plaincopy

1. <span style="font-size:14px; line-height:25px">            </span> {   

2. <span style="font-size:14px; line-height:25px">            </span>     display: '&lt;a href="javascript:void(0)"&gt;部門&lt;/a&gt;', //表頭列顯示的文本,支持html   

3. <span style="font-size:14px; line-height:25px">            </span>     name: 'name',   

4. <span style="font-size:14px; line-height:25px">            </span>     align: 'left'   

5. <span style="font-size:14px; line-height:25px">            </span> },   

            或者使用headerRender： 

[js] view plaincopy

1. <span style="font-size:14px; line-height:25px">            </span>//表頭內容自定義函數   

2. <span style="font-size:14px; line-height:25px">            </span>headerRender: function (column)   

[js] view plaincopy

1. <span style="font-size:14px; line-height:25px">            </span>{   

2. <span style="font-size:14px; line-height:25px">            </span>   return "&lt;b&gt;" + column.display + "&lt;/b&gt;";   

3. <span style="font-size:14px; line-height:25px">            </span>},   

 

// =======================================================【表Grid的數據後和獲取】和【排序】

 

url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label',  // url

sortName: 'Sort',   // 默認排序

enabledSort：true     // 就否容許排序

dataAction: 'server'   //提交數據的方式：本地(local)或(server),選擇本地方式時將在客服端分頁、排序 

 

pageSize: 20           // 默認一行顯示頁數

 

width: '100%', height: '100%',  // 自動根據窗口大小填充滿屏  'auto'

 

checkbox: false      // 啓用 打對勾的多選框

 

enabledEdit: true,   // 是否容許編輯

 

clickToEdit: false   // 就否容許單擊進入編輯

heightDiff: -10      // 高度補差,當設置height:100%時，可能會有高度的偏差，能夠經過這個屬性調整

tree: { columnName: 'CustomProducts_Name' },   // 經過樹顯示模式，樹字段顯示名稱

columnWidth:100     // 默認列寬度

showTitle：false   //是否包含標題

 

  // ---------------------------------------- // 雙擊執行事件

       onDblClickRow : function (data, rowindex, rowobj)  
       {
          selectdepartment(); 
       },

 

 

dataAction: 'server', pageSize: 20, toolbar: {},

       url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label', sortName: 'Sort',

       width: '100%', height: '100%', heightDiff: -10, checkbox: false, enabledEdit: true, clickToEdit: false

 

// ===================================== 【複選框 - 記錄多選框】

 

 

 

checkbox: false      // 啓用 打對勾的多選框

 

<div id="maingrid4" style="margin:0; padding:0"></div>

 

[javascript] view plaincopy

1. <pre><span style="font-size:14px;">$("#maingrid4").ligerGrid({  

2.                 checkbox: true,  

3.                 columns: [  

4.                 { display: '主鍵', name: 'CustomerID', align: 'left', width: 120 },  

5.                 { display: '公司名', name: 'CompanyName', minWidth: 60 },  

6.                 { display: '聯繫名', name: 'ContactName', width: 50,align:'left' },   

7.                 { display: '聯繫名', name: 'ContactName', minWidth: 140 },  

8.                  { display: '聯繫名', name: 'ContactName', minWidth: 140 },   

9.                  { display: '聯繫名', name: 'ContactName', minWidth: 140 },   

10.                  { display: '聯繫名', name: 'ContactName', minWidth: 140 },  

11.                 { display: '城市', name: 'City' }  

12.                 ], dataAction: 'server',pageSize:30,  

13.                 url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',   

14.                 width: '100%',height:'100%'  

15.             });</span></pre><span style="font-size:18px"><br>  

16. </span>  

17. <pre></pre>  

18. <pre></pre>  

 

 

[javascript] view plaincopy

1. <span style="font-size:14px;">var grid;  

2.         $(function ()  

3.         {  

4.             grid = $("#maingrid4").ligerGrid({  

5.                 checkbox: true,  

6.                 columns: [  

7.                 { display: '主鍵', name: 'CustomerID', align: 'left', width: 120 },  

8.                 { display: '公司名', name: 'CompanyName', minWidth: 60 },  

9.                 { display: '聯繫名', name: 'ContactName', width: 50, align: 'left' },   

10.                 { display: '城市', name: 'City' }  

11.                 ], dataAction: 'server', pageSize: 30,  

12.                 url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',  

13.                 width: '100%', height: '100%',  

14.                 onCheckRow: function (checked,data,rowindex,rowobj)  

15.                 {  

16.                     checked && $.ligerDialog.alert('選擇的是'+data.CustomerID);  

17.                 }  

18.             });   

19.             $("#pageloading").hide();  

20.         });  

21.         function getCheckedData()     // 獲取選擇的複選框記錄  

22.         {  

23.             var rows = grid.getCheckedRows();  

24.             var str = "";  

25.             $(rows).each(function ()  

26.             {  

27.                 str += this.CustomerID + ",";  

28.             });  

29.             $.ligerDialog.alert('選擇的是' + str);  

30.         }</span>  

 

 

[javascript] view plaincopy

1. var jsonObj = {};  

2.             jsonObj.Rows = [  

3.                 { id: 3, name: "林三", sex: "男", birthday: "1989-01-12" },  

4.                 { id: 43, name: "陳麗", sex: "女", birthday: "1989-01-12" },  

5.                 { id: 33, name: "啊三", sex: "男", birthday: "1981-12-12" },  

6.                 { id: 34, name: "表三", sex: "男", birthday: "1983-01-12" },  

7.                 { id: 43, name: "陳麗", sex: "女", birthday: "1989-01-12" },  

8.                 { id: 33, name: "成三", sex: "男", birthday: "1989-11-23" },  

9.                 { id: 34, name: "都三", sex: "女", birthday: "1989-04-12" },  

10.                 { id: 324, name: "鄂三", sex: "男", birthday: "1999-05-15" },  

11.                 { id: 344, name: "林三", sex: "男", birthday: "1969-02-21" },  

12.                 { id: 1, name: "王開", sex: "男", birthday: "1989-01-12" }  

13.             ];  

14.             $("#maingrid").ligerGrid({  

15.                 columns: [  

16.                 { display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,  

17.                     render: function (row)  

18.                     {  

19.                         var html = '<input type="checkbox" rowid="' + row.id + '">';  

20.                         return html;  

21.                     },  

22.                     headerRender: function (column)  

23.                     {  

24.                         var html = '<input type="checkbox" onclick="selectAll(this)">';  

25.                         return html;  

26.                     }  

27.                 },  

28.                 { display: '主鍵', name: 'id', width: 50, type: 'int' },  

29.                 { display: '名字', name: 'name', width: 50 },  

30.                 { display: '性別', name: 'sex', width: 50, isSort: false  

31.                 },  

32.                 { display: '生日', name: 'birthday', type: 'date', width: 100 },  

33.                 {  

34.                     display: '模板列', isAllowHide: false,  

35.                     render: function (row)  

36.                     {  

37.                         var html = '<a href="#" onclick="onedit(' + row.id + ')">編輯</a>';  

38.                         return html;  

39.                     }  

40.                 }  

41.                 ],width:'100%',  

42.                 data: jsonObj,  

43.                 url: "../Default.aspx", pkName: 'id',  

44.                 pageSizeOptions: [5, 10, 15, 20],  

45.                 onAfterShowData: function (grid)  

46.                 {  

47.                     if ($.fn.ligerCheckBox)  

48.                         $(".l-grid-body input:checkbox,.l-grid-hd-cell input:checkbox", grid).ligerCheckBox({ css: { marginTop: 3} })  

49.                 }  

50.             });  

 

 

 

 

 

 

 

// ===================================== 【事件和方法】

 事件 

事件名	參數	描述
onAfterAddRow	(e)	增長行後事件
onAfterBeginEdit	(e)	開始編輯後事件
onAfterChangeColumnWidth	(column, newwidth)	改變列寬度事件
onAfterShowData	(data)	顯示完數據事件
onAfterSubmitEdit	(e)	提交編輯 事件
onBeforeChangeColumnWidth	(column, newwidth)	驗證 改變列寬度 是否經過
onBeforeCheckAllRow	(checked, grid element)	選擇前事件，能夠經過return false阻止操做(複選框 全選/全不選)
onBeforeEdit	(e)	編輯前事件
onBeforeShowData	(data)	顯示數據前事件，能夠經過reutrn false阻止操做
onBeforeSubmitEdit	(e)	驗證編輯器結果是否經過
onBeginEdit	(e)	驗證 開始編輯 是否經過
onCancelEdit	(e)	取消編輯 事件
onChangeSort	()	改變排序事件
onCheckAllRow	(checked, grid element)	選擇事件(複選框 全選/全不選)
onCheckRow	(checked, rowdata, rowindex, rowDomElement)	選擇事件(複選框)
onContextmenu	(parm, e)	右擊事件
onDblClickRow	(rowdata, rowindex, rowDomElement)	雙擊行事件
onDragCol	(node)	拖動列事件
onError	()	錯誤事件
onLoaded	()	加載完函數
onLoading	()	加載時函數
onReload	()	刷新事件，能夠經過return false來阻止操做
onSelectRow	(rowdata, rowindex, rowDomElement)	選擇行事件
onSubmit	()	提交前事件
onSuccess	()	成功事件
onToFirst	()	第一頁，能夠經過return false來阻止操做
onToggleCol	()	切換列事件
onToLast	()	最後一頁，能夠經過return false來阻止操做
onToNext	()	下一頁，能夠經過return false來阻止操做
onToPrev	()	上一頁，能夠經過return false來阻止操做
onUnSelectRow	(rowdata, rowindex, rowDomElement)	取消選擇行事件

例子 

[js] view plaincopy

1. var grid = $("#maingrid").ligerGrid({   

2.    columns:   

[js] view plaincopy

1.     [   

2.        { name: 'id', display: '序號', width: 200 },   

3.        { name: 'name', display: '名稱', width: 300 }   

4.     ],   

5. data: { Rows: griddata },   

6. onSelectRow: function (rowdata, rowindex) {   

7. //行記錄 對於數據行   

8. //行索引 第幾行,從0開始   

9. alert(rowdata.name);   

10. }   

11. });   

12. grid.bind('SelectRow', function (rowdata, rowindex) {   

13. //this 這裏的this都是指向grid   

14.   

15. //行記錄 對於數據行   

16. //行索引 第幾行,從0開始   

17. alert(rowdata.name);   

18. });   

方法

方法	參數	描述
addEditRow	(rowdata)	增長一個編輯行
addRow	(rowdata, rowParm, isBefore, parentRow)	增長新行
addRows	(rowdataArr)	一次性增長多行
appendRow	(rowData, targetRow, nearRow, isBefore)	附加新行(樹模式)
beginEdit	(rowParm)	進入編輯狀態
cancelEdit	(rowParm)	取消編輯
changeHeaderText	(columnparm, headerText)	改變表頭文本
changePage	(ctype)	改變分頁
changeSort	(columnName, sortOrder)	改變排序
collapse	(targetRow)	收縮(樹模式)
collapseDetail	(rowParm)	收縮明細
deleteRow	(rowParm)	選擇行
deleteSelectedRow	()	刪除選擇的行
demotion	(targetRow)	降級(樹模式)
endEdit	(rowParm)	結束編輯
expand	(targetRow)	展開(樹模式)
extendDetail	(rowParm)	展開明細
formatRecord	(record)	格式化數據,刪除系統字段
getAdded	()	獲取新增的數據
getCheckedRowObjs	()	獲取選中的行 DOM對象集合
getCheckedRows	()	獲取選中的行數據(複選框)
getChidren	(rowParm)	獲取子節點數據(樹模式)
getColumn	(columnpam)	獲取列信息
getColumns	(columnLevel)	獲取指定層級的Columns
getColumnType	(columnname)	根據列名獲取列類型
getData	(status, removeStatus)	獲取數據
getDeleted	()	獲取刪除過的數據
getParent	(rowParm)	獲取父節點數據(樹模式)
getRowObj	(rowParm)	行DOM轉換爲行數據
getSelected	()	獲取選中的行數據(同getSelectedRow)
getSelectedRow	()	獲取選中的行數據
getSelectedRowObj	()	獲取選中的行 DOM對象
getSelectedRowObjs	()	獲取選中的行 DOM對象集合
getSelectedRows	()	獲取選中的行數據集合(支持Ctrl多選)
getSelecteds	()	獲取選中的行數據集合(支持Ctrl多選)(同getSelectedRows)
getUpdated	()	獲取修改過的數據
hasChildren	(rowParm)	是否包括子節點(樹模式)
isLeaf	(rowParm)	是否葉節點(樹模式)
isTotalSummary	()	是否包含彙總
loadData	(loadDataParm)	刷新數據
loadServerData	(param, clause)	加載數據(服務器)
reRender	(e)	從新加載html
setColumnWidth	(columnparm, value)	調整列寬
setOptions	(parms)	從新設置參數(同名方法set)
SubmitEdit	(rowParm)	提交編輯
toggle	(targetRow)	伸展/收縮節點(樹模式)
toggleCol	(columnparm, visible)	顯示/隱藏列
updateCell	(cell, value, rowParm)	更新單元格
updateRow	(newRowData, rowDom)	更新行
upgrade	(targetRow)	升級(樹模式)

例子 

[js] view plaincopy

1.    

2. &lt;a class="l-button" href="javascript:selectRow(2)"&gt;選擇行(3)&lt;/a&gt;   

3. &lt;a class="l-button" href="javascript:getSelectRow()"&gt;獲取選擇&lt;/a&gt;   

 

[js] view plaincopy

1.    

2. var grid = $("#maingrid").ligerGrid({   

3. columns: [   

4. { name: 'id', display: '序號', width: 200 },   

5. { name: 'name', display: '名稱', width: 300 }   

6. ]   

7. });   

8.   

9. grid.set({ data: { Rows: griddata} });   

10.   

11. function selectRow(index) {   

12. grid.select(index);   

13. }   

14. function getSelectRow() {   

15. var rows = grid.getSelecteds();   

16. for (var i in rows) {   

17. alert(rows[i].name);   

18. }   

19. }   

 

//自定義單元格渲染器  render : function (record, rowindex, value, column) {  //this 這裏指向grid  //record 行數據  //rowindex 行索引  //value 當前的值，對應record[column.name]  //column 列信息  return value; //返回此單元格顯示的HTML內容(通常根據value和row的內容進行組織)  },  //列彙總  totalSummary: {  align: 'center', //彙總單元格內容對齊方式:left/center/right  type: 'count', //彙總類型sum,max,min,avg ,count。能夠同時多種類型  render: function (e) { //彙總渲染器，返回html加載到單元格  //e 彙總Object(包括sum,max,min,avg,count)  return "&lt;div&gt;總數：" + e.count + "&lt;/div&gt;";  }  },  //多表頭支持  columns: null  },