EasyUI并没有提供官方的方法为DataGrid的单元格赋值的方法,这点不得不吐槽一下,这么个简单的功能折腾了我好几天,试过N多种方法,都不是很好,都有各式各样的问题。比如你想使用updateRow,不好意思,updateRow后,这行就不能使用grid.datagrid('getChanges', 'updated')来获取这列的数据了。下面是我最后的解决方法,代码如下:
var EasyUIDataGrid = {
//设置列的值(适用于所有列)
setFieldValue: function (fieldName, value, index, grid) {
if (grid == undefined || grid == '') {
grid = $('#editgrid');
}
if (index == undefined || index == '') {
index = this.GeteditIndex(grid);
if (index == undefined) {
index = 0;
}
}
var row = grid.datagrid('getRows')[index];
if (row != null) {
var editor = grid.datagrid('getEditor', { index: index, field: fieldName });
if (editor != null) {
this.setValueToEditor(editor, value);
}
else {
var view = $('.datagrid-view');
for (var i = 0; i < view.length; i++) {
if ($(view[i]).children(grid.selector).length > 0) {
var view = $(view[i]).children('.datagrid-view2');
var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
var div = $(td).find('div')[0];
$(div).text(value);
}
}
row[fieldName] = value;
}
grid.datagrid('clearSelections');
}
},
//设置datagrid的编辑器的值
setValueToEditor: function (editor, value) {
switch (editor.type) {
case "combobox":
editor.target.combobox("setValue", value);
break;
case "combotree":
editor.target.combotree("setValue", value);
break;
case "textbox":
editor.target.textbox("setValue", value);
break;
case "numberbox":
editor.target.numberbox("setValue", value);
break;
case "datebox":
editor.target.datebox("setValue", value);
break;
case "datetimebox":
editor.target.datebox("setValue", value);
break;
default:
editor.html = value;
break;
}
}
}
从上面代码段可以看出来,我的意路是,如果该列有编辑器,那非常好办,直接获取该单元格的编辑器,为该编辑器赋值即可。但如果这列没有编辑器呢?看下面两段关键的代码
。
for (var i = 0; i < view.length; i++) {
if ($(view[i]).children(grid.selector).length > 0) {
var view = $(view[i]).children('.datagrid-view2');
var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
var div = $(td).find('div')[0];
$(div).text(value);
}
}
这段代码是datagrid经解析后的dom,我们直接操作dom显示值,有for循环是因为需要判断一个页面中存在多个datagrid的情况,可能不同的版本解析后的dom有所区别,这就需要大家自己慢慢再调试了。。但仅仅这样处理还不够,因为仅是这样处理,我们使用getChanges方法是取不到这个单元格的值的,所以还得为这行数据再赋值一次,就是:
row[fieldName] = value 这句关键的代码了。
可能你会想到,那为什么我们不直接写row[fieldName] = value就好了。因为直接写row[fieldName] = value,getChanges方法是可以取到值的,但界面上却不能及时的将值显示出来,必须强制刷新这行数据才能显示,而刷新又会丢失掉该行中另外一些编辑器的值,所以,把显示和真正赋值两者分开,就较好的解决这个问题了。