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 清空form表单中某种元素的值
Dec 26 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
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
PHP入门速成(2)
2006/10/09 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php短信接口代码
2016/05/13 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python如何给你的程序做性能测试
2020/07/29 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
婚礼主持结束词
2014/03/13 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
地方课程教学计划
2015/01/19 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
导游词之河北邯郸
2019/09/12 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android