datagrid資料表格使用總結
阿新 • • 發佈：2018-11-27
一、載入的css檔案
- easyui 基本樣式： <link href="../easyui/easyui1.5.css" rel="stylesheet" type="text/css" />
- easyui 按鈕樣式：<link href="../easyui/icon.css" rel="stylesheet" type="text/css" /> 表單需要進行編輯時按鈕所需樣式
二、載入的js檔案
- JQuery基本指令碼：<script type="text/javascript" src="../JQ/jquery.min.js"></script>
- EasyUI基本指令碼：<script type="text/javascript" src="../JQ/jquery.easyui.min.js"></script>
- DataGrid指令碼：<script src="../JQ/datagrid-detailview.js" type="text/javascript"></script>
三、Html - body部分： <table id="dg" class="easyui-datagrid"></table>
若一個頁面具有多個表格，即id值不同即可，如
<div class="dataContent" style="margin-top: 10px">
狀態統計
</div>
<table id="dg" class="easyui-datagrid">
</table>
<div class="dataContent" style="margin-top: 10px">
狀態明細
</div>
<table id="dgdetail" class="easyui-datagrid">
</table>
四、Javascript指令碼
對於動態載入表格資料，一般需要兩個步驟：
(1) 頁面載入時初始化表格樣式
1 <script type="text/javascript"> 2 $(function () { 3 initTable(); 4 }); 5 // 初始化表格 6 function initTable() { 7 $('#dg').datagrid({ 8 width: 1000, //寬度 9 height: 210, //高度 10 url: 'StateQuery.aspx', //請求資料URL 11 singleSelect: true, //true表示只允許選擇一行 12 onLoadSuccess: function (data) {//當資料載入成功時觸發，data為載入資料 13 loadNoRecord(data); 14 }, 15 onClickRow: function (rowIndex, rowData) {//當用戶點選一行時觸發，引數包括：rowIndex：被點選行的索引，從0開始；rowData：被點選行對應的記錄 16 loadDetail(rowIndex, rowData) 17 }, 18 columns: [[ //表格對應列的匹配物件 19 { field: 'ID', width: 40, halign: 'center', title: 'MinRID', hidden: true }, 20 { field: 'CenterName', width: 140, align: 'center', title: '名稱' }, 21 { field: 'ClassName', width: 80, align: 'center', title: '班次' }, 22 { field: 'Duration', width: 100, align: 'center', title: '持續時間(分)', formatter: formateFloat }, 23 { field: 'CreateTime', width: 140, align: 'center', title: '日期', formatter: formateDate }, 24 { 25 field: 'Search', title: '詳細資訊', width: 100, align: 'center', 26 formatter: function (value, row, index) { 27 return '<a href="#" onclick="loadDetail(' + index + ',' + row + ')">檢視</a> ' 28 } 29 } 30 ]] 31 }); 32 } 33 // 資料格式化 34 function formateFloat(data) { 35 if (data == undefined && data == "") return ""; 36 return fn.format(data, 2); 37 } 38 // 日期格式化 39 function formateDate(data) { 40 if (data == undefined && data == "") return ""; 41 42 var n = data.indexOf(" "); 43 if (n > 0) return data.substring(0, n); 44 else return data; 45 } 46 </script>初始化表格
(2) 通過ajax動態載入表格資料
<input type="button" class="btn_tab" value="查詢" onclick="loadTable()" />
<script type="text/javascript">
//載入資料
function loadTable() {
var centerid = $("#hdcenterid").val();
ajax("ajax=getDataQuery&cid=" + centerid, function (q) {
if (!q) { //無資料
$("#dg").datagrid("loadData", []);
}
else { //有資料
q = json(q);
$("#dg").datagrid("loadData", q);
}
});
}
</script>
動態載入資料
以上即為實現基本表格所需指令碼，如要實現其他功能只需根據EasyUI提供的樣例，在初始化表格樣式增加相關方法或屬性（部分功能見下文）
五、C#後臺資料，通過ajax非同步回撥得到DataTable，其中Column列名需要與初始化表格樣式中columns的field完全一致（區分大小寫），將其資料轉換為json字元返回即可。
using System; using System.Data; using iPlant.Component.ProfitCenter; public partial class Component_ProfitCenter_StateAnalysis_StateQuery : PageBase { protected void Page_Load(object sender, EventArgs e) { #region 非同步回撥 if (Request["ajax"] != null) { string ajax = ""; if (Request.Form["ajax"] != null || Request.QueryString["ajax"] != null) { ajax = Request.Form["ajax"] != null ? Request.Form["ajax"] : Request.QueryString["ajax"]; switch (ajax) { case "getDataQuery": ajax = GetDataQuery(); break;//返回狀態記錄 default: break; } Response.Write(ajax); Response.End(); return; } } #endregion } private string GetDataQuery() { int cid = 0; if (Request.Form["cid"] != null || Request.QueryString["cid"] != null) { cid = Request.Form["cid"] != null ? Request.Form["cid"] : Request.QueryString["cid"]; } StateRecordCnfg cnfg = new StateRecordCnfg(); DataTable dt = cnfg.GetStateRecordQuery(cid); return fn.Json(dt); } }後臺資料
六、實現效果
七、表格其他功能
1. 多行表頭 : 使用列（Column）屬性，Column是一個數組物件，它的每個元素也是一個數組。元素陣列的元素是一個配置物件，它定義了每個列的欄位。（詳見 http://www.jeasyui.net/plugins/183.html）
根據所需表頭，使用rowspan(number 指示一個單元格佔據多少行)和colspan（number 指示一個單元格佔據多少列）進行標記。
1 function initDetailTable() { 2 $('#dg').datagrid({ 3 singleSelect: true, 4 width: "96%", 5 height: 220, 6 columns: [[ 7 { field: 'Name', width: 120, align: 'center', title: '狀態名稱', rowspan: 2 }, 8 { field: 'StateTime', width: 105, align: 'center', title: '開始時間', rowspan: 2 }, 9 { field: 'EndTime', width: 105, align: 'center', title: '結束時間', rowspan: 2 }, 10 { field: 'Duration', width: 75, align: 'center', title: '持續時間(分)', formatter: formateFloat, rowspan: 2 }, 11 { title: '成本項', align: 'center', colspan: 5 }, 12 { field: 'CreateTime', width: 105, align: 'center', title: '生成時間', rowspan: 2 } 13 ], [ 14 { field: 'ItemName', width: 80, align: 'center', title: '名稱' }, 15 { field: 'UseAmount', width: 60, align: 'center', title: '用量值', formatter: formateFloat }, 16 { field: 'Unit', width: 60, align: 'center', title: '單位' }, 17 { field: 'UnitPrice', width: 60, align: 'center', title: '單價' }, 18 { field: 'UseCost', width: 60, align: 'center', title: '成本', formatter: formateFloat } 19 ]], 20 onLoadSuccess: function (data) { 21 loadCellStyle(data); 22 } 23 }); 24 }多行表頭
效果圖
2. 合併單元格：將資訊相同的資料只顯示一次，進行同類合併
1 function loadCellStyle(data) { 2 if (data.rows != undefined) { 3 if (data.rows.length > 0) { 4 var mark = 1;//這裡涉及到簡單的運算，mark是計算每次需要合併的格子 5 for (var i = 1; i < data.rows.length; i++) { //這裡迴圈表格當前的資料 6 if (data.rows[i]['StateRecordID'] == data.rows[i - 1]['StateRecordID']) { //後一行的值與前一行的值做比較，相同就需要合併 7 mark += 1; 8 $('#dg').datagrid('mergeCells', { 9 index: i + 1 - mark, //datagrid的index，表示從第幾行開始合併，就是記住最開始需要合併的位置 10 field: 'StateName', //合併單元格的區域，就是clomun中的filed對應的列，StateName為狀態名稱 11 rowspan: mark //縱向合併的格數，如果想要橫向合併，就使用colspan：mark 12 }); 13 14 //合併其他列，只需要修改其field值 15 $('#dg').datagrid('mergeCells', { 16 index: i + 1 - mark, 17 field: 'CreateTime', //CreateTime為持續時間(分) 18 rowspan: mark 19 }); 20 } else { 21 mark = 1; //一旦前後兩行的值不一樣了，那麼需要合併的格子數mark就需要重新計算 22 } 23 } 24 } 25 else { 26 $('#dg .datagrid-view2 .datagrid-body').html('<div style="margin:10px 0; text-align:center;">沒有記錄.</div>'); //沒有記錄. 27 } 28 } 29 }View Code
效果圖：
3. 行內編輯及按鈕關鍵點：
- 待編輯列需要新增editor屬性，並且指定編輯時為何控制元件(type:'combotree'/'combobox'/'text')並指定相關屬性(options)
- 增加方法onBeginEdit和onEndEdit，可用於初始化編輯控制元件以及賦值
- 增加toolbar屬性，新增編輯按鈕
1 //初始化模版表格 2 function initdgstate() {//[StateID],[CenterID],[StateCode],[StateName],[SNLength],[SNType] 3 $('#dg').datagrid({ 4 width: $(window).width() - 20, 5 height: $(window).height() - 100, 6 url: 'State.aspx', 7 singleSelect: true, 8 rownumbers: true, 9 onClickRow: function (rowIndex, row) { 10 selectRow(rowIndex, row, $("#dg")); 11 }, 12 onDblClickRow: function () { 13 //雙擊選中 14 fchangeRow(); 15 }, 16 onBeginEdit: function (rowIndex, row) { 17 var ed = $(this).datagrid('getEditor', { index: rowIndex, field: 'CenterName' }); 18 var st = $(this).datagrid('getEditor', { index: rowIndex, field: 'STStateName' }); 19 var ft = $(this).datagrid('getEditor', { index: rowIndex, field: 'FTStateName' }); 20 var pstate = $(this).datagrid('getEditor', { index: rowIndex, field: 'PStateName' }); 21 22 //-----------------初始化獲得combotree值------------------ 23 $(pstate.target).combotree({ 24 url: 'State.aspx?ajax=getState&cid=' + G("selcenterid").value, 25 methord: 'get', 26 onBeforeExpand: function (record) { 27 $(pstate.target).combotree("tree").tree("options").url = "State.aspx?ajax=getState&cid=" + G("selcenterid").value + "&pid=" + record.id; 28 }, 29 onSelect: function (record) { 30 row.PID = record.id; 31 }, 32 onShowPanel: function () { 33 if (($(pstate.target).combotree('tree').tree('getRoots').length) == 0) { 34 $(pstate.target).combotree('setValue', ""); 35 row.PID = 0; 36 } 37 } 38 }); 39 if ($(pstate.target).combotree('getValue').length == 0) { 40 $(pstate.target).combotree('setValue', row.PStateName); 41 } 42 }, 43 onEndEdit: function (rowIndex, row) { 44 //--------------選擇combotree結果-------------- 45 var pid = $(this).datagrid('getEditor', { index: rowIndex, field: 'PStateName' }); 46 row.PStateName = $(pid.target).combotree('getText'); 47 }, 48 columns: [[ 49 { field: 'StateID', width: 60, align: 'center', title: '狀態編號' }, 50 { field: 'CenterID', width: 100, halign: 'center', title: 'ID', hidden: true }, 51 { field: 'CenterName', width: 120, align: 'center', title: '利潤中心 *', editor: 'text' }, 52 { field: 'StateName', width: 120, align: 'center', title: '狀態名稱 *', editor: 'text' }, 53 { field: 'StateCode', width: 100, align: 'center', title: '程式碼 *', editor: 'text' }, 54 { field: 'SNLength', width: 90, align: 'center', title: '流水號長度 *', formatter: formateNum, editor: { type: 'numberbox', options: { precision: 0 } } }, 55 { 56 field: 'SNType', width: 90, align: 'center', title: '流水號型別 *', 57 formatter: formateType, 58 editor: { 59 type: 'combobox', 60 options: { 61 valueField: 'id', 62 textField: 'text', 63 data: [{ id: "1", text: "天" }, { id: "2", text: "月" }], 64 panelHeight: 'auto', 65 editable: false 66 } 67 } 68 }, 69 { field: 'PID', width: 100, halign: 'center', title: 'PID', hidden: true }, 70 { 71 field: 'PStateName', width: 120, align: 'center', title: '上級狀態', 72 editor: { 73 type: 'combotree', 74 options: { 75 valueField: 'id', 76 textField: 'text', 77 panelHeight: 'auto', 78 editable: false 79 } 80 } 81 } 82 ]], 83 toolbar: [ 84 { id: 'addBtn', text: '新增', iconCls: 'icon-add', handler: faddRow }, '-', 85 { id: 'editBtn', text: '修改', iconCls: 'icon-edit', handler: feditRow }, '-', 86 { id: 'delBtn', text: '刪除', iconCls: 'icon-remove', handler: fdelRow }, '-', 87 { id: 'saveBtn', text: '儲存', iconCls: 'icon-save', handler: fsaveRow }, '-', 88 { id: 'cancelBtn', text: '取消', iconCls: 'icon-cancel', handler: fcancelRow }, '-', 89 { id: 'changeBtn', text: '選擇', iconCls: 'icon-ok', handler: fchangeRow }] 90 }); 91 } 92 //格式化 93 function formateNum(val, row) { 94 if (val != undefined) { 95 return formatNumber(val, "#.##"); 96 } 97 }View Code
效果圖：
