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); }); }
原文地址: