-
引入js文件
jquery版本1.11.3，bootstrap3.x,第三个文件为本文封装的js
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/bootstrap-table/js/bootstrap-table.min.js"></script>
<script src="/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/bootstrap-3.3.7/js/bootstrap-dialog.min.js"></script>
<script src="/js/bootsrapDialog.dropdownList.js"></script><!--此为自己封装-->-
实现目标
boostrap-dialog相关的的用法就不赘述了，网上有很多文章。
本文主要是实现
1.弹出框中的表格自定义，根据不同的业务场景
2.选中记录，点击确定，实现下拉框一样的功能
-
实现步骤
- 参考官网例子
BootstrapDialog.show({
message: 'Hello world!',
onshow: function(dialogRef){
alert('Dialog is popping up, its message is ' + dialogRef.getMessage());
},
onshown: function(dialogRef){
alert('Dialog is popped up.');
},
onhide: function(dialogRef){
alert('Dialog is popping down, its message is ' + dialogRef.getMessage());
},
onhidden: function(dialogRef){
alert('Dialog is popped down.');
}
});使用message属性和onshown事件实现。
在message属性中定义htmt元素table相关的信息
message: $('<div><table id="choose_table" class="table-list table-condensed"></table></div>'),onshown事件中对table进行初始化，使用boostraptable.js对choose_table进行初始化
buttons热键设置 定义确定和关闭按钮相关事件
-
源代码
bootsrapDialog.dropdownList.js 文件
/**
* 基于BootstrapDialog的下拉列表插件
*/
(function($) {
$.extend({
showChooseSubwindow: function (conf){
BootstrapDialog.show({
title:conf['title']||"请选择",
cssClass: 'workflow-dialog',
message: $('<div><table id="choose_table" class="table-list table-condensed"></table></div>'),
onshow:function(){//打开的事件
if (typeof conf['onshow'] == 'function') {
conf['onshow']();
}
},
onshown:function(){ //打开后呈现给用户的事件
var url = conf['url'];
var columnArr = conf['columnArr'];
var queryParams = conf['queryParams'];
var pagination = conf['pagination']||false;
var configure = {
id: 'choose_table',
url: url,
columns:columnArr
}
var options = {
pagination: pagination,
}
BsTool.initTable(configure, queryParams, options);
},
onhide:function(){ //关闭的时候点击事件
if (typeof conf['onhide'] == 'function') {
conf['onhide']();
}
},
onhidden:function(){ //关闭之后点击事件
if (typeof conf['onhidden'] == 'function') {
conf['onhidden']();
}
},
buttons: [{
label: '确 定',
cssClass: 'btn-primary btn-sm',
action: function (dlg) {
var rows = $('#choose_table').bootstrapTable('getSelections');
if(rows.length == 0){
toastr.warning("请选择一条方案数据！")
return false;
}
conf['confirmFunc'](rows[0]);
dlg.close();
}
}, {
label: '关 闭',
cssClass: 'btn-link btn-sm',
action: function (dlg) {
dlg.close();
}
}]
})
},
planChooseSubwindow :function (conf) {
var setting ={
title :'选择方案',
url :'/plan/selectleafLevelPlanData',
confirmFunc:conf['confirmFunc'],
columnArr : [
{
radio: true
}, {
title: '序号',
align: 'center',
width: 50,
formatter: function (value, row, index) {
return index + 1;
}
}, {
field: 'id',
title: '方案主键id',
visible: false
}, {
field: 'planName',
title: '方案名称',
align: 'center'
},{
field: 'evalType',
title: '考评类型',
align: 'center',
formatter: function (value, row, index) {
if(value == 1){
return '领导人员';
} else if(value == 2){
return '领导班子';
}else if(value == 3){
return '中层人员';
} else {
return "无";
}
}
}
],
queryParams : function (params) {
return {
evalType:conf['evalType']||1
}
}
}
$.showChooseSubwindow(setting);
},
questionnarieChooseSubwindow :function (conf) {
var setting ={
title:'选择题库',
pagination:true,
url :'/questionnaire/listQuestionnaireInfo',
confirmFunc:conf['confirmFunc'],
columnArr : [
{
radio: true
}, {
field: 'orderno',
title: '序号',
align: 'center',
width: 50
}, {
field: 'title',
title: '标题',
align: 'center'
},{
field: 'number',
title: '题目数量',
align: 'center'
}
],
queryParams : function (params) {
return {
pageSize: params.pageSize,
pageNumber: params.pageNumber
}
}
}
$.showChooseSubwindow(setting);
},
});
})(jQuery);本文对业务场景1：方案选择 2：题库选择 两个功能进行了进一步封装，分别为planChooseSubwindow函数和questionnarieChooseSubwindow 函数
shown：对bootstraptable，table组件的初始化也进行了封装，使用官网原生的也可以，在这里不是重点。
url：后台接口访问地址
confirmFunc:确定 事件
-
业务调用代码
$('#btn_questionniare_choose').click(function () {
var conf = {
confirmFunc: function (data) {
//此部分为 确定之后调用的业务代码
var rows = $('#middleTable').bootstrapTable("getAllSelections");
if (rows.length > 0) {
updateMiddlePlan(rows, data.id);
} else {
toastr.warning('请选择需要操作的人员');
}
}
}
$.questionnarieChooseSubwindow(conf);
});-
效果图
题库选择
方案选择
-
其它相关js文件
bootstraptable.js封装，table部分代码
var BsTool = BsTool || {};
BsTool.prototype = (function () {
initTable: function (conf, qp, opt, fn) {
if (!(typeof conf == 'object' && 'id' in conf && 'columns' in conf)) {
console.warn('初始化表格失败');
return;
}
var url = '';
var defaultOption = {
height: '',
width: '',
showFooter: false,
pagination: true,
pageSize: 10,
pageList: [10, 20],
clickToSelect: true,
detailView: false,
striped: true,
singleSelect: false,
}
if (typeof opt == 'object') {
for (var op in opt) {
defaultOption[op] = opt[op];
}
}
if(conf['url']){
url = prefix + conf['url'];
}
return $('#' + conf['id']).bootstrapTable({
url: url,
method: conf['method']||'post',
contentType: conf['contentType']|| "application/x-www-form-urlencoded; charset=UTF-8",
toolbar: '#' + conf['toolbar'],
columns: conf['columns'],
cache: false,
showFooter: conf['showFooter'],
checkboxHeader: true,
clickToSelect: defaultOption['clickToSelect'],
queryParamsType: '',
height: defaultOption['height'],
width: defaultOption['width'],
sidePagination: 'server',
queryParams: qp,
pagination: defaultOption['pagination'],
paginationPreText: '上一页',
paginationNextText: '下一页',
pageSize: defaultOption['pageSize'],
pageList: defaultOption['pageList'],
detailView: defaultOption['detailView'],
striped: defaultOption['striped'],
singleSelect: defaultOption['singleSelect'],
showJumpto: true,
showExport: conf['showExport'],
rowStyle: conf['rowStyle'],
exportDataType: conf['exportDataType'],
ajaxOptions:{crossDomain: true,xhrFields: {withCredentials: true}},
onLoadSuccess: function (data) {
if (typeof fn == 'function') {
fn(data);
}
}
});
},
})();
BsTool = BsTool.prototype;