市委组织部项目--EasyUI下拉框多选

“市委组织部考核系统”，这个系统是用于组织部进行考核分数的录入和统计的系统，其中有考核指标和负责考核的单位需要选择出来，这就造成了一个问题，现在让我们分析分析这个过程：

 

需求：

同一个指标可能由多个责任单位去考察，所以在设定指标时，添加责任单位就需要选择多个，虽然是多个责任单位，但是在数据库中却应该将这些责任单位分着放。

 

想法：

在添加责任单位时，下拉框可以多选，然后将数据按“，”分割，向数据库中添加责任单位时，将下拉框中的内容查分，写入数据库。当显示时，将数据库中的几个责任单位字段合并显示到界面！

 

问题：

如图：

也许大家还没看明白，我将责任单位下拉框中的内容复制出来，给大家看一下：

责任单位下拉框中应该显示：“市组织部，市统计局，市检察院”，但是他却显示为“市,组,织,部,,,市,统,计,局,,,市,检,察,院”也就是说，当我点击编辑时，它将我们要显示的内容每个字都按照“，”分割。

 

查资料:

也就是当界面上显示的责任单位为汉字显示时，当点击编辑时，easyui会自动帮我们拆分。

 

解决：

当界面上责任单位显示的为id时，因为每个下拉框都绑定着id和name值，点击编辑时，easyui只能拆分id，但是每个id代表的是一个责任单位，在点击编辑时的责任单位处，固显示的为正常！so，方案：在查询时，我将责任单位拼接到一起时，将它的id也拼接一个字段，只是在查询时不显示而已，而当点击编辑时，我弹出的责任单位的框却是绑定的id值，这样就可以实现我们要的效果！

 

修改好的页面：

简单的代码实现：

<span style="font-family:KaiTi_GB2312;font-size:24px;">//显示时，显示拼接好的责任单位id和名字
<table id="dg" title="定量指标管理" class="easyui-datagrid" striped="true" style="width:1055px;height:370px"
            data-options="rownumbers:true,url:'SetCityQuantifyTarget.ashx',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#toolbar'"
            pagination="true" rownumbers="true" fitColumns="true" singleSelect="false">
            <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'TargetID',width:150,align:'center'" hidden="hidden" >指标ID</th>
                <th data-options="field:'Name',width:150,align:'center'">名称</th>
                <th data-options="field:'Unit',width:150,align:'center'">单位</th>
                <th data-options="field:'ResponsibilityUnit',width:150,align:'center'">责任单位</th>           
                <th data-options="field:'ResponsibilityUnitID',width:150,align:'center'" hidden ="hidden">责任单位ID</th>           
                <th data-options="field:'Type1',width:80,align:'center'">一类县市区权重</th>
                <th data-options="field:'Type2',width:80,align:'center'">二类县市区权重</th>
                <th data-options="field:'Type3',width:80,align:'center'">三类县市区权重</th>
                <th data-options="field:'YearTime',width:80,align:'center'">年份</th>
                
            </tr>
                 <%--<input type="hidden" id="test" name="test"/>--%>
            </thead>
        </table>
</span>

点击编辑：显示的为拼接的id列

<span style="font-family:KaiTi_GB2312;font-size:24px;"><div class="fitem">
                <label>责任单位:</label>
                <%--<asp:DropDownList ID="ResponsibilityUnit" runat="server" class="easyui-validatebox" required="true" Width="131px" ></asp:DropDownList>--%>
                <input class="easyui-combobox" id="ResponsibilityUnitID" runat="server" Width="133px"  style="border-color:black"
                            name="ResponsibilityUnit"
                            data-options="
                                url: 'SetCityQuantifyTarget.ashx?test=GetCity', 
                                method:'get',
                                valueField:'cityid',
                                textField:'departmentname',
                                multiple:true,
                                editable:false,
                                panelHeight:'auto'
                        " />
                <%--<input type="hidden",id="ResponsibilityUnitID"/>--%> 
            </div>
</span>

保存时：向数据库中写时为id

<span style="font-family:KaiTi_GB2312;font-size:24px;">//更新保存用户
      function saveUser() {
          var test = document.getElementById("test").value;
          //获取界面输入的值
          var TargetID = document.getElementById("TargetID").value;
          var Name = document.getElementById("Name").value;
          var Unit = document.getElementById("unit").value;
          var Type3 = document.getElementById("Type3").value;
          var Type2 = document.getElementById("Type2").value;
          var Type1 = document.getElementById("Type1").value;
          var ResponsibilityUnit = $('#ResponsibilityUnitID').combobox('getValues');//document.getElementById("ResponsibilityUnit").value;
         
          var typeID;
          typeID = $('#Type').combobox('getValue');

          $('#fm').form('submit', {
              //url: "DevolomentInfo.ashx?CadresID=" + CadresID + "&CadresName=" + CadresName + "&Unit=" + Unit + "&Position=" + Position + "&test=" + modify,
              url: "SetCityQuantifyTarget.ashx?typeID=" + typeID + "&TargetID=" + TargetID + "&Name=" + Name + "&Unit=" + Unit + "&Type3=" + Type3 + "&Type2=" + Type2 + "&Type1=" + Type1 + "&ResponsibilityUnit=" + ResponsibilityUnit + "&test=" + test,
              onSubmit: function () {
                  return $(this).form('validate');
              },
              
              success: function (result) {
                  alert(result);
                  if (result.indexOf("T") == 0) {

                      alert('恭喜您，信息添加成功！')
                      $('#dlg').dialog('close');		// 关闭窗口
                      $('#dg').datagrid('reload');
                  } else if (result.indexOf("E") == 0)
                      {
                      alert('保存失败，请您核对！此指标已存在！')
                  }
                  else {
                      alert('保存失败，请您核对！(责任单位最多只能选择3个)')
                  }
                  var result = eval('(' + result + ')');
                  if (result.success) {
                      $('#dlg').dialog('close');		// close the dialog
                      $('#dg').datagrid('reload');
                      $.message.alert('提示', '保存成功！', 'info');

                      
                  } else {
                      
                  }
              }
          });
      }
</span>

总结：

         在这里只是提供一种思路，我想说：一个问题的解决方式有多种，在平时我们就要锻炼自己多方位思考问题，注重拓宽自己的思路与眼界，遇到问题要同时有n种方案，这样才能保证工作的正常进行！