1.首先我们定义一个datagrid,还有它的columns属性值,这时候相互关联的字段,应该是可编辑的
var flow_toolbar = [[
{field: 'level', title: '审签级数', 200, align: 'center', editor:{type: 'textbox', required: true}},
{field: 'user_id', 200, align: 'center', hidden: true, editor:{type: 'textbox', required: true}}, //关联的是这两个字段
{field: 'name', title: '审签人姓名', 500, align: 'center',
editor: {
type: 'combobox',
options: {
//multiple: true,
valueField: 'name',
textField: 'name',
method: 'get',
{#url: "{{ url_for('static', filename='file/user_data.json')}}",#}
url: "/api/user",
loadFilter: function(data){
return data.rows;index
},
// onSelect事件是当选中combobox中的数据的时候才会触发
onSelect: function(record){
let user_id = record.user_id;
var row = $('#flow_level_detail').datagrid('getSelected'); // 获取当前选中的行
var row_index = $('#flow_level_detail').datagrid('getRowIndex', row); //获取当前选中行的index
let target_name = $('#flow_level_detail').datagrid('getEditor', {index: row_index, field: 'user_id'});// 获取这一行的field名字为user_id的字段信息
$(target_name.target).textbox('setValue', user_id); //对该行的该字段赋值实现关联
},
}
}
},
]];
$('#flow_level_detail').datagrid({
columns: flow_toolbar,
singleSelect: true,
onClickCell: onClickCell,
onEndEdit: onEndEdit,
});
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#flow_level_detail').datagrid('validateRow', editIndex)) {
$('#flow_level_detail').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
var editIndex = undefined;
function onClickCell(index, field) {
if (editIndex != index) {
if (endEditing()) {
$('#flow_level_detail').datagrid('selectRow', index).datagrid('beginEdit', index);//当我们点击一个cell的时候就开始编辑这一行的这个cell
var ed = $('#flow_level_detail').datagrid('getEditor', {index: index, field: field});
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
//console.log(value);
} else {
setTimeout(function () {
$('#flow_level_detail').datagrid('selectRow', editIndex);
}, 0);
}
}
}