很多時候都會用到combox的聯動效果，選擇上一個combox的值就自動帶出這個值對應的其它信息，比如省市聯動，最近我也剛好遇到了類似的要求，是用EasyUI combobox 控件完成的，如果是ASP.NET 里面的DropDownList的話，那就很簡單了，一個SelectIndexChange事件再加一個AutoPostBack就行了，下面就是我實現的功能，其實很簡單，但是對於像我這樣剛接觸EasyUI，並且對JQ不熟悉的人來說還是有點費神。
首先是數據庫：為此我特地做了一個測試數據庫用來測試效果。
tb_Factory表為最上層
tb_Factory表中的FactoryID與tb_WorkCenter表中的FactoryID為主外鍵關系
tb_WorkCenter表中的WorkCenterID與tb_Lines表中的WorkCenterID為主外鍵關系
下面是前台頁面代碼，引用那些JQ的就不寫了：
<body> <form id="form1" runat="server"> <div> <div id="divcenter" style="width: 400px; height: 500px; position: absolute"> <div id="divQuery" class="easyui-panel" title="查詢"> <table style="border: 0; width: 100%"> <tr style="height: 30px;"> <td style="text-align: right;" class="style2" align="right"> 工廠： </td> <td style="text-align: left;" class="style1"> <select id="SelectF" class="easyui-combobox" data-options="valueField:'FactoryID',textField:'FactoryName',url:'Index.aspx?Oper=GetAllFactory',width:200,modal:true"> </select> </td> </tr> <tr style="height: 30px;"> <td style="text-align: right;" class="style2" align="right"> 工作中心： </td> <td style="text-align: left;" class="style1"> <select id="SelectW" class="easyui-combobox" data-options="valueField:'WorkCenterID',textField:'WorkCenterName',width:200"> </select> </td> </tr> <tr style="height: 30px;"> <td style="text-align: right;" class="style2" align="right"> 線別： </td> <td style="text-align: left;" class="style1"> <select id="SelectL" class="easyui-combobox" data-options="valueField:'LineID',textField:'LineName',width:200"> </select> </td> </tr> <tr style="height: 30px;"> <td style="text-align: right;" class="style2" align="right"> 日期: </td> <td style="text-align: left; font-weight: bold; padding-left: 10px;" class="style1"> <input id="StartDate_WorkGroup" type="text" style="width: 90px;" class="easyui-datebox" />至 <input id="EndDate_WorkGroup" type="text" style="width: 90px;" class="easyui-datebox" /> </td> </tr> </table> </div> </div> </div> </form> </body>
以下是腳本代碼，通過JQ來實現combox的onSelect事件，重新創建新的URL，通過這個URL來使目標combox重新加載數據，在API上看到的方法：reload。
<script language="javascript" type="text/javascript"> $(document).ready(function () { //Start:居中顯示 $("#divcenter").css("left", (($(document).width()) / 2 - (parseInt($("#divcenter").width()) / 2)) + "px"); $("#divcenter").css("top", (($(document).height()) / 2 - (parseInt($("#divcenter").height()) / 2)) + "px"); //End:居中顯示 //Start:設置combox的選擇事件 $('#SelectF').combobox({ onSelect: function () { var url = 'Index.aspx?Oper=GetWorkCenterListByFactoryID&FactoryID=' + $('#SelectF').combobox('getValue'); $('#SelectW').combobox('reload', url); } }); $('#SelectW').combobox({ onSelect: function () { var url = 'Index.aspx?Oper=GetLineListByWorkCenterID&WorkCenterID=' + $('#SelectW').combobox('getValue'); $('#SelectL').combobox('reload', url); } }); //End:設置combox的選擇事件 }); </script>
下面在cs文件里面根據前台的請求，分別作出相應的處理，比如前台請求查詢工廠，那后台就執行查詢工廠的方法，其它的也是一樣：
1 using System; 2 using System.Collections.Generic; 3 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace Test 9 { 10 public partial class Index : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 if (Request.QueryString["Oper"] != null) 15 { 16 string _FactoryID; 17 string _WorkCenterID; 18 19 //根據前台的請求進行分別處理。 20 switch (Request.QueryString["Oper"]) 21 { 22 //初始化的時候加載所有的工廠。 23 case "GetAllFactory": 24 GetAllFactory(); 25 break; 26 case "GetWorkCenterListByFactoryID": 27 //前台發出請求的時候會傳遞一個工廠ID的參數進來，這里接收到這個參數， 28 //作為條件進行查詢該工廠下面的工作中心。 29 _FactoryID = Request.QueryString["FactoryID"]; 30 GetWorkCenterByFactoryID(_FactoryID); 31 break; 32 case "GetLineListByWorkCenterID": 33 //同上 34 _WorkCenterID = Request.QueryString["WorkCenterID"]; 35 GetLineByWorkCenterID(_WorkCenterID); 36 break; 37 } 38 } 39 } 40 41 //******************************************* 42 //以下部分的函數都是將DataTable類型的結果轉換為JSON格式 43 //******************************************* 44 45 /// <summary> 46 /// Get all factory 47 /// </summary> 48 /// <returns></returns> 49 public void GetAllFactory() 50 { 51 var dt =new DAL().GetAllFactoryList(); 52 var json = JsonHelper.ConvertDataTable(dt); 53 Response.Write(json); 54 Response.End(); 55 } 56 57 /// <summary> 58 /// Get all workcenter by factory id 59 /// </summary> 60 /// <param name="FactoryID">Factory ID</param> 61 /// <returns></returns> 62 public void GetWorkCenterByFactoryID(string FactoryID) 63 { 64 var dt = new DAL().GetWorkCenterListByFactoryID(FactoryID); 65 var json = JsonHelper.ConvertDataTable(dt); 66 Response.Write(json); 67 Response.End(); 68 } 69 70 /// <summary> 71 /// Get all lines by workcenter id 72 /// </summary> 73 /// <param name="WorkCenterID">Workcenter ID</param> 74 /// <returns></returns> 75 public void GetLineByWorkCenterID(string WorkCenterID) 76 { 77 var dt = new DAL().GetLineListByWorkCenterID(WorkCenterID); 78 var json = JsonHelper.ConvertDataTable(dt); 79 Response.Write(json); 80 Response.End(); 81 } 82 } 83 }
1 using System; 2 using System.Collections.Generic; 3 using System.Web; 4 using System.Data; 5 namespace Test 6 { 7 public class DAL 8 { 9 /// <summary> 10 /// Get all factory 11 /// </summary> 12 /// <returns></returns> 13 public DataTable GetAllFactoryList() 14 { 15 string strSql = "SELECT FactoryID,FactoryName FROM dbo.tb_Factory (NOLOCK) ORDER BY 2 "; 16 return new DataAccess().GetDataTable(strSql); 17 } 18 19 /// <summary> 20 /// Get all workcenter by factory id 21 /// </summary> 22 /// <param name="FactoryID">Factory ID</param> 23 /// <returns></returns> 24 public DataTable GetWorkCenterListByFactoryID(string FactoryID) 25 { 26 string strSql = "SELECT WorkCenterID,WorkCenterName FROM tb_WorkCenter (NOLOCK) WHERE FactoryID='" + FactoryID + "' ORDER BY WorkCenterName"; 27 return new DataAccess().GetDataTable(strSql); 28 } 29 30 /// <summary> 31 /// Get all lines by workcenter id 32 /// </summary> 33 /// <param name="WorkCenterID">Workcenter ID</param> 34 /// <returns></returns> 35 public DataTable GetLineListByWorkCenterID(string WorkCenterID) 36 { 37 string strSql = " SELECT LineID,LineName FROM tb_Lines (NOLOCK) WHERE WorkCenterID='" + WorkCenterID + "' ORDER BY LineName"; 38 return new DataAccess().GetDataTable(strSql); 39 } 40 } 41 }
最后看一下效果：
PS:
要注意一點:我總是不習慣JQ的那些寫法,比如說每次開始和結尾的兩個括號,要是跟C#里面一樣就好了,上下各一個對齊,感覺JQ里面的括號特別"不好看",括號多了就容易看錯,我在這個問題上犯了好幾次錯誤了.