report/public/static/js/common/bootstrap-table-object.js

/**
 * 初始化 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;

}());