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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
JS 继承实例分析
Nov 04 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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性能优化准备篇图解PEAR安装
2011/12/05 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Python实现二维有序数组查找的方法
2016/04/27 Python
python实现FTP服务器服务的方法
2017/04/11 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python numpy 反转 reverse示例
2019/12/04 Python
Numpy之reshape()使用详解
2019/12/26 Python
了解一下python内建模块collections
2020/09/07 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
本科应届生求职信
2014/08/05 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
网络管理员岗位职责
2015/02/12 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
小学体育课教学反思
2016/02/16 职场文书
python爬虫selenium模块详解
2021/03/30 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers