级联下拉框编辑时回显问题。jQuery combobox下拉框回显

使用级联下拉框时,前一个下拉框的值决定了下一个下拉框的值,新增操作时通过onSelect事件(或onChange事件)可以很好地处理。但是编辑操作时,有一个数据回显过程,存在下拉框的 data加载 和下拉框的选定交叉执行的过程,即:

1.加载第一个下拉框的data

2,选定第一个下拉框的值

3.加载第二个下拉框的data

4.选定第二个下拉框的值

5.加载第三个下拉框的data

6.选定第三个下拉框的值

这种情况下直接加载下拉框的data,并且进行赋值,会出现第二个以后的下拉框无法回显的问题。

解决思路如下(例子使用jQuery combobox演示):

1.定义两个全局变量(根据下拉框的级联个数而定,三个级联就定义两个变量):

var editWrktId,editSitId;

2.第一级下拉框直接加载好,并配置onSelect事件(值被选定),第一级值被选定后加载第二级下拉框的data:

$("#add_proc").combobox({
        url: ctx + '/combo.do?action=getProc',
        method:'get',
        valueField:'id',
        textField:'text',
        editable: true,
        limitToList: true,
        panelHeight:'300px',
        onSelect:function(record){
          let process = record.id;
          $("#add_wrkt").combobox('clear');
          $("#add_sit").combobox('clear');
          $("#add_wrkt").combobox('loadData', []);
          $("#add_sit").combobox('loadData', []);
          $("#add_wrkt").combobox({
            url: ctx + '/combo.do?action=getWrkt&proc='+proc,
            method:'get',
            valueField:'id',
            textField:'text',
            editable: false,
            panelHeight:'300px',
          });
        }
      });

3.第二级下拉框添加onLoadSuccess事件(data加载完成)及onSelect事件(值被选定),onLoadSuccess事件用于data加载完毕后设置选定值,onSelect事件用于 设置第二级的选定值后 加载第三级的data

$("#add_proc").combobox({
        url: ctx + '/combobox.do?action=getProc',
        method:'get',
        valueField:'id',
        textField:'text',
        editable: true,
        limitToList: true,
        panelHeight:'300px',
        onSelect:function(record){
          let proc = record.id;
          $("#add_wrkt").combobox('clear');
          $("#add_sit").combobox('clear');
          $("#add_wrkt").combobox('loadData', []);
          $("#add_sit").combobox('loadData', []);
          $("#add_wrkt").combobox({
            url: ctx + '/combo.do?action=getWrkS&proc='+proc,
            method:'get',
            valueField:'id',
            textField:'text',
            editable: false,
            panelHeight:'300px',
              onLoadSuccess:function(){
                  if (editWrktId) {
                      $("#add_wrkt").combobox("setValue",editWrkt);
                  }
              },
            onSelect:function(record){
              let wrktId = record.id;
              $("#add_sit").combobox('clear');
              $("#add_sit").combobox('loadData', []);
              $("#add_sit").combobox({
                url: ctx + '/combo.do?action=getSit&wrkt='+wrktId,
                method:'get',
                valueField:'id',
                textField:'text',
                editable: false,
                panelHeight:'300px',
              });
            }
          });
        }
      });

4.给第三级下拉框添加onLoadSuccess事件(data加载完毕),用于设置第三级的选定值。

$("#add_proc").combobox({
        url: ctx + '/combo.do?action=getProc',
        method:'get',
        valueField:'id',
        textField:'text',
        editable: true,
        limitToList: true,
        panelHeight:'300px',
        onSelect:function(record){
          let procId = record.id;
          $("#add_wrkt").combobox('clear');
          $("#add_sit").combobox('clear');
          $("#add_wrkt").combobox('loadData', []);
          $("#add_sit").combobox('loadData', []);
          $("#add_wrkt").combobox({
            url: ctx + '/combo.do?action=getWrkt&proc='+procId,
            method:'get',
            valueField:'id',
            textField:'text',
            editable: false,
            panelHeight:'300px',
              onLoadSuccess:function(){
                  if (editWrktId) {
                      $("#add_wrkt").combobox("setValue",editWrktId);
                  }
              },
            onSelect:function(record){
              let wrktId = record.id;
              $("#add_sit").combobox('clear');
              $("#add_sit").combobox('loadData', []);
              $("#add_sit").combobox({
                url: ctx + '/combo.do?action=getSit&wrkt='+wrktId,
                method:'get',
                valueField:'id',
                textField:'text',
                editable: false,
                panelHeight:'300px',
                  onLoadSuccess:function(){
                      if (editSitId) {
                          $("#add_sit").combobox("setValue",editSitId);
                      }
                  }
              });
            }
          });
        }
      });

关键点:

1.除了最后一级外,每一级都需要设置onSelect事件,用于加载下一级的data。

2.除了第一级外,每一级都需要设置onLoadSuccess事件,用于设置本级的选定值。

3.级联n个下拉框,需要n-1个全局变量,用于存储除第一级外的下拉框选定值。

4.打开编辑窗口时,首先给上一步中的全局变量赋值,然后给包括第一级下拉框在内的回显元素赋值。

5.打开新增窗口时,首先清除全局变量的值,以免影响新增数据(如果新增窗口和编辑窗口公用一个弹窗时,需要执行这一步)。

以上的操作逻辑就是:

加载第一级data——》设置第一级的值——》加载第二级data——》设置第二级的值——》加载第三级的data——》设置第三级的值……

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值