1：自定義列，包括 Group
var head1Array = [];
head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 });
head1Array.push({ title: 'yyyy', colspan: 4 });
var head2Array = [];
//$.each(units, function (i, unit) {
// colArray.push({ field: 'Id', title: unit.Name });
//});
head2Array.push({ field: 'Id', title: '111' });
head2Array.push({ field: 'Id', title: '222' });
head2Array.push({ field: 'Id', title: '333' });
head2Array.push({ field: 'Id', title: '444' });
$('#UnitScores').datagrid({
columns: [head1Array, head2Array],
footer:[{"Id":"合計"}],
showFooter: true
});
產生的效果如下：
注意，Datagrid 的 columns 的值是個數組，而數組的元素本身又是數組，相當於是個二維數組。如果不注意這一點，columns 就出不來。
2：Footer的使用
在 Footer 的使用中，必須要為 data 指定 rows 和 footer 兩個屬性，否則，Footer 也不會出現，如下：
var rowsx = [];
rowsx.push({ "Id": "類別類型屬性名稱：" });
rowsx.push({ "Id": "類別類型屬性值：" });
rowsx.push({ "Id": "文本類型屬性名稱：" });
var footer = [{ "Id": "合計" }];
var datax = { "rows": rowsx, "footer": footer };
$('#UnitScores').propertygrid('loadData',datax);
var rows = $('#questionUnitScores').datagrid('getFooterRows');
rows[0]['Id'] = 'new name';
$('#UnitScores').datagrid('reloadFooter');
3：對於單元格的編輯
假設列格式應該如下：
$('#Units').datagrid({
pageNumber: 1,
//url: "@ViewBag.Domain/Paper/GetQuestionUnit",
columns: [[
{ field: 'Id', title: 'id', width: 100, editor: 'text' },
{ field: 'Name', title: 'name', width: 100, editor: 'text' }
]],
pagination: false,
rownumbers: true,
onClickCell: onClickCell
});
editor 也可以是一個類型，如下：
{field:'projectID',
title:'Project/Paid Leave',
width:100,
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'DescriptionCode',
data:cmbprojects,
required:true,
editable:false,
onSelect:function(record){
}
}
}
默認的，EasyUI 對於編輯，是以行為單位的，也就是說，你要觸發編輯，首先觸發的是整行的編輯，類似如下：
$('#Units').datagrid('beginEdit', index);
上面的代碼的意思是，第 index 行，可以編輯。如果要編輯單元格，一般我們用於單擊某單元格，某行就可以編輯，則代碼如下：
function onClickCell(index, field) {
$('#Units').datagrid('beginEdit', index);
var ed = $('#questionUnits').datagrid('getEditor', { index: index, field: field });
$(ed.target).val("dddd");
$('#Units').datagrid('endEdit', index);
}
在上面的方法中，第二行表示得到當前的 editor，注意，getEditor 方法必須要在 beginEdit 之后，否則，我們得到的 ed 為 null。當得到了 editor ，就可以為其賦值，如果你不想在界面中輸入的話。endEdit 方法關閉行的可編輯狀態，並且表示 datagrid 接收了值的修改，這個時候，我們如果查看 $('#questionUnits').datagrid('getRows')，得到的就是修改過后的值。
如果在 onClickCell 中不 endEdit，還可以在外部批量接受修改的值，使用方法：
$('#Units').datagrid('acceptChanges');
即可。
3.1 如何啟動對指定單元格的修改
上面也說了，beginEdit 啟動的是對行的修改，如果對行中的某個單元格啟動修改，而其它單元格根本不啟動修改，其中一個辦法是：
$(ed.target).attr("disabled", true);
3.2 如何讓 Row 獲取 Editor 的額外屬性
除非擴展一個自己的 Eidtor，否則 Editor 只有兩個屬性：type，options。但是，另外一種思路是，獲取 Columns 的 Options 來達到此目的。比如，定義 Editor 為：
editor: { type: 'numberbox', options: { "UnitTemplateCode": item.Id } }
然后，得到 col，如下：
var fields = $('#UnitScores').datagrid('getColumnFields');
var col = $('#UnitScores').datagrid('getColumnOption', fields[i]);
然后，通過如下代碼，就可以得到額外的屬性 UnitTemplateCode。
col.editor.options.UnitTemplateCode
3.3 此 Editor 非彼 Editor
在上文中，通過：
var ed = $('#Units').datagrid('getEditor', { index: index, field: field });
我們也得到了一個 Editor，即：ed，它是一個在 EasyUI 框架內定義的對象，跟我們通過 col.editor 得到的對象不是同一個對象。
微信掃一掃，關注最課程（www.zuikc.com），獲取更多我的文章，獲取軟件開發每日一練