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 相关文章推荐
用于table内容排序
Jul 21 Javascript
javascript包装对象实例分析
Mar 27 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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中基本符号及使用方法
2010/03/23 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
解析js如何获取css样式
2016/12/11 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Python生成验证码实例
2014/08/21 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
留学推荐信中文范文
2015/03/26 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技