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

来源：互联网发布：360软件修补漏洞编辑：程序博客网时间：2024/05/19 03:23

首选是对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>

0 0