在公司的專案中，有需要再新增資料的時候，通過下來選擇資料來完成資料的填充。

網上找了很多關於datagrid繫結 combogrid的方法，都不能很好的解決問題，於是自己根據easyUI的api完成了這個方法。

ID為OtherFees的table 是一個datagrid；

在繫結的欄位中，欄位fee_name可以編輯的editor，型別為combogrid。所以在紅色部分實現了對這個editor的繫結。

在combogrid中，要實現選擇費用名稱後，對其他欄位（如：費用金額fee_price，折扣discount，實際金額real_amount）的繫結填充。就需要在combogrid的onSelect方法中完成editor的賦值（setvalue）。

所以藍色部分就是onSelect選中的具體方法。

首選通過：var rowIndex= grid.datagrid('getRowIndex',grid.datagrid('getSelected')); 獲取到當前datagrid的當前編輯列的索引ID。

用到了datagrid中editor的兩個方法。

============華麗麗的程式碼分割線=================

 <table id="OtherFees" style="width:auto;height:auto"title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"idField="itemid" >
	<thead>
	<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" editor="{type: 'text'}" ></th> 
                        <th field="fee_name"  align="left"  width="160" editor="{type: 'combogrid', 
                            options: {
                            url: '獲取費用的URL',
                            panelWidth:200, 
                            idField: 'feename', 
                            textField: 'feename',
                            columns:[[{field:'feename',title:'費用名稱',width:140},{field:'saleprice',title:'費用金額',width:60},{field:'costprice',title:'費用金額',width:60}]],
                            onSelect: function (index, row) {
                               </span><span style="color:#3366ff;"> var grid = $('#OtherFees');</span><span style="color:#33ccff;">
                                </span><span style="color:#3366ff;">var rowIndex= grid.datagrid('getRowIndex',grid.datagrid('getSelected'));
                                grid.datagrid('beginEdit', rowIndex);
                                var editors = grid.datagrid('getEditors', rowIndex);
                                var fee_price, discount, real_amount;
                                fee_price = grid.datagrid('getEditor', { index: rowIndex, field: 'fee_price' });
                                discount = grid.datagrid('getEditor', { index: rowIndex, field: 'discount' });
                                real_amount = grid.datagrid('getEditor', { index: rowIndex, field: 'real_amount' });
                                $(fee_price.target).numberbox('setValue',row.saleprice);
                                $(real_amount.target).numberbox('setValue',row.saleprice);
                                $(fee_price.target).bind('change', function () {
                                    $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());
                                });
                                $(discount.target).bind('change', function () {
                                    $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());

                                });
                             } }}">費用名稱 </th></span>
                        <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=<%=GetAdminBranch.branch_no%>', valueField: 'propertyname', textField: 'propertyname' }}" >維修性質</th>  
                        <th field="memo"  align="left"  width="200 "editor="{type: 'text'}"  >備註 </th>
	</tr>
                    
	</thead>
</table>
 

如果是通過JavaScript來初始化datagrid列的朋友，你可以把combogrid的繫結，以及對combogrid中的onselect中的程式碼重新進行分開呼叫。

在onselect中引入下面的方法：

function SetFeesValue(){
      var grid = $('#OtherFees');
    var rowIndex= grid.datagrid('getRowIndex',grid.datagrid('getSelected'));
    grid.datagrid('beginEdit', rowIndex);
    var editors = grid.datagrid('getEditors', rowIndex);
    var fee_price, discount, real_amount;
    fee_price = grid.datagrid('getEditor', { index: rowIndex, field: 'fee_price' });
    discount = grid.datagrid('getEditor', { index: rowIndex, field: 'discount' });
    real_amount = grid.datagrid('getEditor', { index: rowIndex, field: 'real_amount' });
    $(fee_price.target).numberbox('setValue',row.saleprice);
    $(real_amount.target).numberbox('setValue',row.saleprice);/賦值
    $(fee_price.target).bind('change', function () {
        $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());
    });
    $(discount.target).bind('change', function () {
        $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());
       });
}