easyUI在可编辑的datagrid中加入combogrid 实现下拉选择填充列

easyUI在可编辑的datagrid中加入combogrid 实现下拉选择填充列

原创  2016年09月19日 14:30:46

• 2859

在公司的项目中，有需要再添加数据的时候，通过下来选择数据来完成数据的填充。

网上找了很多关于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的两个方法。

============华丽丽的代码分割线=================

[html]  view plain  copy

1. <table id="OtherFees" style="width:auto;height:auto"title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"idField="itemid" >  
2. <thead>  
3. <tr>    
4.                        <th field="sheet_no" hidden="true"></th>    
5.                        <th field="flow_no"  hidden="true"></th>   
6.                        <th field="itemid"  align="left"  width="40"  >ID </th>  
7.                        <th field="cost_amount" editor="{type: 'text'}" ></th>   
8.                        <th field="fee_name"  align="left"  width="160" editor="{type: 'combogrid',   
9.                            options: {  
10.                            url: '获取费用的URL',  
11.                            panelWidth:200,   
12.                            idField: 'feename',   
13.                            textField: 'feename',  
14.                            columns:[[{field:'feename',title:'费用名称',width:140},{field:'saleprice',title:'费用金额',width:60},{field:'costprice',title:'费用金额',width:60}]],  
15.                            onSelect: function (index, row) {  
16.                               </span><span style="color:#3366ff;"> var grid = $('#OtherFees');</span><span style="color:#33ccff;">  
17.                                </span><span style="color:#3366ff;">var rowIndex= grid.datagrid('getRowIndex',grid.datagrid('getSelected'));  
18.                                grid.datagrid('beginEdit', rowIndex);  
19.                                var editors = grid.datagrid('getEditors', rowIndex);  
20.                                var fee_price, discount, real_amount;  
21.                                fee_price = grid.datagrid('getEditor', { index: rowIndex, field: 'fee_price' });  
22.                                discount = grid.datagrid('getEditor', { index: rowIndex, field: 'discount' });  
23.                                real_amount = grid.datagrid('getEditor', { index: rowIndex, field: 'real_amount' });  
24.                                $(fee_price.target).numberbox('setValue',row.saleprice);  
25.                                $(real_amount.target).numberbox('setValue',row.saleprice);  
26.                                $(fee_price.target).bind('change', function () {  
27.                                    $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());  
28.                                });  
29.                                $(discount.target).bind('change', function () {  
30.                                    $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());  
31.   
32.                                });  
33.                             } }}">费用名称 </th></span>  
34.                        <th field="fee_price"  align="left"  width="60"  editor="{type: 'numberbox', options: {required: true, precision: 1}}">费用金额 </th>  
35.                        <th field="discount"  align="left"  width="60"  editor="{type: 'numberbox', options: {required: true, precision: 1}}">折扣 </th>  
36.                        <th field="real_amount"  align="left"  width="60" editor="{type: 'numberbox', options: {required: true, precision: 1}}" >实收 </th>  
37.                        <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>    
38.                        <th field="memo"  align="left"  width="200 "editor="{type: 'text'}"  >备注 </th>  
39. </tr>  
40.                      
41. </thead>  
42. lt;/table>  

===============另外说一下=================

如果是通过JavaScript来初始化datagrid列的朋友，你可以把combogrid的绑定，以及对combogrid中的onselect中的代码重新进行分开调用。

在onselect中引入下面的方法：

[javascript]  view plain  copy

1. function SetFeesValue(){  
2.       var grid = $('#OtherFees');  
3.     var rowIndex= grid.datagrid('getRowIndex',grid.datagrid('getSelected'));  
4.     grid.datagrid('beginEdit', rowIndex);  
5.     var editors = grid.datagrid('getEditors', rowIndex);  
6.     var fee_price, discount, real_amount;  
7.     fee_price = grid.datagrid('getEditor', { index: rowIndex, field: 'fee_price' });  
8.     discount = grid.datagrid('getEditor', { index: rowIndex, field: 'discount' });  
9.     real_amount = grid.datagrid('getEditor', { index: rowIndex, field: 'real_amount' });  
10.     $(fee_price.target).numberbox('setValue',row.saleprice);  
11.     $(real_amount.target).numberbox('setValue',row.saleprice);/赋值  
12.     $(fee_price.target).bind('change', function () {  
13.         $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());  
14.     });  
15.     $(discount.target).bind('change', function () {  
16.         $(real_amount.target).numberbox('setValue', $(fee_price.target).val() * $(discount.target).val());  
17.        });  
18. }