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 面向对象之重载
May 04 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
javascript实现列表切换效果
May 02 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
如何使用CocosCreator对象池
Apr 14 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
关于文本留言本的分页代码
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JS常用知识点整理
2017/01/21 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现梯度下降算法
2020/03/24 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
教师自荐信范文
2013/12/09 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
小学体育教学随笔
2015/08/14 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书