EasyUI Datagrid 自定義列、Foolter及單元格編輯

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′);.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';('#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 =('#Units').datagrid('beginEdit', index);          var ed =('#questionUnits').datagrid('getEditor', { index: index, field: field }); 

    (ed.target).val("dddd");(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 得到的對象不是同一個對象。

本文轉自最課程陸敏技部落格園部落格，原文連結：http://www.cnblogs.com/luminji/p/3342171.html，如需轉載請自行聯系原作者