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