市委组织部项目--纠正下拉框多选的错误

http://blog.csdn.net/hejingyuan6/article/details/18812435

在上篇博客中曾介绍了一种方式实现下拉框多选，而且在编辑时，可以选中已选项。

出现的问题：当时使用的方式是，点击编辑时用id绑定，easyui会根据下拉框中的内容自动拆分，当时测试时，由于id均为各位数字，固没有问题，但是当随着数据库中的内容增加，id可能是两位或者三位数字，这时，easyui仍然会给我们拆分，本来id为43，应根据43这个id号去查找，但是系统却会拆分成4,3。然后就会去查找id为4和3对应的责任单位，但这些并不是我们想要的！

 

解决方案：

 

添加县市区定量考核指标：根据考核年份选择责任单位，责任单位可多选

 <div id="dlg" class="easyui-dialog" style="width: 400px;top:110px;left:329px; height: auto; padding: 10px 20px"
        closed="true" buttons="#dlg-buttons">
        <div class="ftitle">添加/编辑定量指标</div>
        <form id="fm" method="post" novalidate >
            <div class="fitem" >                           
                <label >指标名称:</label>
                <input  id="Name" name="Name" class="easyui-validatebox" required="true"/>
            </div>
            <div class="fitem">
                <label>考核年份:</label>              
                 <input class="easyui-combobox" id="year" runat="server" style="border-color:black"
                         name="year"
                         data-options="  
                         url:'SetCityQuantifyTarget.ashx?test=inquireServerTime',                             
                         method:'get',
                         editable:false,
                         valueField:'year',                           
                         textField:'year',
                         panelHeight: 'auto',                     
                         onSelect:function(rec){                                               
                         var url = 'SetCityQuantifyTarget.ashx?test=GetCity&name='+rec.year;
                         $('#ResponsibilityUnit').combobox('clear'),  
                         $('#ResponsibilityUnit').combobox('reload', url); 
                        }                             
                  " />              
            </div>
            <div class="fitem">
                <label>责任单位:</label>               
                <input class="easyui-combobox" id="ResponsibilityUnit" runat="server" Width="133px"  style="border-color:black"
                            name="ResponsibilityUnit"
                            data-options="                                                  
                                method:'get',
                                valueField:'id',
                                textField:'unitname',
                                editable:false,
                                multiple:true 
                                               
                        " />              
            </div>         
            <div class="fitem">
                <label>一类县权重:</label>
                <input  id="Type1" name="Type1" class="easyui-validatebox" required="true" />
            </div>
            
            <div id="Div1" class="fitem" runat="server">
                <label>二类县权重:</label>
               <input  id="Type2" name="Type2" class="easyui-validatebox" required="true" />

            </div>
            <div class="fitem">
                <label>广阳区权重:</label>
               <input  id="guangyang" name="guangyang" class="easyui-validatebox" required="true" />
            </div>
            <div class="fitem">
                <label>安次区权重:</label>
               <input  id="anci" name="anci" class="easyui-validatebox" required="true" />
            </div>

            
            <input type="hidden" id="test" name="test" />
            <input type="hidden" id="test1" name="test" />
        </form>
    </div>

编辑时：直接绑定字段名称，而不是id值，将选中行的责任单位字段直接赋给弹出框！$('#ResponsibilityUnit').combobox('setText',row.ResponsibilityUnit);

//编辑事件
      function editUser() {
          var type;
          type = $('#Type').combobox('getText');
          if (type != "全部") {
              var row = $('#dg').datagrid('getSelected');
              $('#fm').form('clear');
              if (row) {
                  //$.ajaxSetup({
                  //    async: false
                  //});
                  //var url = 'SetCityQuantifyTarget.ashx?test=GetCity&name=' + row.YearTime;
                  //$('#ResponsibilityUnit').combobox('reload', url);

                  $('#dlg').dialog('open').dialog('setTitle', '编辑县市区定量指标');
                  $('#TargetID').val(row.TargetID);
                  $('#Name').val(row.Name);
                  document.getElementById("year").value = row.YearTime;
                  //$('#Type3').val(row.Type3);
                  $('#guangyang').val(row.guangyang);
                  $('#anci').val(row.anci);
                  $('#Type2').val(row.Type2);
                  $('#Type1').val(row.Type1);
                  $('#year').combobox('setText', row.YearTime);
                  $('#ResponsibilityUnitID').val(row.ResponsibilityUnitID);
                  var resID = row.ResponsibilityUnit;
                  //$('#ResponsibilityUnit').combobox('setText', row.ResponsibilityUnit);
                  var str = new Array();
                  str = resID.split(";");   //分割数组成为一个个单一的个体，放在数组中
                  var totalData = $('#ResponsibilityUnit').combobox('getData');  //获取下拉框中的值
                  for (var i = 0; i < totalData.length; i++) {
                      for (var j = 0; j < str.length; j++) {
                          if (totalData[i].unitname == str[j]) {
                              $('#ResponsibilityUnit').combobox('select', totalData[i].id);  //循环判断，如果某项一致，则该项选中
                          }
                      }
                  }

                  document.getElementById("test").value = "modify"
                  $('#fm').form('load');                
              } else {
                  $.messager.alert('提示', '请选中一条记录进行修改', 'info');
                  return;
              }
          } else {
              $.messager.alert('提示', '请选中指标类型进行修改', 'info');
              return;
          }


      }

出现的问题：

原因：因为在添加责任单位时，是根据年份进行选择的，也就是当年份onSelect（当用户选择一个列表项的时候触发）时，加载责任单位信息，但是编辑时我可能不点击年份则不会触发onSelect事件，就会出现如上问题。

 

解决方法：首先想到的是，当编辑时再次根据年份加载一次责任单位即：

 var url ='SetCityQuantifyTarget.ashx?test=GetCity&name=' + row.YearTime;

 $('#ResponsibilityUnit').combobox('reload',url);

 

显示结果：

而且只有首次加载时，下拉框中显示为空，第二次的话就正常显示（也就是当刷新完，第一次点击为空，第二次点击即正常）

Why？

也就是说，当下拉框加载上数据之后显示正常，那么不正常时，可能就是在编辑时重新查询下拉框的内容时，还没有查询到数据，固显示为空。

 

解决方案：让js先将下拉框的数据加载上，然后

                  var resID = row.ResponsibilityUnit;
                  //$('#ResponsibilityUnit').combobox('setText', row.ResponsibilityUnit);
                  var str = new Array();
                  str = resID.split(";");   //分割数组成为一个个单一的个体，放在数组中
                  var totalData = $('#ResponsibilityUnit').combobox('getData');  //获取下拉框中的值
                  for (var i = 0; i < totalData.length; i++) {
                      for (var j = 0; j < str.length; j++) {
                          if (totalData[i].unitname == str[j]) {
                              $('#ResponsibilityUnit').combobox('select', totalData[i].id);  //循环判断，如果某项一致，则该项选中
                          }
                      }
                  }

循环的将选中行中的责任单位和下拉框中的数据进行匹配，相等的被选中，显示出来。固为了上程序按步执行，添加如下代码即可！

//同步执行
                  $.ajaxSetup({
                      async: false
                  });

结果显示：

总结：问题源源不断，针对问题解决问题，不断提升自己！