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

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

1. HTML代码

rush:xhtml;"> 性别：

2.显示

3.js代码

rush: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',url: url,editable: true,//不可编辑，只能选择
value: '全部'
});
}

4.Json数据

rush:java;"> { { "Code": "1","Name": "男" },{ "Code": "0","Name": "女" } }

5.设置默认选项和取值

rush:js;"> //设置默认选项 $('#gender').comboBox('select',1); //取值 var gender = $('#gender').comboBox('getValue');

6.年份小例子

rush:js;"> ///////////////////////////入学年份/////////////////////////////////////// $('#EduStartYear').comboBox({ valueField: 'Value',//不可编辑，只能选择 }); 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);//设置默认值为今年

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/js/42999.html