EasyUI学习之Combobox下拉列表(1)


Posted in Javascript onDecember 29, 2016

本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下

1. html代码

<label>性别:</label>
<input class="easyui-combobox" style="width: 100px;" type="text" id="gender" />

2.显示

EasyUI学习之Combobox下拉列表(1)

3.js代码

//以下的方式可以解决浏览器汉字乱码问题
/********************1.加载本地数据*******************/
// 页面加载后显示表数据
$(function() {
 var queryData = {};// 可添加一些预设条件
 InitGrid(queryData);// 初始化Datagrid表格数据
 InitDictItem(); // 初始化字典信息
});

// 初始化字典信息
function InitDictItem() {
 // 性别
 BindDictGender('gender');
}

// 绑定性别/男:1;女:2;全部:0
function BindDictGender(comboid) {
 // 操作类型 全部 男 女
 // data = [{ "Name": "\u5168\u90e8", "Value": 0 }, { "Name": "\u7537",
 // "Value": 1 }, { "Name": "\u5973", "Value": 2 }];
 data = [ {
  "Name" : "\u7537",//男
  "Value" : 1
 }, {
  "Name" : "\u5973",//女
  "Value" : 0
 } ];
 $('#' + comboid).combobox({
  valueField : 'Value',
  textField : 'Name',
  panelHeight : 'auto',
  required : true,
  editable : false,// 不可编辑,只能选择
  data : data
 });
 $('#' + comboid).combobox('select', "1");
}

/********************2.加载数据库数据*******************/
//绑定字典信息Code,设置默认值为{
//   Code:"";
//   Name:"-请选择-";
//  }
function BindBuildingDictItem(comboid, catlog) {
 $.ajax({
  type: 'post',
  url: '/Common/GetComboBoxValue',//访问路径
  dataType: 'json',
  data: { name: catlog },
  success: function (data) {
   data.unshift({ "Name": "\u002d\u8bf7\u9009\u62e9\u002d", "Code": "" });

   $('#' + comboid).combobox({
    valueField: 'Code',
    textField: 'Name',
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑,只能选择
    data: data
   });
   $('#' + comboid).combobox('select', "");
  }
 });
}

/********************3.不解决汉字乱码*******************/
BindDictItem("LiveStatue", '你的url');
//初始化字典信息的控件绑定
function BindDictItem(comboid,url) {
 $('#' + comboid).combobox({
  valueField: 'Code',
  textField: 'Name',
  url: url,
  panelHeight: 'auto',
  required: true,
  editable: true,//不可编辑,只能选择
  value: '全部'
 });
}

4.Json数据

{ {
  "Code": "1",
  "Name": "男"
 }, {
  "Code": "0",
  "Name": "女"
 }
}

5.设置默认选项和取值

//设置默认选项
$('#gender').combobox('select', 1);
//取值
var gender = $('#gender').combobox('getValue');

6.年份小例子

///////////////////////////入学年份///////////////////////////////////////
$('#EduStartYear').combobox({
 valueField: 'Value',
 textField: 'Name',
 panelHeight: 'auto',
 required: true,
 editable: false, //不可编辑,只能选择
});
var data = []; //创建年度数组
var thisYear = new Date().getUTCFullYear(); //今年
var startYear = thisYear - 5; //起始年份

var endYear = thisYear + 5; //结束年份

//数组添加值今年的前后五年
for (var i = 0; i <= 10; i++) {
 data.push({
  "Value": startYear + i,
  "Name": startYear + i
 });
}
$("#EduStartYear").combobox("clear")//下拉框加载数据,设置默认值为今年
    .combobox("loadData", data)
    .combobox("setValue", thisYear); 
//$("#EduStartYear").combobox("setValue", thisYear);//设置默认值为今年

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 #Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 #Javascript
Bootstrap3 内联单选和多选框
Dec 29 #Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 #Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 #Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 #Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP实现简单的计算器
2020/08/28 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
django的ORM模型的实现原理
2019/03/04 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
工厂采购员岗位职责
2014/04/08 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
信仰纪录片观后感
2015/06/08 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis