多的时间将被用于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="">

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

EasyUI combox实现联动的更多相关文章

  1. 【Asp.Net使用EasyUI】EasyUI combox实现联动

    很多时候都会用到combox的联动效果,选择上一个combox的值就自动带出这个值对应的其它信息,比如省市联动,最近我也刚好遇到了类似的要求,是用EasyUI  combobox 控件完成的,如果是A ...

  2. vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)

     vs2013+MVC3.0+EasyUI的ComboBox联动使用(二) 简单介绍:在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用. 载入Comb ...

  3. easyUI combox静态动态联动

    easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox&quo ...

  4. easyUI下拉列表三级联动

    首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...

  5. C/C++ Qt 数据库与ComBox多级联动

    Qt中的SQL数据库组件可以与ComBox组件形成多级联动效果,在日常开发中多级联动效果应用非常广泛,例如当我们选择指定用户时,我们让其在另一个ComBox组件中列举出该用户所维护的主机列表,又或者当 ...

  6. jquery easyui combox实用方法记录

    // combogrid刷新 $(“#cc").combogrid('grid').datagrid('load'); // combogrid设置默认选中哪一行 $('#cc').comb ...

  7. jquery easyui combox不能编辑只能选择

    $('#tts').combobox({ editable:false });

  8. easyui combox 手动添加项

    $('#comzwcf').combobox({ valueField: 'id', textField: 'text', }); $.ajax({ url: '/Provider/HandlerIr ...

  9. easyui combox 随便不存在的值，清空

    onHidePanel: function () { var valueField = $(this).combobox("options").valueField; var va ...

随机推荐

  1. 调整CentOS的文字登陆界面的分辨率

    通过文字界面登陆到系统,切换到root权限. 用vi打开  /boot/grub/menu.lst 文件  ,因为menu.lst是grub.conf文件的快捷方式,终于打开的还是grub.conf文 ...

  2. Linux互斥和同步应用程序（四）：posix互斥信号和同步

           [版权声明:尊重原创.转载请保留源:blog.csdn.net/shallnet 要么 .../gentleliu,文章仅供学习交流,请勿用于商业用途]          在前面讲共享内 ...

  3. Cocos2d-X 使用CCTableView创建滚动视图

    CCTableView和CCScrollView如创建滚动视图,CCTableView该函数将是更,制造更多麻烦 实例1:使用CCTableView创建滚动视图 首先创建一个TableView类 Ta ...

  4. linux 下安装mysql

    看以下这篇文章就够了   http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html 查看有没有安装过:       ...

  5. POJ 1659 Frogs&#39; Neighborhood(度序列组成)

    意甲冠军  中国 依据Havel-Hakimi定理构图即可咯  先把顶点按度数从大到小排序  可图的话  度数大的顶点与它后面的度数个顶点相连肯定是满足的  出现了-1就说明不可图了 #include ...

  6. CSS——（2）与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  7. 单元测试React

    React单元测试——十八般兵器齐上阵,环境构建篇 一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套 ...

  8. Java拾遗(一):浅析Java子类和父类的实例化顺序 及 陷阱

    本文主要介绍Java里经常使用的子类和父类的变量实例化顺序及陷阱,并结合一个Android实例来探讨此问题.日后编程中应尽量避免此陷阱. 首先看以下一段代码: 定义一个虚类Server.java pa ...

  9. myeclipse中间classpath

    myeclipse中间classpath这是一个非常重要的问题 myeclipse是搜索寻找在按照时间其,和myeclipse有一个特殊的文件来保存classpath信息.这也是别人的项目文件的副本时 ...

  10. STL 清除模板容器 clear.h

    #pragma once #include "GeometricMacro.h" #include "GeometricEnum.h" #include &qu ...