easyui DataGrid editors扩展之combogrid ，combogrid 下拉选择后填充 editor 列内容方法

首选是对datagrid editors  进行拓展 combogrid


jeasyui官网原文：http://www.jeasyui.com/forum/index.php?topic=478.0


Extend the 'combogrid' editor.
Code:

<pre name="code" class="javascript">$.extend($.fn.datagrid.defaults.editors, {
	combogrid: {
		init: function(container, options){
			var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); 
			input.combogrid(options);
			return input;
		},
		destroy: function(target){
			$(target).combogrid('destroy');
		},
		getValue: function(target){
			return $(target).combogrid('getValue');
		},
		setValue: function(target, value){
			$(target).combogrid('setValue', value);
		},
		resize: function(target, width){
			$(target).combogrid('resize',width);
		}
	}
});

然后是在datagrid的列中进行绑定：javascript 创建数据网格（datagrid）绑定代码如下：

$('#dg').datagrid({
	columns:[[
		{field:'productid',name:'ProductId',width:100,
			editor:{
				type:'combogrid',
				options:{
					panelWidth:450,
					idField:'code',
					textField:'name',
					url:'datagrid_data.json',
					columns:[[
						{field:'code',title:'Code',width:60},
						{field:'name',title:'Name',width:100},
						{field:'addr',title:'Address',width:120},
						{field:'col4',title:'Col41',width:100}
					]]
				}
			}
		}
	]]
});

<table> 标记创建数据网格（datagrid）的绑定代码如下：

<table id="OtherFees" style="width:auto;height:auto"title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"idField="itemid" >
<thead>
<span style="white-space:pre">	</span><tr>  
        <th field="sheet_no" hidden="true"></th>  
        <th field="flow_no"  hidden="true"></th> 
        <th field="itemid"  align="left"  width="40"  >ID </th>
        <th field="cost_amount"  hidden="true"></th> 
        <th field="fee_name"  align="left"  width="160" editor="{type: 'combogrid', 
            options: {
            url: '../../Ajax/Ajax_Common.ashx?action=getOtherFeelist&branch_no=<%=GetAdminBranchNo().branch_no%>',
            panelWidth:200, 
            idField: 'feename', 
            textField: 'feename',
            columns:[[{field:'feename',title:'费用名称',width:160},{field:'saleprice',title:'费用金额',width:60},{field:'costprice',title:'费用金额',width:60}]],
            onSelect: function (index, row) {
                var editors = $('#OtherFees').datagrid('getEditors', lastIndex_OtherFees);
                var Editor1,Editor2,Editor3;
                Editor1 = $('#OtherFees').datagrid('getEditor', { index: lastIndex_OtherFees, field: 'memo' });
                Editor2 = $('#OtherFees').datagrid('getEditor', { index: lastIndex_OtherFees, field: 'fee_price' });
                Editor3 = $('#OtherFees').datagrid('getEditor', { index: lastIndex_OtherFees, field: 'cost_amount' });
                $(Editor2.target).numberbox('setValue',row.saleprice);
                $(Editor3.target).val(row.costprice);
                } }}">费用名称 </th>
        <th field="fee_price"  align="left"  width="60"  editor="{type: 'numberbox', options: {required: true, precision: 1}}">费用金额 </th>
        <th field="discount"  align="left"  width="60"  editor="{type: 'numberbox', options: {required: true, precision: 1}}">折扣 </th>
        <th field="real_amount"  align="left"  width="60" editor="{type: 'numberbox', options: {required: true, precision: 1}}" >实收 </th>
        <th field="repair_property" align="center"   width="120"  editor="{type: 'combobox', options: {required: true, precision: 1, url: '../../Ajax/Ajax_Common.ashx?action=getRepairPropertyInfo&branch_no=<%=GetAdminBranchNo().branch_no%>', valueField: 'propertyname', textField: 'propertyname' }}" >维修性质</th>  
        <th field="memo"  align="left"  width="200 "editor="{type: 'text'}"  >备注 </th>
<span style="white-space:pre">	</span></tr>
                    
</thead>
</table>