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])); }
效果图如下: