easyui datagrid使用combogrid作为编辑器示例

  easyui的datagrid如果将combogrid对象作为列编辑器,直接设置列的editor配置为combogrid的配置对象没有效果,可以使用另外一种方法来实现,设置编辑器为text,然后获取editor对象,使用combogrid替换text编辑器。

 

  效果如下

easyui datagrid使用combogrid作为编辑器示例

  源代码及注释

<!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作为编辑器示例


原创文章,转载请注明出处:easyui datagrid使用combogrid作为编辑器示例

评论(0)Web开发网
阅读(1214)喜欢(0)不喜欢(0)easyui开发技巧