【自然框架】分享 n级联动下拉列表框
特点: 1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。 2、 支持n级。 3、 封装成了服务器控件,所以使用非常简单。 4、 支持在回发的时候保持状态。 5、 支持修改记录的时候设置默认选项。 6、 页面设置比较灵活。 7、 采用DataSet作为数据的容器。
缺点: 1、 由于是把需要的数据一次性写入页面交给客户端,所以在网速比较慢的时候,显示页面需要比较长的时间。
可以改进的地方: 1、 引入json,可以把需要的数据放到单独的js文件里面,这样可以减少带宽的压力。 2、 Ajax,按需所取。每次只加载需要的数据。
在线演示: 使用省、市、区县的数据库进行演示。由于服务器的网速很慢,所以需要等待一下,等页面完全下载完毕之后,才可以使用,否则会出现js脚本错误。页面完全下载完毕之后就没有js脚本错误了。
在线演示:http://demo.naturefw.com/Nonline/other/default.aspx
1、 二级联动的演示 以省、市联动为例演示。提交表单后可以保持状态,可以设置选项。
在线演示直通:http://demo.naturefw.com/Nonline/other/UniteList02.aspx
protected void Page_Load(object sender, EventArgs e)
{
DataAccessLibrary dal = DALFactory.CreateDAL();
string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000')
SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') ";
DataSet ds = dal.ExecuteFillDataSet(sql);
this.lst_Area.DataSource = ds;
this.lst_Area.DataBind();
}
protected void btn_Save_Click(object sender, EventArgs e)
{
//提交表单后,获取联动下拉列表框的选项值
//获取ID
string itemID = this.lst_Area.SelectedValue;
this.txt_Value.Text = itemID;
//获取text
string itemText = this.lst_Area.SelectedText;
this.txt_Value.Text = itemID;
}
protected void btn_SetItemSelect_Click(object sender, EventArgs e)
{
//设置下拉列表框的选项
string itemID = this.txt_SetID.TextTrimNone;
this.lst_Area.SetSelectedValue(itemID);
}
2、 三级联动的演示 以省、市、区县联动为例演示。提交表单后可以保持状态,可以设置选项。
演示直通:http://demo.naturefw.com/Nonline/other/UniteList03.aspx
(服务器的网速有点慢,网页又有点大,所以需要一点时间下载。)
protected void Page_Load(object sender, EventArgs e)
{
DataAccessLibrary dal = DALFactory.CreateDAL();
string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000')
SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000')
SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode NOT LIKE '__0000') AND (AreaCode NOT LIKE '____00') ";
DataSet ds = dal.ExecuteFillDataSet(sql);
this.lst_Area.DataSource = ds;
this.lst_Area.DataBind();
}
与二级联动的代码相对比,只是SQL语句的地方不同,即多了一条SQL语句。其他的都是一样的。同理,如果是四级的,那么就在多一条SQL语句。
n级联动,那么就需要n条SQL语句。
3、 修改记录演示 一般在修改记录的时候,需要根据记录里的信息设置列表框的选项,这里演示了这种功能。
演示直通:http://demo.naturefw.com/Nonline/other/UniteListUpdate.aspx
增加下面这样的代码即可。
if (!Page.IsPostBack)
{
//6,568,572 是“辽宁省,抚顺市,望花区”对于的ID
//实际项目中,是从数据库里获取,然后设置,这里只是一个实例
this.lst_Area.SetSelectedValue("6,568,572");
}
4、 页面修饰演示 您看了上面的演示,可呢会觉得几个下拉列表框挨在一起太难看了,这里演示如何来做修饰。这个可以在下拉列表框的前面,加上一些修饰。
演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML.aspx
protected virtual void SetHTML()
{
//一行里,下拉列表框前面加说明的方法
string[] html = new string[6];
html[0] = "省份:";
html[2] = "城市:";
html[4] = "区/县:";
this.lst_Area.ListHTML = html;
}
5、 Table形式的表单 在表单里,如果是table形式的话,一行里只想显示一个列表框,那么要如何设置呢?
演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML_table.aspx
省份、城市、区县各占一行的形式。
protected override void SetHTML()
{
//多行表格的方法
string[] html = new string[6];
html[0] = "";
html[1] = "</td></tr>";
html[2] = "<tr><td align="right">城市:</td><td>";
html[3] = "</td></tr>";
html[4] = "<tr><td align="right">区/县:</td><td>";
this.lst_Area.ListHTML = html;
}
6、 Div形式的表单 在表单里,如果是div形式,一行里只想显示一个列表框,那么又要如何设置呢? 演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML_div.aspx
省份、城市、区县各占一行的形式。
protected override void SetHTML()
{
//多行表格的方法
string[] html = new string[6];
html[0] = "";
html[1] = "</div>";
html[2] = "<div class="formLeft">城市:</div><div class="formRight">";
html[3] = "</div>";
html[4] = "<div class="formLeft">区/县:</div><div class="formRight">";
this.lst_Area.ListHTML = html;
}
注意:
由于控件自身并没有保存数据,所以每次访问的时候,都需要设置DataSource 属性,并且需要绑定(DataBind)。这一点和一般的服务器控件不一样。
设置选项的时候,需要在 if (!Page.IsPostBack) 内设置,否则无法得到用户的选择。
源码下载:http://www.naturefw.com/down/List1.aspx
- oracle工具集初探(r4笔记第8天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(二)Log4j讲解与整合
- 京东JData算法大赛-高潜用户购买意向预测(github源码)
- 巧用linux命令做图片下载器(r4笔记第7天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(四)单元测试实例
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(五)结合MockMvc进行服务端的单元测试
- 关于order by中的数据排序(r4笔记第6天)
- 深度学习CTPN+CRNN模型实现图片内文字的定位与识别(OCR)
- Markdown语法讲解及MWeb使用教程
- 通过Linu命令实现屏幕录制和回放(r4笔记第5天)
- 用keras对国产剧评论文本的情感进行预测
- python常用可视化技巧
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(六)maven整合SSM
- 通过java程序抽取日志中的sql语句(r4笔记第4天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JVM学习第一天(虚拟机的前世今生与与Java的内存区域)
- Android进阶:Binder那么弱怎么面大厂?
- Mybatis源码学习第七天(PageHelper分析)
- 【小程序】728- 小程序如何生成海报分享朋友圈
- Mybatis源码学习第七天(插件源码分析)
- Mybatis源码学习第七天(插件开发原理)
- Mybatis源码学习第六天(核心流程分析)之Executor分析(补充)
- 无法用排他锁锁定该数据库,以执行该操作。 (Microsoft SQL Server,错误: 5030)
- Spring security OAuth2.0认证授权学习第四天(SpringBoot集成)
- php hash算法类
- Spring security OAuth2.0认证授权学习第三天(认证流程)
- uni-app搜索历史记录功能实现
- [903]linux文件删除后磁盘空间没有释放
- Spring如何实现AOP,请不要再说cglib了!
- Redis安装问题解决方案