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 的联动

这里写图片描述

如图,每次用户选择了国家后,省、市、区要相应更新。这时候可以用到 comboboxonSelect/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: comboboxonSelectonChange 事件不一样,onSelect 事件触发的时候用 getValue 取得的不是valueField 的值。onChange 触发时候获得的才是。
所以如果有时候拿到的不是你想要的值?换一个事件试试吧。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值