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 得到的对象不是同一个对象。

微信扫一扫，关注最课程（），获取更多我的文章，获取软件开发每日一练