<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++){//从下来数据中根据数据Id显示名称
var data = screenData[i];
if(data.GUID == value)
return data.Name
}
return value;//在官方Demo中表里有个单独字段(row.ScreenName)展示数据,这样会导致保存后改字段显示空白,必须重新查询才能正常显示
},
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);//联动下拉列表重载
},
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>