码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI combox实现联动

时间:2015-09-13 14:40:23      阅读:344      评论:0      收藏:0      [点我收藏+]

标签:

多的时间将被用于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);
        }
    }
}


最后看一下效果:

技术分享

技术分享技术分享

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

EasyUI combox实现联动

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4804914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!