Recently, in the easyui form, I encountered a pit
Let me talk about the requirements first. The customer wants to make an editable form, which can satisfy single input modification, batch deletion and storage. There is a three-level linkage drop-down box combobox in the editable form. Referring to some ideas on the Internet, after stepping on a few pitfalls, the solution solved the problem.
Above code:
//设置表格需要编辑的列
{
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);
}
This method can be directly called in methods such as onDblClickRow of datagrid.
Get the editor editor in the dealpaperItemEdit() method
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);
}
}
Finally execute the refreshPaperItemRows() method to update the data
//编辑时修改或者选择的时间，赋值对应的行数据
function refreshPaperItemRows(index){
var rowsData = $('#dg').datagrid('getRows');
var row = rowsData[index];
$('#dg').datagrid('updateRow',{
index: index,
row: row
});
}
Pay special attention
to the definition of the columns of the datagrid. The data originally obtained directly through the interface is then assigned to the combobox, so that every time the combobox loads data, the data is taken from the front desk, which reduces the number of interface visits, but it has not been displayed. Finally, take The url directly accesses the assignment.
The complete code above:
$('#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
});
}