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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Vuex的初探与实战小结
Nov 26 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 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中strtotime函数使用方法分享
2012/01/10 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
python中使用序列的方法
2015/08/03 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python语言描述随机梯度下降法
2018/01/04 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python通过文本和图片生成词云图
2020/05/21 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
农民入党思想汇报
2014/01/03 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
家长会欢迎词
2015/01/23 职场文书
养成教育工作总结
2015/08/13 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
python中if和elif的区别介绍
2021/11/07 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis
Ruby处理CSV数据方法详解
2022/04/18 Ruby