EasyUI combobox下拉多选框的实现
combobox实现下拉列表多选
·
combobox实现下拉列表多选, 效果如下
一、先定义一个easyui-combobox
<td>
目标人群:
</td>
<td>
<input id="cmbAgeType" class="easyui-combobox" name="dept" />
</td>
二、在javascript中写入如下代码
$('#cmbAgeType').combobox({
url: 'AjaxHandler/RadioCommon.ashx?action=bindAgeType',//对应的ashx页面的数据源
method: 'get',
valueField: 'CID',//绑定字段ID
textField: 'CNAME',绑定字段Name
panelHeight: 'auto',//自适应
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);
}
});
更多推荐
已为社区贡献1条内容
所有评论(0)