【easyui】datagrid的combobox动态添加数据源求解

[firegunner]

诸位，我在用easyui的可编辑datagrid的时候，每一行的combobox的数据源需要动态获取并且需要combobox能级联操作，而非页面初始时即初始化，我现在已经实现动态获取数据和级联操作，但当我endEdit的时候，编辑的那一行显示是combobox的key，而非value。请问如何处理？


但当我结束这一行编辑的时候，显示的不是combobox的text，而是显示的是combobox的value

请问，我该如何处理，才能让结束编辑后，显示的是combobox的text？
求解！各位大仙！
一下是局部代码：

<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>

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
});
}

[firegunner]

点击【新增】按钮的时候，关闭（endEdit）当前选中行的编辑状态，这个时候本来combobox里面显示的text，全都变成了combobox的value。

[我就是个打字的]

一定是你打开的方式不对

[lingyu50]

尝试formatter 数据源如果没加载到，就只会显示原有值，即你说的ID

[Wannn0905]

editor:{ type:'combobox', options:{ valueField:'id', textField:'name', required:true }

[Wannn0905]

“ valueField:'id', ”改成 valueField:'name', 。

[风一样的大叔]

你后台数据库怎么写的呀？

[叫我三三]

我以前写的你可以参照

 <input id="S_faultType" class="easyui-combobox" name="language" style="width:150px;"
	data-options="
	 url:'../../Handler/Statistics.ashx?Type=ft',
	 valueField:'Value',
	 textField:'Text',
	 multiple:false,
	 panelHeight:'auto',
         onSelect: function(rec){  
              $('#S_faultName').combobox('setValues', '');
              var url = '../../Handler/Statistics.ashx?Type=fn&Value='+rec.Value;  
              $('#S_faultName').combobox('reload', url);  
         }
 " />
         <input id="S_faultName" class="easyui-combobox" name="language" style="width:150px;"
		data-options="
		valueField:'Value',
		textField:'Text',
		multiple:true,
		panelHeight:'300'
		" />

我这2级联动，下面那个根据上面选的值改变而改变

[叫我三三]

textField:'Text',设置显示的内容 valueField:'Value',设置显示内容对于的值

[dugangandy]

引用 5 楼 nanjue921 的回复:

“ valueField:'id', ”改成 valueField:'name', 。

这个可以。

[涵月冰菱]

引用 9 楼 DyGan 的回复:

引用 5 楼 nanjue921 的回复: “ valueField:'id', ”改成 valueField:'name', 。 这个可以。

这样改了以后还能取到ID吗？

[dreamqingdao]

能否拜读你的后台代码？

[蒾途笑笑生]

var ed = $('#dg).datagrid('getEditor', {index:editIndex,field:'name'}); var nameVal= $(ed.target).combobox('getText'); $(ed.target).combobox('setValue', nameVal);

[蒾途笑笑生]

获取更改后的值，重新赋值给列表

[wellway]

哪位大侠知道，在easyui动态获取数据后，怎么在页面设置它的小数位数，如这样展示38,072.9115

[三月软件----王耀峰]

想知道楼主是怎么解决的，我也遇到同样的问题了！！！

[皮卡兵]

easyui的datagrid本来就是这样的，但你可以用以下方法解决：： <script type="text/javascript"> var comboboxData;//项目与部门 field内的combobox data var depOrProId;//content内的combobox data 与上面的comboboxData级联 $(function() { //输入url获得data，用于获得combobox的值 var _url='${pageContext.request.contextPath}/userController/getDepAndProByUid?userId=${sessionInfo.id}'; $.ajax({ url:_url, type:'get', async:false,//此处必须是同步 dataTye:'json', success:function(data){ comboboxData=data; } }) $('#Diarydg') .datagrid( { view : detailview, url : "${pageContext.request.contextPath}/diaryController/dataGrid", toolbar : "#tool", border : false, pagination : true, fitColumns : true, singleSelect : true, onClickRow: onClickRow, fit : true, columns : [ [ { field : 'pd', title : '项目与部门', width : 100, formatter:function(value,rowData,rowIndex){//格式化该字段内的显示 for(var i=0; i<comboboxData.length; i++){ if(comboboxData[i].value==value){ depOrProId=comboboxData[i].value; return comboboxData[i].label; } } return ""; }, editor:{ type:'combobox', options:{ valueField:'value', textField:'label', data:comboboxData } } }, 希望您能看懂

[ttonily]

加个formatter属性，判断选择后的value值，对应返回一个你要的字符串就ok了 {field:'Status',title:'确认状态',width:50,formatter:function(value,row){ if(value == 1){ return '是'; }else if(value == 0){ return '否'; } }, editor:{ type: 'combobox', options:{ editable: false, panelHeight: 50, data: [{ value:'1', text:'是' },{ value:'0', text:'否', }] } } }

[jan9983]

17楼正解，测试通过了！