<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./common-static/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./common-static/css/themes/icon.css">
</head>
<body>
<input id="tb" type="text" style="300px">
<script src="./common-static/js/jquery.min.js"></script>
<script src="./common-static/js/jquery.easyui.min.js"></script>
<script src="./common-static/js/easyui-lang-zh_CN.js"></script>
<script>
$('#tb').combobox({
valueField: 'id',
textField: 'text',
data: [{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2",
"selected":true
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}],
multiple:true,
hasDownArrow:true,
editable:false,
separator:' , ',
formatter: function (row) {
var opts = $(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + 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);
}
})
</script>
</body>
</html>