EasyUI Datagrid 单元格编辑

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

3.4 单元格合计值

$(function () {
var lastIndex;
$('#tt').datagrid({
url: 'webjson.ashx',
title: 'Load Data ',
iconCls: 'icon-save',
singleSelect: true,
loadMsg: '数据加载中请稍后……',
width: 600,
height: 300,
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 100 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: "numberbox" }, //增加可编辑
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: "numberbox" },//增加可编辑
{ field: 'attr1', title: 'Attribute', width: 150, editor: "text" },//这里虽为编辑类型，但是已经修改源码，成为不可以状态
{ field: 'status', title: 'Status', width: 60, align: 'center' }
]],
pageSize: 5,
pageList:[5,10,20,30],
pagination: true,
rownumbers: true ,
onClickRow: function (rowIndex) {
if (lastIndex != rowIndex) {
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
setEditing(rowIndex);
}
lastIndex = rowIndex;
}

});
});

//具体实现方法

function setEditing(tablename,rowIndex) {
var editors = $('#tt').datagrid('getEditors', rowIndex);
var priceEditor = editors[0];
var amountEditor = editors[1];
var sumcount = editors[2];
priceEditor.target.bind('change', function () {
//                calculate();
var sum = priceEditor.target.val() * amountEditor.target.val();
alert(sum);
sumcount.attr1.val(sum);

});
amountEditor.target.bind('change', function () {
var sum = priceEditor.target.val() + amountEditor.target.val();
alert(sum);

});

}

原文地址：http://www.tuicool.com/articles/UZZJr2