<script>
var screenData = @Html.Raw(ViewData["ScreenData"]);//第一级数据,页面初始化时加载数据
var screenPos;
//同步获取子数据
function getScreenFeild(screenId) {
$.ajax({
url: "/Config/GetScreenFeildPosList",
data:{screenId:screenId},
async: false,
success: function(data) {
screenPos = $.parseJSON(data);
}
});
};
getScreenFeild();
</script>
}
<table data-toggle="topjui-edatagrid"
data-options="id:'configDatagrid',
url: '/Config/GetDispSeekData',
saveUrl: '/Config/DispSeekDataModify',
updateUrl: '/Config/DispSeekDataModify',
checkOnSelect: true,
selectOnCheck: true,
singleSelect: false,
onSelect: function (rowIndex, rowData) {
}">
<thead>
<tr>
<th data-options="field:'GUID',title:'GUID',checkbox:true"></th>
<th data-options="field:'Name',title:'名称',sortable:true,width:60,editor:{type:'textbox',options:{required:true,height:34}}"></th>
<th data-options="field:'SeekValue',title:'查询值',sortable:true,editor:{type:'textbox',options:{required:true,height:34}}"></th>
<th data-options="field:'ScreenId',title:'所属屏幕',sortable:true,
formatter:function(value,row){
for(var i = 0; i < screenData.length; i++){//根据当前加载的数据展示实际名称
var data = screenData[i];
if(data.GUID == value)
return data.Name
}
return value;//官方Demo此处直接用冗余字段(row.ScreenName)展示,这样会导致数据ID变动后名称不改变的问题。
},
editor:{type:'combobox',options:{
valueField:'GUID',
textField:'Name',
data:screenData,
onSelect:function(item){
//重点部分
var screenId = item.GUID;
var rowIndex = $(this).parents('.datagrid-row').attr('datagrid-row-index');//获取行号
var target = $('#configDatagrid').datagrid('getEditor', { index : rowIndex , field :'ScreenPos'}).target;//获取子级对象
target.combobox('clear'); //清除子级的数据
getScreenFeild(screenId); //根据父ID刷新子数据
$(target).combobox('loadData', screenPos);//联动下拉列表重载;由于此处返回的是Json字符串不是Json对象,不然可以用target.combobox('reload', '/Config/GetScreenFeildPosList?screenId=' + screenId);
},
required:true,height:34}}"></th>
<th data-options="field:'ScreenPos',title:'显示位置',sortable:true,
formatter:function(value,row){
for(var i = 0; i < screenPos.length; i++){
var data = screenPos[i];
if(data.GUID == value)
return data.Name
}
return value;
},
editor:{type:'combobox',options:{
valueField:'GUID',
textField:'Name',
data:screenPos,
required:true,height:34}}"></th>
</tr>
</thead>
</table>