easyui_datagrid 行内使用comobox的编码实现

easyui datagrid组件的列属性中有一个editor属性,官方介绍如下:

所以,我们可以通过编码实现datagrid行内插入comobox的方式来实现某些场合的需要,具体编码实现如下:

//测试数据:
var contentArr = new Array();
var testObj = {};
testObj.key = id;
testObj.key = "0";
contentArr.push(testObj);

//datagrid 行内comobox内容:
var keyData = [{key:'0',name:'非主键'},{key:'1',name:'主键'}];
 
//datagrid初始化
$('#mapGrid').datagrid({
	striped: true,
	 '100%',
	height: '100%',
	selectOnCheck: true,
	showHeader: false,
	fitColumns: false, 
	columns:[
		[{
			field:'map',
			'66%',
			align:'left'
		},{ 
			field:'key',
			'33%',
			align:'left',
			editor:{
				type:'combobox',
				options:{
				valueField:'key',
				textField:'name',
				data: keyData,
				}
			}
		}]
	]				
	});
//动态插入行数据
insertRow:function(contentArr){
		var index = 0;
		var allRows = $('#mapGrid').datagrid('getRows');
		if(allRows.length > 0){
			index = allRows.length;
		}
		$('#mapGrid').datagrid('insertRow', {
			index: index,
			row:{
				map: contentArr.map,
				key: '0'
			}
		});
		$('#mapGrid').datagrid('beginEdit',index);
}

 这时直接获取datagrid中comobox的值,只能取到初始设置值,取不到变化之后的值,需要先endEdit如下:

var allRows = $('#mapGrid').datagrid('getRows');
for(var i=0;i<allRows.length;i++){
	$('#mapGrid').datagrid('endEdit',$('#mapGrid').datagrid('getRowIndex',allRows[i]));
}

 效果图如下:

原文地址:https://www.cnblogs.com/hunterCecil/p/6277361.html