EasyUI combox实现联动
多的时间将被用于combox联动效应。一个选择combox的值自己主动出这值有关相应的其他信息,例如省市联动。最近,我刚刚会见了班似要求,随着EasyUI combobox 控制完成。假设ASP.NET 里面DropDownList的话,那就非常easy了,一个SelectIndexChange事件再加一个AutoPostBack即可了,以下就是我实现的功能,事实上非常easy,可是对于像我这样刚接触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文件中面依据前台的请求,分别作出对应的处理。比方前台请求查询工厂,那后台就运行查询工厂的方法。其他的也是一样:
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Test { public partial class Index : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["Oper"] != null) { string _FactoryID; string _WorkCenterID; //依据前台的请求进行分别处理。switch (Request.QueryString["Oper"]) { //初始化的时候载入全部的工厂。 case "GetAllFactory": GetAllFactory(); break; case "GetWorkCenterListByFactoryID": //前台发出请求的时候会传递一个工厂ID的參数进来。这里接收到这个參数, //作为条件进行查询该工厂以下的工作中心。 _FactoryID = Request.QueryString["FactoryID"]; GetWorkCenterByFactoryID(_FactoryID); break; case "GetLineListByWorkCenterID": //同上 _WorkCenterID = Request.QueryString["WorkCenterID"]; GetLineByWorkCenterID(_WorkCenterID); break; } } } //******************************************* //以下部分的函数都是将DataTable类型的结果转换为JSON格式 //******************************************* /// <summary> /// Get all factory /// </summary> /// <returns></returns> public void GetAllFactory() { var dt =new DAL().GetAllFactoryList(); var json = JsonHelper.ConvertDataTable(dt); Response.Write(json); Response.End(); } /// <summary> /// Get all workcenter by factory id /// </summary> /// <param name="FactoryID">Factory ID</param> /// <returns></returns> public void GetWorkCenterByFactoryID(string FactoryID) { var dt = new DAL().GetWorkCenterListByFactoryID(FactoryID); var json = JsonHelper.ConvertDataTable(dt); Response.Write(json); Response.End(); } /// <summary> /// Get all lines by workcenter id /// </summary> /// <param name="WorkCenterID">Workcenter ID</param> /// <returns></returns> public void GetLineByWorkCenterID(string WorkCenterID) { var dt = new DAL().GetLineListByWorkCenterID(WorkCenterID); var json = JsonHelper.ConvertDataTable(dt); Response.Write(json); Response.End(); } } }
using System; using System.Collections.Generic; using System.Web; using System.Data; namespace Test { public class DAL { /// <summary> /// Get all factory /// </summary> /// <returns></returns> public DataTable GetAllFactoryList() { string strSql = "SELECT FactoryID,FactoryName FROM dbo.tb_Factory (NOLOCK) ORDER BY 2 "; return new DataAccess().GetDataTable(strSql); } /// <summary> /// Get all workcenter by factory id /// </summary> /// <param name="FactoryID">Factory ID</param> /// <returns></returns> public DataTable GetWorkCenterListByFactoryID(string FactoryID) { string strSql = "SELECT WorkCenterID,WorkCenterName FROM tb_WorkCenter (NOLOCK) WHERE FactoryID='" + FactoryID + "' ORDER BY WorkCenterName"; return new DataAccess().GetDataTable(strSql); } /// <summary> /// Get all lines by workcenter id /// </summary> /// <param name="WorkCenterID">Workcenter ID</param> /// <returns></returns> public DataTable GetLineListByWorkCenterID(string WorkCenterID) { string strSql = " SELECT LineID,LineName FROM tb_Lines (NOLOCK) WHERE WorkCenterID='" + WorkCenterID + "' ORDER BY LineName"; return new DataAccess().GetDataTable(strSql); } } }
最后看一下效果:
版权声明:本文博主原创文章,博客,未经同意不得转载。