基于BootStrap Metronic开发框架经验小结【三】下拉

在上篇基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验。

1、Select2控件介绍

这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https://select2.github.io/examples.html

我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。

1)编辑界面下的省份、城市、所在行政区的级联界面效果,选择省份,会加载对应省份下的城市,选择城市,会继续加载城市下的行政区,从而实现多级关联的下拉列表效果。

2)编辑界面下的多项选择下拉列表

但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。

3)树形列表的下拉列表

有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。

2、Select2控件的实际使用代码分析

1)基础界面代码及操作

使用select2控件,一般是在常规的select控件上,设置一下即可(设置它的class为select2)。

<div> <div> <label>重要级别</label> <div> <select placeholder="重要级别..."></select> </div> </div> </div> <div> <div> <label>认可程度</label> <div> <select placeholder="认可程度..."></select> </div> </div> </div>

如果是固定列表,那么也就是设置它的Option内容即可,如下所示。

<div> <div> <label>吸烟</label> <div> <select type="text" placeholder="吸烟..."> <option>吸烟</option> <option>不吸烟</option> </select> </div> </div> </div>

简单的select2控件初始化代码如下所示。

$(document).ready(function() { $(".js-example-basic-single").select2(); });

一般情况下,如果允许复选多个项目,那么设置multiple="multiple"即可,如下代码所示。

<select multiple="multiple"></select>

2)异步数据绑定操作

一般情况下,我们的select控件的数据,是从数据库里面动态加载的,因此一般是通过Ajax方式获取数据并进行绑定即可。

基于代码可重用性的考虑,我们编写一个公用的JS函数,用来减少绑定操作的代码,提高代码重用性。

//绑定字典内容到指定的Select控件 function BindSelect(ctrlName, url) { var control = $('#' + ctrlName); //设置Select2的处理 control.select2({ allowClear: true, formatResult: formatResult, formatSelection: formatSelection, escapeMarkup: function (m) { return m; } }); //绑定Ajax的内容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data, function (i, item) { control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>"); }); }); }

这样,绑定公用字典模块的数据,也就可以通过下面进一步封装处理即可。

//绑定字典内容到指定的控件 function BindDictItem(ctrlName, dictTypeName) { var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName); BindSelect(ctrlName, url); }

这样我们初始化Select2 控件,并动态绑定对应的字典值或者其他数据,则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作,BindSelect则是根据URL进行数据的获取并绑定,而$("#Province").on("change", function (e) {});这样的函数处理,就是处理选择内容变化的联动操作了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpxzw.html