<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/static/easyui/css/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/static/easyui/css/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/static/easyui/css/common.css" />
<script type="text/javascript" src="/static/easyui/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/easyui/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/easyui/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>Load Dynamic ComboBox Data</h2>
<p>Drop down the panel and select multiple items.</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="language" name="language" style="width: 150px;" class="easyui-combobox" >
</div>
</div>
<script type="text/javascript">
var json =[{
"id":1,
"text":"Java",
"selected":true,
"desc":"Write once, run anywhere"
},{
"id":2,
"text":"C#",
"selected":true,
"desc":"One of the programming languages designed for the Common Language Infrastructure"
},{
"id":3,
"text":"Ruby",
"selected":true,
"desc":"A dynamic, reflective, general-purpose object-oriented programming language"
},{
"id":4,
"text":"Perl",
"desc":"A high-level, general-purpose, interpreted, dynamic programming language"
},{
"id":5,
"text":"Basic",
"desc":"A family of general-purpose, high-level programming languages"
}];
var language_Id= $(".select-language");
$(function(){
initCombobox('language');
});
//參數：id 控件id
function initCombobox(id){
var value = "";
//加載下拉框複選框
$('#'+id).combobox({
data:json,
panelHeight:200,//設置爲固定高度，combobox出現豎直滾動條
valueField:'id',
textField:'text',
multiple:true,
//formatter方法就是實現了在每個下拉選項前面增加checkbox框的方法
formatter: function (row) {
var opts = $(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onLoadSuccess: function () { //下拉框數據加載成功調用
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');//獲取選中的值的values
$.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');
//獲取選中的值的values
$("#"+id).val($(this).combobox('getValues'));
//設置選中值所對應的複選框爲選中狀態
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');
//獲取選中的值的values
$("#"+id).val($(this).combobox('getValues'));
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', false);
}
});
}
</script>
</body>
</html>