easyui datagrid使用combogrid作为编辑器示例
easyui的datagrid如果将combogrid对象作为列编辑器，直接设置列的editor配置为combogrid的配置对象没有效果，可以使用另外一种方法来实现，设置编辑器为text，然后获取editor对象，使用combogrid替换text编辑器。
效果如下
源代码及注释
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>easyui datagrid使用combogrid作为编辑器示例</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg"></table>
<script>
var lastIndex
var combogrid_Config = {//combogrid配置对象
singleSelect: true,
url: 'price.json',//combogrid数据源配置
panelWidth: 300,
textField: 'productname',
height: 25,
columns: [[{ field: 'productname', width: 100, editor: 'text', title: 'Product Name' },
{ field: 'listprice', width: 80, align: 'right', title: 'List Pirce' },
{ field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'}]],
onSelect: function (index, data) {
setTimeout(function () {//注意要延时执行，要不会报错，可能combogrid作为编辑器和datagrid有冲突
var drow = $('#dg').datagrid('getSelected');
var index = $('#dg').datagrid('getRowIndex', drow);
$('#dg').datagrid('endEdit', index);
$('#dg').datagrid('updateRow', { index: index, row: data });
}, 10);
}
};
$(function () {
$('#dg').datagrid({
singleSelect: true,
url: 'product.json',
title: 'easyui datagrid使用combogrid作为编辑器示例',
onSelect: function (index, data) {
if (window.lastIndex != index) { //离开当前编辑的行，则关闭编辑状态
if(lastIndex!=undefined) $(this).datagrid('endEdit', lastIndex);
lastIndex = index;
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', { index: index, field: 'productname' });//获取产品名称text编辑器
$(ed.target).combogrid(combogrid_Config);//替换text为combogrid编辑器，注意如果要根据当前行的某些数据加载不同的内容，需要动态修改配置中的url
}
},
width: 400, height: 300,
columns: [[{ field: 'itemid', width: 80, title: 'Item ID' },
{ field: 'productname', width: 100, editor: 'text', title: 'Product Name' },
{ field: 'listprice', width: 80, align: 'right', title: 'List Pirce' },
{ field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'}]]
});
});
</script>
</body>
</html>
未调用setTimeout延时执行updateRow更新数据发生错误截图，具体原因不明
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui datagrid使用combogrid作为编辑器示例