/** * 初始化 BootStrap Table 的封装 * * 约定:toolbar的id为 (bstableId + "Toolbar") * * @author fengshuonan */ (function () { var BSTable = function (bstableId, url, columns) { this.btInstance = null; //jquery和BootStrapTable绑定的对象 this.bstableId = bstableId; this.url = Feng.ctxPath + url; this.method = "post"; this.paginationType = "server"; //默认分页方式是服务器分页,可选项"client" this.toolbarId = bstableId + "Toolbar"; this.columns = columns; // this.height = 665; //默认表格高度665 this.height = 600; this.data = {}; this.singleSelect = true; this.queryParams = {}; // 向后台传递的自定义参数 this.onLoadSuccess = function(){}; this.onDblClickRow = function () {}; this.headerStyle = function(){}; this.detailView = false; this.rowStyle=function () { return { } }; }; BSTable.prototype = { /** * 初始化bootstrap table */ init: function () { var tableId = this.bstableId; var me = this; this.btInstance = $('#' + tableId).bootstrapTable({ contentType: "application/x-www-form-urlencoded", url: this.url, //请求地址 method: this.method, //ajax方式,post还是get ajaxOptions: { //ajax请求的附带参数 data: this.data }, toolbar: "#" + this.toolbarId,//顶部工具条 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: "desc", //排序方式 pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10,20,50,100], //可供选择的每页的行数(*) showJumpto:true, //分页跳转 queryParamsType: 'limit', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort queryParams: function (param) { return $.extend(me.queryParams, param); }, // 向后台传递的自定义参数 sidePagination: this.paginationType, //分页方式:client客户端分页,server服务端分页(*) search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端 strictSearch: true, //设置为 true启用 全匹配搜索,否则为模糊搜索 showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 singleSelect:this.singleSelect, minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 searchOnEnterKey: true, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法 columns: this.columns, //列数组 height: this.height, detailView:this.detailView, icons: { refresh: 'glyphicon-repeat', toggle: 'glyphicon-list-alt', columns: 'glyphicon-list' }, iconSize: 'sm', onLoadSuccess : this.onLoadSuccess, onDblClickRow : this.onDblClickRow, rowStyle:this.rowStyle, headerStyle:this.headerStyle, classes: "table table-bordered table-hover table-sm", onPostBody: function(){ $("td.uitd_showTip").bind("mouseover", function(){ var htm = $(this).html(); if (htm!=null && htm.length>1){ $(this).webuiPopover({content:htm,trigger:'hover'}).webuiPopover('show'); } }); } }); return this; }, /**headerStyle * 向后台传递的自定义参数 * @param param */ setQueryParams: function (param) { this.queryParams = param; }, /** * 设置分页方式:server 或者 client */ setPaginationType: function (type) { this.paginationType = type; }, setOnLoadSuccess: function (fun) { this.onLoadSuccess = fun; }, setOnDblClickRow :function(fun){ this.onDblClickRow = fun; }, setDetailView : function(b){ this.detailView = b; }, setRowStyle:function(fun){ this.rowStyle=fun; }, setHeight : function(h){ this.height = h; }, setSingleSelect:function(b){ this.singleSelect = b; }, /** * 设置ajax post请求时候附带的参数 */ set: function (key, value) { if (typeof key == "object") { for (var i in key) { if (typeof i == "function") continue; this.data[i] = key[i]; } } else { this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value; } return this; }, /** * 设置ajax post请求时候附带的参数 */ setData: function (data) { this.data = data; return this; }, /** * 清空ajax post请求参数 */ clear: function () { this.data = {}; return this; }, setHeaderStyle:function(style){ this.headerStyle = style; }, /** * 刷新 bootstrap 表格 * Refresh the remote server data, * you can set {silent: true} to refresh the data silently, * and set {url: newUrl} to change the url. * To supply query params specific to this request, set {query: {foo: 'bar'}} */ refresh: function (parms) { if (typeof parms != "undefined") { this.btInstance.bootstrapTable('refresh', parms); } else { this.btInstance.bootstrapTable('refresh'); } } }; window.BSTable = BSTable; }());