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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
超级退弹代码
2008/07/07 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Python反射用法实例简析
2017/12/22 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
领导视察欢迎词
2014/01/15 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
书香家庭事迹材料
2014/05/09 职场文书
志愿者事迹材料
2014/12/26 职场文书
租车协议书
2015/01/27 职场文书
学校施工安全责任书
2015/01/29 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书