EasyUI combobox 的使用
- 获取值与设置值
var val = $('#id').combobox("getValue"); // 获取值
$('#id').combobox("setValue", 1); // 设置值
- 禁用/启用
combobox
// 禁用
$("#id").combobox({ disabled: true });
$("#id").combobox('disable');
// 启用
$("#id").combobox({ disabled: false });
$("#id").combobox('enable');
- 禁止编辑,只能从下拉框里面选值
$('#id').combobox({
url:url,
valueField:'id',
textField:'text',
editable:false // 禁止编辑
});
- 初始化数据,增加一个“选择所有”的选择并默认选中该选项。
// 初始化人员
function initEmployee() {
$.get('/api/Employee', function (returnData) {
// 添加一个“选择所有”的选项
returnData.unshift({ "Name": "--选择所有--", "EmployeeID": -1 });
$("#queryEmployee").combobox({
valueField: 'EmployeeID',
textField: 'Name',
data: returnData,
// 设置默认选中“选择所有”选项
onLoadSuccess: function () {
$(this).combobox('setValue', -1);
},
onChange: function () {
Attendance.query();
}
});
});
}
PS:返回的 returnData
是个数组,有两种思路。
一是后台返回数据的时候就添加上这个“选择所有”,第二个是在前端添加。
因为 returnData
是个数组,因此可以用 Array
对象的 unshift
(添加到数组开头) 和 push
(添加到数组末尾) 方法来添加数据。
个人更推荐第二种做法。
- 多个
combobox
的联动
如图,每次用户选择了国家后,省、市、区要相应更新。这时候可以用到 combobox
的 onSelect/onChange
事件。
function initCountry() {
$('#Country').combobox({
url: '/api/Company/InitCountry',
valueField: 'CountryID',
textField: 'CountryName',
onSelect: function() {
var countryId = $('#Country').combobox("getValue");
initProvince(countryId); // 更新省份下拉框的值
}
});
}
function initProvince(countryId) {
// 清空省、市、区下拉框已经设置的数据
$("#Province").combobox("clear");
$("#City").combobox("clear");
$("#District").combobox("clear");
$('#Province').combobox({
url: '/api/Company/InitProvince?countryId=' + countryId,
valueField: 'ProvinceID',
textField: 'ProvinceName',
onSelect: function() {
var provinceId = $('#Province').combobox('getValue');
initCity(provinceId);
}
});
}
PS: combobox
的 onSelect
与 onChange
事件不一样,onSelect
事件触发的时候用 getValue
取得的不是valueField
的值。onChange
触发时候获得的才是。
所以如果有时候拿到的不是你想要的值?换一个事件试试吧。