非常好用的组件,效果如下:
步骤:
- 引入js,css
<link href="3.4/select2.css" rel="stylesheet" />
<script src="3.4/select2.min.js" type="text/javascript"></script>
- 页面预算
注意:新版(4.0+)的绑定标签必须是select元素,3.4绑定select会报错
<tr>
<td>关联需求:</td>
<td colspan="3">
<input id="parentid" name="parentid" style="width: 428px;"></input>
</td>
</tr>
- 加载远程数据及初始化数据
$("#parentid").select2({
placeholder: '输入关键字自动查询...',
allowClear: true,
readonly: true,
ajax: {
url: "loadSelect2Rtms",
dataType: 'json',
delay: 250,
data: function (term, page) {
return {
title: term,
site: $('#site').combobox('getValue')
};
},
results: function (data, page) {
return {
results: data
};
}
},
initSelection : function (element, callback) {
var row = $("#dg").datagrid('getData').rows[element.val()];
var data = null;
if (row && row.parentRtm) {
data = {id: row.parentRtm.id, text: (row.parentRtm.code + ':' + row.parentRtm.title)};
}
callback(data);
}
});
/**/
$("#parentid").select2('val',index);
- 采坑点:js方法中为select2赋默认值。
$("#parentid").select2('val',value);//value 为动态值
解决过程: 主要是对initSelection方法没有理解明白。
要想给select2初始化默认值,那么前提是创建select2时必须有initSelection方法.后面在执行赋值操作时,即$("#parentid").select2('val',value)
时会将value绑定给元素的value属性。initSelection方法第一个参数即为绑定元素的jQuery对象,因此便可以拿到刚才的值,从而进行数据处理并展现。