最近做easyui 表格里，遇到一个坑
先说需求，客户希望做一个表格可编辑，满足单条输入修改、批量删除保存，在可编辑表格里有一个三级联动的下拉框combobox，参考网上的一些思路，踩了几个坑之后，解决了该问题。
上代码：
//设置表格需要编辑的列
{
field: 'companyId',
title: '客户编码',
width: 140,
editor : {
type : 'combobox',
options : {
url: '{path}',
valueField: 'id',
textField: 'text',
panelHeight: 'auto',
width: 140
}
}
}, {
field: 'companyName',
title: '客户名称',
width: 170,
editor: {
type: 'text'
, options : {
width: 170
}
}
}
//首先设置表格可编辑
function appendPaperItemRow(index){
//判断行编辑状态
dealpaperItemEdit(false,index);
//刷新修改后的数据
refreshPaperItemRows(index);
dealpaperItemEdit(true,index);
}
该方法可以直接在 datagrid 的 onDblClickRow等方法里直接调用。
在dealpaperItemEdit（）方法里进行获取editor编辑器
function dealpaperItemEdit(ifBegin,index){
//获取编辑行
var rowsData = $('#dg').datagrid('getRows');
if(ifBegin){
//开启编辑状态
$('#dg').datagrid('beginEdit', index);
//获取该行的所有的编辑器
var editors = $('#dg').datagrid('getEditors', index);
//获取行编辑器的对象，按照列的下标进行获取
var editor1 = editors[0];//获取下拉框这个编辑器
var editor2 = editors[1];//获取下拉框选中之后要改变值的那个编辑器
editor1.target.combobox({
//绑定combobox选中事件
onSelect:function(param){
//另一个编辑器赋值，这里赋值按照Api里面方法写就行
editor2.target.textbox({
value: param.text
});
}
});
} else {
$('#dg').datagrid('endEdit', index);
}
}
最后执行refreshPaperItemRows（）方法，更新数据即可
//编辑时修改或者选择的时间，赋值对应的行数据
function refreshPaperItemRows(index){
var rowsData = $('#dg').datagrid('getRows');
var row = rowsData[index];
$('#dg').datagrid('updateRow',{
index: index,
row: row
});
}
特别注意
在datagrid 的columns定义时，原本直接通过接口获取到的数据然后给combobox赋值，这样每次combobox加载数据的时候都是前台拿数据，减少了接口访问次数，但一直显示不出来，最后采取了url直接访问赋值。
上完整代码：
$('#dg').datagrid({
idField: 'necessaryid',
singleSelect: false,
checkOnSelect: false,
remoteSort: true,
pageList: [20, 50, 100, 200],
fitColumns: false,
columns: [[ {
field: 'ck',
title: '复选框',
checkbox: true
}, {
field: 'necessaryid',
title: 'necessaryid',
hidden: true
},{
field: 'productName',
title: '品名',
width: 180,
editor: {
type: 'text'
, options : {
width: 180
}
}
},{
field: 'contactPaperNo',
title: '规格',
width: 170,
editor: {
type: 'text'
, options : {
width:170
}
}
}, {
field: 'marker',
title: '唛头',
width: 70,
editor: {
type: 'text'
, options : {
width: 70
}
}
}, {
field: 'productNumber',
title: '件数',
width: 70,
editor: {
type: 'text'
, options : {
width: 70
}
}
},{
field:'grossWeight',
title: '毛重',
width: 70,
editor: {
type: 'text'
, options : {
width: 70
}
}
}, {
field: 'volume',
title: '体积',
width: 70,
editor: {
type: 'text'
, options : {
width: 70
}
}
}, {
field: 'netWeight',
title: '净重',
width: 70,
editor: {
type: 'text'
, options : {
width: 70
}
}
}, {
field: 'companyId',
title: '客户编码',
width: 140,
editor : {
type : 'combobox',
options : {
url: '{path}',
valueField: 'id',
textField: 'text',
panelHeight: 'auto',
width: 140
}
}
}, {
field: 'companyName',
title: '客户名称',
width: 170,
editor: {
type: 'text'
, options : {
width: 170
}
}
}, {
field: 'remark',
title: '商品备注',
width: 160,
editor: {
type: 'text'
, options : {
width: 160
}
}
},
]]
,onLoadSuccess: function(data){
},
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
},
onDblClickRow :function(rowIndex,rowData){
appendPaperItemRow(rowIndex);
}
});
//开启行编辑的方法集合
function appendPaperItemRow(index){
dealpaperItemEdit(false,index);
refreshPaperItemRows(index);
dealpaperItemEdit(true,index);
}
//判断编辑状态，开启编辑or关闭编辑
function dealpaperItemEdit(ifBegin,index){
var rowsData = $('#dg').datagrid('getRows');
if(ifBegin){
$('#dg').datagrid('beginEdit', index);
var editors = $('#dg').datagrid('getEditors', index);
//获取行编辑器第一个对象
var editor1 = editors[7];
var editor2 = editors[8];
editor1.target.combobox({
onSelect:function(param){
console.log(param);
editor2.target.textbox({
value: param.text
});
}
});
} else {
$('#dg').datagrid('endEdit', index);
}
}
//编辑时修改或者选择的时间，赋值对应的行数据
function refreshPaperItemRows(index){
var rowsData = $('#dg').datagrid('getRows');
var row = rowsData[index];
$('#dg').datagrid('updateRow',{
index: index,
row: row
});
}