EasyUI学习之Combobox下拉列表(1)
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了EasyUI学习之Combobox下拉列表的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了EasyUI Combobox下拉列表的具体代码，供大家参考，具体内容如下
1. html代码
<label>性别：</label> <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" />
2.显示
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);//设置默认值为今年
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。