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="">
版权声明：本文博主原创文章，博客，未经同意不得转载。
EasyUI combox实现联动的更多相关文章
- 【Asp.Net使用EasyUI】EasyUI combox实现联动
很多时候都会用到combox的联动效果,选择上一个combox的值就自动带出这个值对应的其它信息,比如省市联动,最近我也刚好遇到了类似的要求,是用EasyUI combobox 控件完成的,如果是A ...
- vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)
vs2013+MVC3.0+EasyUI的ComboBox联动使用(二) 简单介绍:在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用. 载入Comb ...
- easyUI combox静态动态联动
easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox&quo ...
- easyUI下拉列表三级联动
首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...
- C/C++ Qt 数据库与ComBox多级联动
Qt中的SQL数据库组件可以与ComBox组件形成多级联动效果,在日常开发中多级联动效果应用非常广泛,例如当我们选择指定用户时,我们让其在另一个ComBox组件中列举出该用户所维护的主机列表,又或者当 ...
- jquery easyui combox实用方法记录
// combogrid刷新 $(“#cc").combogrid('grid').datagrid('load'); // combogrid设置默认选中哪一行 $('#cc').comb ...
- jquery easyui combox不能编辑只能选择
$('#tts').combobox({ editable:false });
- easyui combox 手动添加项
$('#comzwcf').combobox({ valueField: 'id', textField: 'text', }); $.ajax({ url: '/Provider/HandlerIr ...
- easyui combox 随便不存在的值，清空
onHidePanel: function () { var valueField = $(this).combobox("options").valueField; var va ...
随机推荐
- Sublime Text 3 搭建Go开发环境(Windows)
一.安装GO 如果已经环境已经配置好,这一步省略.... 1.下载并安装go sdk 2.配置环境变量 (1). 新建 变量名:GOBIN 变量值 :F:\Go\bin (2). 新建 变量名:GOA ...
- 在Sql中使用Try Catch
原文:在Sql中使用Try Catch 今天在写sql中出现了!我想在sql使用trycatch吧! 哎..但是语法又记不住了! 那就清楚我们的google大师吧! 嘿,网上关于在sql中使用Try ...
- js怎样推断一个对象{}是否为空对象，没有不论什么属性
js怎样推断一个对象{}是否为空对象,没有不论什么属性 前段时间用js写了一个相似"angularjs"用于数据绑定的东西,功能是比較简单了, 通常应该传进来的是一个ArrayLi ...
- Redis被攻击
记一次Redis被攻击的事件 最近几个月非常忙,所以很少有时间写博客,这几天终于闲了一些,于是就在整理平时的一些笔记.恰好这几天Redis服务器发生了问题,就记录一下. 我司有两款分别是2B和2C ...
- W3C DOM 事件模型(简述)
1.事件模型 由于事件捕获与冒泡模型都有其长处和解释,DOM标准支持捕获型与冒泡型,能够说是它们两者的结合体.它能够在一个DOM元素上绑定多个事件处理器,而且在处理函数内部,thiskeyword仍然 ...
- WPF学习（11）2D绘图
本篇我们来学习WPF的绘图,在2D绘图中主要有这么几个重要的类:Drawing.Visual和Shape,顺便讲下Brush和BitmapEffect. 1 2D绘图 1.1Drawing类 Draw ...
- [SQL Server优化]善用系统监视器，确定系统瓶颈
原文:[SQL Server优化]善用系统监视器,确定系统瓶颈 来自: http://hi.baidu.com/solorez/blog/item/f82038fa0e71b78d9e51468c.h ...
- MVC — 初步理解IIS工作流程
声明:本文只是自己的总结和积累.IIS7.x 目录 IIS流程及组成部分 ASP.NET流程及组成部分 IIS与ASP.NET MVC 一.IIS流程及组成部分 1.Http.SYS:负责监听HTT ...
- java NIO中的Reactor相关知识汇总 （转）
一.引子 nio是java的IO框架里边十分重要的一部分内容,其最核心的就是提供了非阻塞IO的处理方式,最典型的应用场景就是处理网络连接.很多同学提起nio都能说起一二,但是细究其背后的原理.思想往往 ...
- 探测器 C++ Singleton（辛格尔顿）
一.静态模式不是单一的情况下, 刚开始学习的人可能误, 误以为所有的成员变量和成员方法用于 static , 就是单例模式了: class Singleton { public: /* sta ...