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);
        }
    }
}

最后看一下效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnBlbmcwMTE4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

版权声明：本文博主原创文章，博客，未经同意不得转载。