datagrid中的editor,combobox動態新增資料來源,實現二級聯動的辦法(更新中)
阿新 • • 發佈：2019-01-28
但當我結束這一行編輯的時候，顯示的不是combobox的text，而是顯示的是combobox的value
請問，我該如何處理，才能讓結束編輯後，顯示的是combobox的text？
求解！各位大仙！
一下是區域性程式碼：
XML/HTML code?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<table id="detailTable" style="width:auto;height:auto"
title="採購明細">
<thead>
<tr>
<th data-options="field:'categoryId',width:120,align:'center',
editor:{
type:'combobox',
options:{
valueField:'superId',
textField:'superName',
required:true
}
}">類別
</th>
<th data-options="field:'brandId',width:120,align:'center',editor:{
type:'combobox',
options:{
valueField:'superId',
textField:'superName',
required:true
}
}">品牌
</th>
<th data-options="field:'productionId',width:120,align:'center',
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'name',
required:true
}
}">產品
</th>
<th data-options="field:'storeId',width:120,align:'center',editor:{
type:'combobox',
options:{
valueField:'superId',
textField:'superName',
required:true
}
}">倉庫
</th>
<th data-options="field:'price',width:70,align:'center',editor:'numberbox'">單價</th>
<th data-options="field:'count',width:70,align:'center',editor:'numberbox'">數量</th>
<th data-options="field:'total',width:70,align:'center',editor:'numberbox'">總價</th>
<th data-options="field:'prePay',width:70,align:'center',editor:'numberbox'">預付</th>
</tr>
</thead>
</table>
|
JavaScript code?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
var lastIndex;
$('#detailTable').datagrid({
toolbar:[{
text:'新增',
iconCls:'icon-add',
handler:function(){
$('#detailTable').datagrid('endEdit', lastIndex);
$('#detailTable').datagrid('appendRow',{
categoryId:'',
brandId:'',
productionId:'',
storeId:'',
price:'',
count:'',
total:'',
prePay:''
});
lastIndex = $('#detailTable').datagrid('getRows').length-1;
$('#detailTable').datagrid('selectRow', lastIndex);
$('#detailTable').datagrid('beginEdit', lastIndex);
synchCategory(getEditRow(lastIndex,'categoryId'),lastIndex);
synchStore(getEditRow(lastIndex,'storeId'));
}
},'-',{
text:'編輯',
iconCls:'icon-remove',
handler:function(){
var row = $('#detailTable').datagrid('getSelected');
if (row){
var index = $('#detailTable').datagrid('getRowIndex', row);
$('#detailTable').datagrid('deleteRow', index);
}
}
},'-',{
text:'刪除',
iconCls:'icon-remove',
handler:function(){
var row = $('#detailTable').datagrid('getSelected');
if (row){
var index = $('#detailTable').datagrid('getRowIndex', row);
$('#detailTable').datagrid('deleteRow', index);
}
}
}],
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#detailTable').datagrid('endEdit', lastIndex);
$('#detailTable').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
// 非同步載入類別，並在選中後，級聯載入品牌（Brand）的combobox
function synchCategory(editRow,index){
$(editRow.target).combobox('reload','category/findSuperCategoryByAjax.action?date='
+ new Date().getTime());
$(editRow.target).combobox({onSelect:function(){
synchBrand(getEditRow(index,'brandId'),index,$(this).combobox('getValue'));
}});
}
// 非同步載入品牌，並在選中後，級聯載入商品（Production）的combobox
function synchBrand(editRow,index,categoryId){
jQuery(editRow.target).combobox('reload','brand/findSuperBrandByAjax.action?categoryId=' + categoryId + '&date='
+ new Date().getTime());
$(editRow.target).combobox({onSelect:function(){
synchProduction(getEditRow(index,'productionId'),index,$(this).combobox('getValue');
}});
}
// 載入品牌（production）
function synchProduction(editRow,index,brandId){
jQuery(editRow.target).combobox('reload','production/findProductionByAjax.action?brandId=' + brandId + '&date=' + new Date().getTime());
}
// 載入倉庫
function synchStore(editRow){
jQuery(editRow.target).combobox('reload','store/findSuperStoreByAjax.action?date='
+ new Date().getTime());
}
// 獲取需要編輯的控制元件
function getEditRow(lastIndex,field){
return category = jQuery('#detailTable').datagrid('getEditor', {
index : lastIndex,
field : field
});
}
|