API文檔：【http://www.jeasyui.com/documentation/datagrid.php】

?

?

一、創建datagrid

在頁面上添加一個div或table標簽，然后用jquery獲取這個標簽，并初始化一個datagrid。代碼如下：

頁面上的div標簽：

1 <div id="magazineGrid"></div>

?

js代碼：

1 $('#magazineGrid').datagrid({ 2 height: 340, 3 url: 'url', 4 method: 'POST', 5 queryParams: { 'id': id }, 6 idField: '產品ID', 7 striped: true, 8 fitColumns: true, 9 singleSelect: false, 10 rownumbers: true, 11 pagination: false, 12 nowrap: false, 13 pageSize: 10, 14 pageList: [10, 20, 50, 100, 150, 200], 15 showFooter: true, 16 columns: [[ 17 { field: 'ck', checkbox: true }, 18 { field: '刊名', title: '刊名', width: 180, align: 'left' }, 19 { field: '類別', title: '類別', width: 150, align: 'left' }, 20 { field: '月份', title: '月份', width: 100, align: 'left' }, 21 { field: '期次', title: '期次', width: 100, align: 'left' }, 22 { field: '價格', title: '價格', width: 100, align: 'right' }, 23 { field: '訂閱數', title: '訂閱數', width: 100, align: 'right' }, 24 { field: '庫存數', title: '庫存數', width: 100, align: 'right' }, 25 { field: '郵寄方式', title: '郵寄方式', width: 80, align: 'left' }, 26 { field: '數量', title: '數量', width: 80, align: 'left', 27 editor: { 28 type: 'numberbox', 29 options: { 30 min: 0, 31 precision: 0 32 } 33 } 34 } 35 ]], 36 onBeforeLoad: function (param) { 37 }, 38 onLoadSuccess: function (data) { 39 40 }, 41 onLoadError: function () { 42 43 }, 44 onClickCell: function (rowIndex, field, value) { 45 46 } 47 });

?

?

?

?

二、ajax請求返回的數據格式

datagrid在創建完成后會根據url請求數據，這是通過ajax來完成的。服務器在完成請求處理后應返回帶有rows屬性的數據，如果用到分頁，還需要有total屬性：

1 var rst = new { total = iTotalCount, rows = entityList };

?

說到ajax請求，難免需要在請求的時候傳入一些查詢條件，我通常是在onBeforeLoad事件中添加查詢條件的：

1 onBeforeLoad: function (param) { 2 var bId = $("#txtBId").val(); 3 var AllSearchKey = $("#txtAllSearchKey").val(); 4 param.bId = bId; 5 param.AllSearchKey = AllSearchKey; 6 }

?

?

?

?

三、分頁處理

如果要啟用分頁，在datagrid配置中，首先要加入如下配置：

1 pagination: true

?

這樣一來我們的datagrid底部就會出現一個分頁工具欄。

這個時侯，datagrid在請求數據的時候會自動的添加分頁的信息：

• page：當前請求的頁碼
• rows：每頁要顯示的行數

在服務器端獲取到這兩個參數值，然后通過獲取數據庫中的總數據行數來完成數據處理。

?

?

?

四、關于checkbox列

上面的js代碼創建的datagrid本身已經添加了checkbox列，就是第一列。checkbox列將會自適應寬度。

1 { field: 'ck', checkbox: true }

?

?

?

?

五、關于rownumber列

rownumber列的配置是在全局設置的，如果設置為true則會添加一列來顯示行號。

1 rownumbers: true

?

?

?

?

六、行編輯功能的實現

datagrid本身提供了行編輯的功能。只需要兩個步驟：

設置列的editor屬性

手動觸發編輯

第一步，我們需要在column配置中指明editor，editor有兩個屬性，type和options，有效的type字符串有：

text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree

options則對應這些控件的具體配置，包括事件等。

1 editor: { 2 type: 'numberbox', 3 options: { 4 min: 0, 5 precision: 0 6 } 7 }

?

如果不需要特殊的options配置，直接將type字符串賦給editor即可。

1 editor:'text'

?

第二步，我們需要監聽datagrid的onRowClick事件，或者onCellClick事件，我更愿意監聽onCellClick事件，可以根據點擊不同的字段來進入編輯模式，并設置單元格編輯控件的focus。

1 onClickCell: function (rowIndex, field, value) { 2 beginEditing(rowIndex, field, value) 3 }

?

這里調用了beginEditing方法：

1 var editIndex = undefined; 2 var beginEditing = function (rowIndex, field, value) { 3 if (field != "數量") 4 return; 5 6 if (rowIndex != editIndex) { 7 if (endEditing()) { 8 $('#magazineGrid').datagrid('beginEdit', rowIndex); 9 editIndex = rowIndex; 10 11 var ed = $('#magazineGrid').datagrid('getEditor', { index: rowIndex, field: '數量' }); 12 $(ed.target).focus().bind('blur', function () { 13 endEditing(); 14 }); 15 } else { 16 $('#magazineGrid').datagrid('selectRow', editIndex); 17 } 18 } 19 } 20 var endEditing = function () { 21 if (editIndex == undefined) { return true } 22 if ($('#magazineGrid').datagrid('validateRow', editIndex)) { 23 var ed = $('#magazineGrid').datagrid('getEditor', { index: editIndex, field: '數量' }); 24 var number = $(ed.target).numberbox('getValue'); 25 $('#magazineGrid').datagrid('getRows')[editIndex]['數量'] = number; 26 $('#magazineGrid').datagrid('endEdit', editIndex); 27 $('#magazineGrid').datagrid('selectRow', editIndex); 28 editIndex = undefined; 29 return true; 30 } else { 31 return false; 32 } 33 }

?

?

?

?

七、列格式化輸出 formatter

在列的配種中設置formatter

1 formatter: function (value, row, index) { 2 if (row.user) { 3 return row.user.name; 4 } else { 5 return value; 6 } 7 }

?

?

?

?

八、使用工具欄

1 toolbar: [{ 2 text: 'Add', 3 iconCls: 'icon-add', 4 handler: function () { alert('add') } 5 }, { 6 text: 'Cut', 7 iconCls: 'icon-cut', 8 handler: function () { alert('cut') } 9 }, '-', { 10 text: 'Save', 11 iconCls: 'icon-save', 12 handler: function () { alert('save') } 13 }],

?

?

?

?

九、使用CardView效果

cardView效果是這樣的：

?

cardView的代碼：

1 var cardview = $.extend({}, $.fn.datagrid.defaults.view, { 2 renderRow: function (target, fields, frozen, rowIndex, rowData) { 3 var cc = []; 4 cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">'); 5 if (!frozen) { 6 var aa = rowData.itemid.split('-'); 7 var img = 'shirt' + aa[1] + '.gif'; 8 cc.push('<img src="images/' + img + '" style="width:150px;float:left">'); 9 cc.push('<div style="float:left;margin-left:20px;">'); 10 for (var i = 0; i < fields.length; i++) { 11 var copts = $(target).datagrid('getColumnOption', fields[i]); 12 cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>'); 13 } 14 cc.push('</div>'); 15 } 16 cc.push('</td>'); 17 return cc.join(''); 18 } 19 }); 20 $(function () { 21 $('#tt').datagrid({ 22 view: cardview 23 }); 24 });

cardView其實是使用了datagrid的view配置，重寫了其默認的renderRow方法。基于這種實現，我們可以顯示更多樣式的view。

?

轉載于:https://www.cnblogs.com/softwarefang/p/7419484.html

總結

以上是生活随笔為你收集整理的datagrid——jQuery EasyUI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。