EasyUI combobox 的使用

来源:互联网 发布:六年级英语软件 编辑:程序博客网 时间:2024/06/05 15:11
  • 获取值与设置值
var val = $('#id').combobox("getValue");   // 获取值$('#id').combobox("setValue", 1);  // 设置值

  • 初始化数据,增加一个“选择所有”的选择并默认选中该选项。
// 初始化人员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 0
原创粉丝点击