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 函数调用的对象和方法
Jul 01 Javascript
js类型检查实现代码
Oct 29 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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环境搭建最新方法
2006/09/05 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
javascript window对象属性整理
2009/10/24 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Django使用Celery异步任务队列的使用
2018/03/13 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python生成n个元素的全组合方法
2018/11/13 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
详解python多线程之间的同步(一)
2019/04/03 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
树莓派升级python的具体步骤
2020/07/05 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
大学生工作推荐信范文
2013/12/02 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python