最近項目做了一些修改需要使用復選框，因為之前的單選框都是用的selelct2，本來以為直接添加multiple屬性就可以了，但是數據庫太大了，有將近2W條，所以做了一些優化，具體如下：
數據源的綁定：
1.加載控件
<input class="form-control input-sm f-Personliable" id="Personliable" multiple="multiple" aria-hidden="true" />
2.數據源綁定JS
var select = $("#Personliable");
select.select2({
allowClear: false, //是否清空
tags: true, //數據源支持復選
placeholder: "支持姓名和工號查詢",
minimumInputLength: 1, //輸入幾位參數字符觸發Query查詢數據源
query: function (query) {
var data = { results: [] };
apiAjax.post({
action: "EmployeeData.GetInUserList",
data: { keyword: query.term }
}, function (res) {
if (res.Success) {
data.results = res.Data;
} else {
}
}, null, false);
query.callback(data);
},
});
3.以上兩步完成之后可以進行復選框的數據篩選，具體效果如下：
圖中負責人后面的復選框就是我們需要的，在單元格中輸入人員名稱或者工號就可以自動篩選了（這里不做具體的展現）。
當要對這個數據源進行修改時又遇到了另一個頭疼的問題，無論怎么賦值都無法顯示默認加載的數據，網上搜了一些資料，整了半天終於整出來了，具體細節如下：
1.在控件數據源加載時加入如下js代碼
initSelection: function (element, callback) {
var data = obj;
callback(data);
},
(參數obj是一個json數據源字符串)
加了這段以后你以為完了嗎？哈哈。。。
還沒呢！
2.數據加載時要傳json數據源到控件綁定的js里，同時也要講json賦值給該控件，2者缺一不可，代碼如下：
for (var i = 0; i < res.Data.length; i++) {
///將數據源生成json格式
appendReadHtml += "{ id: " + res.Data[i].UserID + ", text: '" + res.Data[i].UserName + "(" + res.Data[i].UserID + ")'},";
}
if (appendReadHtml != "") {
appendReadHtml = "[" + appendReadHtml.substring(0, appendReadHtml.length - 1) + "]";
///json格式化
appendReadHtml = eval("(" + appendReadHtml + ")");
///控件加載時將數據源引入
LoadData(appendReadHtml);
///"initSelection"這個方法只有在賦值時才能被觸發
$("#Personliable").select2("val", appendReadHtml);
}
else {
///默認沒有數據源直接空加載就可以了。
LoadData();
}
具體效果如下：