datagrid根据datagridid不同加载不同的combobox下拉框并初始化下拉款值
时间: 2023-08-06 16:07:49 浏览: 43
您可以使用`onBeforeLoad`事件来根据`datagrid`的不同`id`值来动态配置不同的`combobox`下拉框,并在`onLoadSuccess`事件中初始化下拉框的值。
具体来说,您可以在`onBeforeLoad`事件中获取`datagrid`的`id`值,并根据不同的`id`值来动态配置不同的`combobox`下拉框。例如:
```
$('#myDatagrid1').datagrid({
url: 'data1.json',
columns: [[
{field: 'id', title: 'ID', width: 100},
{field: 'name', title: '名称', width: 100},
{field: 'type', title: '类型', width: 100}
]],
onBeforeLoad: function (params) {
// 获取datagrid的id值
var datagridId = $(this).attr('id');
// 根据不同的id值配置不同的下拉框选项
if (datagridId == 'myDatagrid1') {
$('#myDatagrid1').datagrid('getColumnOption', 'type').editor = {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: [{id:1,text:'选项一'},{id:2,text:'选项二'},{id:3,text:'选项三'}]
}
};
} else if (datagridId == 'myDatagrid2') {
$('#myDatagrid2').datagrid('getColumnOption', 'type').editor = {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: [{id:4,text:'选项四'},{id:5,text:'选项五'},{id:6,text:'选项六'}]
}
};
}
},
onLoadSuccess: function (data) {
// 初始化下拉框的值
var rows = $('#myDatagrid1').datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var type = row.type;
var $combobox = $('#myDatagrid1').datagrid('getEditor', {index:i,field:'type'}).target;
$combobox.combobox('setValue', type);
}
}
});
$('#myDatagrid2').datagrid({
url: 'data2.json',
columns: [[
{field: 'id', title: 'ID', width: 100},
{field: 'name', title: '名称', width: 100},
{field: 'type', title: '类型', width: 100}
]],
onBeforeLoad: function (params) {
// 获取datagrid的id值
var datagridId = $(this).attr('id');
// 根据不同的id值配置不同的下拉框选项
if (datagridId == 'myDatagrid1') {
$('#myDatagrid1').datagrid('getColumnOption', 'type').editor = {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: [{id:1,text:'选项一'},{id:2,text:'选项二'},{id:3,text:'选项三'}]
}
};
} else if (datagridId == 'myDatagrid2') {
$('#myDatagrid2').datagrid('getColumnOption', 'type').editor = {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: [{id:4,text:'选项四'},{id:5,text:'选项五'},{id:6,text:'选项六'}]
}
};
}
},
onLoadSuccess: function (data) {
// 初始化下拉框的值
var rows = $('#myDatagrid2').datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var type = row.type;
var $combobox = $('#myDatagrid2').datagrid('getEditor', {index:i,field:'type'}).target;
$combobox.combobox('setValue', type);
}
}
});
```
在上面的代码中,我们分别创建了两个`datagrid`,并在它们的`onBeforeLoad`事件中根据不同的`id`值动态配置不同的`combobox`下拉框。在`onLoadSuccess`事件中,我们使用`datagrid`的`getEditor`方法来获取相应的下拉框,并使用`setValue`方法来设置下拉框的值。
需要注意的是,在使用`getEditor`方法获取下拉框时,需要将`field`属性设置为'type',因为'type'是下拉框所在的列名。