EasyUI combox实现联动

很多时候都会用到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的就不写了：

    

    

        

            

                

                    

                        

                            工厂：
                        
                        

                            
                            
                        
                    
                    

                        

                            工作中心：
                        
                        

                            
                            
                        
                    
                    

                        

                            线别：
                        
                        

                            
                            
                        
                    
                    

                        

                            日期:
                        
                        

                            至
                            
                        
                    
                
            
        
    
    

以下是脚本代码，通过JQ来实现combox的onSelect事件，重新创建新的URL，通过这个URL来使目标combox重新加载数据，在API上看到的方法：reload。

下面在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格式
        //*******************************************

        /// 

        /// Get all factory
        /// 
        /// 
        public void GetAllFactory()
        {
            var dt =new DAL().GetAllFactoryList();
            var json = JsonHelper.ConvertDataTable(dt);
            Response.Write(json);
            Response.End();
        }

        /// 

        /// Get all workcenter by factory id
        /// 
        /// Factory ID
        /// 
        public void GetWorkCenterByFactoryID(string FactoryID)
        {
            var dt = new DAL().GetWorkCenterListByFactoryID(FactoryID);
            var json = JsonHelper.ConvertDataTable(dt);
            Response.Write(json);
            Response.End();
        }

        /// 

        /// Get all lines by workcenter id
        /// 
        /// Workcenter ID
        /// 
        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
    {
        /// 

        /// Get all factory
        /// 
        /// 
        public DataTable GetAllFactoryList() 
        {
            string strSql = "SELECT FactoryID,FactoryName FROM dbo.tb_Factory (NOLOCK) ORDER BY 2 ";
            return new DataAccess().GetDataTable(strSql);
        }

        /// 

        /// Get all workcenter by factory id
        /// 
        /// Factory ID
        /// 
        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);
        }

        /// 

        /// Get all lines by workcenter id
        /// 
        /// Workcenter ID
        /// 
        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);
        }
    }
}

最后看一下效果：