需求
列表中最后一列增加下拉框,在选择该行的时候,获取该行的所有数据(包括下拉框的内容)
实现
1、以下代码中,技能组级别字段设置为下拉框,但是没有设置列表为可编辑,所以该字段无法展示下拉效果
var level = [{ "level-value": 0, "level-name": "高"}, { "level-value": 1, "level-name": "中" }, { "level-value": 2, "level-name": "低" }];
var columns =[[
{
field:'id',
title:"",
width:50,
align:'center',
checkbox:"true"
}, {
field : 'fn_priority',
title : "优先级",
width : 200,
align : 'center'
},{
title: '级别',
field: 'fs_skglevel',
align : 'center',
width: 200,
editor: {
type: 'combobox',//下拉框
options: {
valueField: 'level-value',//对应为表格中的field
textField: 'level-name',//显示值
editable: false,
panelHeight:102,//控制下拉框高度
data: level, //json数据
required: false
}
}
},
]];
2、设置下拉框字段为可编辑
以下代码中,在onLoadSuccess(列表加载完成)方法中,通过调用datagrid的beginEdit方法,设置每一列为可编辑,这样列表的下拉框就会展示下拉效果。
$('#dg').datagrid({
url:searchUrl,
striped : true,
idField : "id",
fit : true,
fitColumns : true,
singleSelect : false,
rownumbers : true,
//点击行选中
checkOnSelect : false,
//点击复选框选中
selectOnCheck : true,
remoteSort : false,
sortName : '',
sortOrder : 'asc',
remoteFilter : true,//设置为true,doFilter和分页可以同时使用
filterDelay : 400,
columns : busColumns,
// onDblClickRow: function(rowIndex, rowData){
// selectData(rowData);
// },
onLoadSuccess:function (data){
var rows = $(this).datagrid("getRows");
//使等级显示为下拉框
for(var index=0;index
该段代码为下拉框设置默认值
if($(this).datagrid("getEditor",{index:index,field:"fs_skglevel"}).target.combobox('getValue') == ''){
$(this).datagrid("getEditor",{index:index,field:"fs_skglevel"}).target.combobox('setValue', "2");
}
3、修改后值得获取
在修改下拉框得值后,直接通过getSelected或者getSelections获取选中列得内容时,是无法获取到fs_skglevel(下拉框)的值得,需要执行以下方法,提交更改后的数据。
$("#dg").datagrid('acceptChanges')