.net easyUI datagrid的combobox的联动效果 动态加载下拉数据

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值