JQueryEasyUI框架下的combobox的取值和绑定的方法


Posted in Javascript onJanuary 22, 2017

最近做的项目涉及到JQueryEasyUI框架的使用,EasyUI是什么?网上解释说它是来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!从这句话的理解来说,我认为它是一种JavaScript框架。

对于最近的使用中,给我的感觉就是,借用官网JqueryEasyUI上的一句话,EasyUI是基于jQuery用户界面插件的集合,我把它理解成一种插件,不知道有没有问题。而使用easyui,不需要写很多的javascript代码,只需在定义的用户界面写一些HTML标记,完成HTML5网页的框架,所以说在这个框架里面是没有服务器控件。没有ruant=“server”。其功能强大,使用方便。

下面就说说EasyUI框架下的combobox,在使用的时候获取值和绑定值得方法。

在前台,我们通常这么写:

<select class="easyui-combobox" id ="cmbName" name="name" ></select>

在牛腩新闻发布系统中和北大青鸟中都讲到了控件中数据绑定的问题,那在这里能不能也采用那种方法?牛腩新闻发布系统和北大青鸟中讲的控件都是服务器控件,但这里不是服务器控件,我们又该怎么绑定值和获取值?

绑定值:(方法不止这一个)

可以将这个控件转为服务器控件。加入runat=“server”,将其装为服务器控件。剩下就同牛腩新闻发布系统和北大青鸟里面讲的服务器控件一样,绑定值。

<select class="easyui-combobox" id ="cmbName"  runat="server" datatextfield ="AdminName" datavaluefield ="AdminID" name="name" style="width: 150px;" ></select>

后台:

protected void Page_Load(object sender, EventArgs e) 
    { 
        noticeInfoBLL Bnotice = new noticeInfoBLL(); 
        DataSet ds = new DataSet(); 
        ds = Bnotice.GetAllList(); 
        DataTable dt = ds.Tables[0]; 
        cmbName.DataSource =dt; 
        cmbName.DataTextField = "AdminName"; 
        cmbName.DataValueField = "AdminID"; 
        cmbName.DataBind(); 
    }

绑定值之后,怎么获取里面的值呢?

获取值:

var adminname=$("#state").combobox("getText");
 //这是获取combobox中选择的内容,例如上面绑定的“AdminName” 
var adminid=$("#state").combobox("getValue"); 
//这是获取combobox选择的值,例如上面绑定的“AdminID”

comboboxc绑定值出现重复:

在combobox绑定值的时候,我还遇到这么一个问题,在返回的数据中,有很多条,因为我是往combobox中绑定的名字,名字不能重复,但是我从数据库中返回的数据却是这样的:

JQueryEasyUI框架下的combobox的取值和绑定的方法

那么怎么解决这个问题呢?

有两个解决方法:

第一:修改查询语句,使用SQL SELECT DISTINCT 语句

第二:在后台绑定数据时也可以像这样绑定:

protected void Page_Load(object sender, EventArgs e) 
    { 
      //if (!Page.IsPostBack) 
      //if (Session["userid"] != null && Session["postid"] != null) 
       
        noticeInfoBLL Bnotice = new noticeInfoBLL(); 
        DataSet ds = new DataSet(); 
        ds = Bnotice.GetAllList(); 
        DataTable dt = ds.Tables[0]; 
       //去重复的AdminName和AdminID 
        DataView dv=dt.DefaultView ; 
        cmbName.DataSource = dv.ToTable(true, "AdminName","AdminId"); 
        cmbName.DataTextField = "AdminName"; 
        cmbName.DataValueField = "AdminID"; 
        cmbName.DataBind(); 
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 #Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 #Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 #Javascript
You might like
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
简单的代码实现jquery定时器
2013/11/17 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
django之session与分页(实例讲解)
2017/11/13 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Django实现文件上传下载功能
2019/10/06 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
CSS3实现时间轴效果
2016/07/11 HTML / CSS
应用化学专业职业生涯规划书
2014/01/22 职场文书
音乐专业自荐信
2014/02/07 职场文书
长江三峡导游词
2015/01/31 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis