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 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 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 addslashes 函数详细分析说明
2009/06/23 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
利用python发送和接收邮件
2016/09/27 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
七一党建活动方案
2014/01/28 职场文书
应届毕业生自荐书
2014/06/18 职场文书
班组拓展活动方案
2014/08/14 职场文书
初中学习计划书范文
2014/09/15 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
公司内部升职自荐信
2015/03/27 职场文书
企业百日安全活动总结
2015/05/07 职场文书
环保建议书范文
2015/09/14 职场文书
python中的被动信息搜集
2021/04/29 Python
解决Go gorm踩过的坑
2021/04/30 Golang
Python re.sub 反向引用的实现
2021/07/07 Python