datagrid根据datagrid列上数据不同加载不同的combobox下拉框并初始化下拉款值
时间: 2024-01-19 18:03:47 浏览: 75
Datagrid中使用combobox
可以通过监听datagrid的`onLoadSuccess`事件,然后根据datagrid列上的数据动态地初始化combobox下拉框。
具体步骤:
1. 给datagrid添加`onLoadSuccess`事件监听器:
```javascript
$('#datagrid').datagrid({
url: '...',
onLoadSuccess: function(data) {
// 在这里初始化combobox下拉框
}
});
```
2. 获取datagrid中的列数据:
```javascript
var rows = $('#datagrid').datagrid('getRows');
```
3. 遍历列数据,根据数据不同创建不同的combobox下拉框:
```javascript
$.each(rows, function(index, row) {
if(row.column1 === 'value1') {
var combobox = $('<select>');
combobox.append($('<option>').val('option1').text('Option 1'));
combobox.append($('<option>').val('option2').text('Option 2'));
// ...
// 初始化combobox下拉框
} else if(row.column1 === 'value2') {
var combobox = $('<select>');
combobox.append($('<option>').val('option3').text('Option 3'));
combobox.append($('<option>').val('option4').text('Option 4'));
// ...
// 初始化combobox下拉框
}
// ...
});
```
4. 将创建好的combobox下拉框插入到datagrid中的单元格中:
```javascript
$('#datagrid').datagrid('getPanel').find('td[field="column2"] div').each(function(){
$(this).empty().append(combobox.clone());
});
```
其中,`"column2"`是需要初始化combobox下拉框的datagrid列的字段名。
这样就可以根据datagrid列上的数据动态地初始化combobox下拉框了。
阅读全文