easyui前端接收list转为复选下拉框

原创于 2020-12-16 14:02:14 发布 · 356 阅读

CC 4.0 BY-SA版权

文章标签：

这段代码展示了如何在EasyUI前端将列表转换为带有复选框的下拉框。通过设置`formatter`函数，每个选项被格式化为一个复选框，同时在`onShowPanel`、`onLoadSuccess`、`onSelect`和`onUnselect`事件中处理复选框的选中状态，确保选中项与下拉框值的一致性。

easyui前端接收list转为复选下拉框

代码如下

	$('#state').combobox({
        url: '地址',
        valueField:'id',
        textField:'text',
        label: '状态 :',
        labelWidth:90,
        multiple: true,
        formatter: function (row) {
            var opts = $(this).combobox('options');
            return '<input type="checkbox" class="combobox-checkbox" id="' + row[opts.valueField] +     '">' + row[opts.textField]},onShowPanel: function () {
            var opts = $(this).combobox('options');
            var target = this;
            var values = $(target).combobox('getValues');
            $.map(values, function (value) {
                var el = opts.finder.getEl(target, value);
                el.find('input.combobox-checkbox')._propAttr('checked', true);
            })
        },
        onLoadSuccess: function () {
            var opts = $(this).combobox('options');
            var target = this;
            var values = $(target).combobox('getValues');
            $.map(values, function (value) {
                var el = opts.finder.getEl(target, value);
                el.find('input.combobox-checkbox')._propAttr('checked', true);
            })
        },
        onSelect: function (row) {
            var opts = $(this).combobox('options');
            var el = opts.finder.getEl(this, row[opts.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', true);
        },
        onUnselect: function (row) {
            var opts = $(this).combobox('options');
            var el = opts.finder.getEl(this, row[opts.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', false);
        }
    });