easyui datagrid列表中增加combobox下拉框

需求

列表中最后一列增加下拉框,在选择该行的时候,获取该行的所有数据(包括下拉框的内容)

实现

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')

你可能感兴趣的:(前端,easyui)