The master-slave table, the slave table is a treegrid. After loading the data, click on the node to enter the editing state.
The code copy is as follows:
columns : [ [ {
title : "ID",
field : "id",
hidden : true
}, {
field : "pid",
hidden : true
}, {
title: "AAA",
field : "aaa",
width: 70,
align : "center",
halign : "center"
}, {
title : "BBB",
field : "bbb",
width: 70,
align : "center",
halign : "center",
editor : {
type: "combobox",
options: {
data : [ {
"id" : 0,
"text" : "Apple"
}, {
"id" : 1,
"text" : "pear"
} ],
valueField : 'id',
textField : 'text',
editable : false,
// required : true,
panelHeight : "auto",
missingMessage : "Please select fruit",
onSelect : function(record) {
//editingId is the id that enters the editing status line
var editors = $('#grid').datagrid('getEditors', $('#editingId').val());
if(record.id == 1){//Select Pear
var feditor = editors[1];//The second edit box in one line
//Set the edit box as required
$(feditor.target).validatebox({required:true});
//Set the edit box to editable
$(feditor.target).numberbox('enable');
var feditor2 = editors[2];//The third edit box in one line
$(feditor2.target).validatebox({required:true});
}else if(record.id == 0){//Select Apple
var feditor = editors[1];
$(feditor.target).validatebox({required:false});
$(feditor.target).validatebox("setValue","");
$(feditor.target).numberbox('disable');
var feditor2 = editors[2];
$(feditor2.target).validatebox({required:false});
$(feditor2.target).validatebox("setValue","");
}
},
}
}
}
Turn on editing status
The code copy is as follows:
$('#rulesgrid').treegrid('beginEdit', index);
The above is the method of editing treegrid in EasyUI in this article. I hope you like it.