bootstrapTable封装

(function () {
    var BSTreeTable = function (bstableId, url, columns) {
        this.btInstance = null;					//jquery和bootstrapTreeTable绑定的对象
        this.bstableId = bstableId;
        this.url =url;
        this.method = "post";
        this.columns = columns;
        this.data = {};// ajax的参数
        this.expandColumn = null;// 展开显示的列 
        this.id = 'id';// 选取记录返回的值
        this.code = 'code';// 用于设置父子关系
        this.parentCode = 'pcode';// 用于设置父子关系
        this.expandAll = false;// 是否默认全部展开
        this.toolbarId = bstableId + "Toolbar";
        this.height = 665;						//默认表格高度665
    };

    BSTreeTable.prototype = {
        /**
         * 初始化bootstrap table
         */
        init: function () {
            var tableId = this.bstableId;
            this.btInstance =
                $('#'+tableId).bootstrapTable({
                    id: this.id,// 选取记录返回的值
                    code: this.code,// 用于设置父子关系
                    parentCode: this.parentCode,// 用于设置父子关系
                    rootCodeValue: this.rootCodeValue,//设置根节点code值----可指定根节点,默认为null,"",0,"0"
                    type: this.method, //请求数据的ajax类型
                    url: this.url,   //请求数据的ajax的url
                    ajaxParams: this.data, //请求数据的ajax的data属性
                    expandColumn: this.expandColumn,//在哪一列上面显示展开按钮,从0开始
                    striped: true,   //是否各行渐变色
                    expandAll: this.expandAll,  //是否全部展开
                    columns: this.columns,		//列数组
                    toolbar: "#" + this.toolbarId,//顶部工具条
                    height: this.height,
                    showRefresh: true,  //是否显示刷新  
                    pagination: true,    //是否启用分页
                    // sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                    pageNumber: 1,                       //初始化加载第一页,默认第一页
                    // pageSize: 10,                       //每页的记录行数(*)
                    pageList: [10, 25, 50, 100],
                    showColumns: true,
                    showToggle: true,
                });
            return this;
        },

        /**
         * 设置在哪一列上面显示展开按钮,从0开始
         */
        setExpandColumn: function (expandColumn) {
            this.expandColumn = expandColumn;
        },
        /**
         * 设置记录返回的id值
         */
        setIdField: function (id) {
            this.id = id;
        },
        /**
         * 设置记录分级的字段
         */
        setCodeField: function (code) {
            this.code = code;
        },
        /**
         * 设置记录分级的父级字段
         */
        setParentCodeField: function (parentCode) {
            this.parentCode = parentCode;
        },
        /**
         * 设置根节点code值----可指定根节点,默认为null,"",0,"0"
         */
        setRootCodeValue: function (rootCodeValue) {
            this.rootCodeValue = rootCodeValue;
        },
        /**
         * 设置是否默认全部展开
         */
        setExpandAll: function (expandAll) {
        	this.expandAll = expandAll;
        },
        /**
         * 设置表格高度
         */
        setHeight: function (height) {
        	this.height = height;
        },
        /**
         * 设置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;
        },

        /**
         * 刷新表格
         */
        refresh: function (parms) {
            if (typeof parms != "undefined") {
                this.btInstance.bootstrapTable('refresh', parms.query);// 为了兼容bootstrap-table的写法
            } else {
                this.btInstance.bootstrapTable('refresh');
            }
        }
    };

    window.BSTreeTable = BSTreeTable;

}());

使用方法类似bootstrapTable,只是封装挂在在window下面使用而已

(注意事项:需配合layer)

/**
 * 初始化管理
 */
var Hospital = {
    id: "HospitalTable",    //表格id
    seItem: null,       //选中的条目
    table: null,
    layerIndex: -1
};

/**
 * 初始化表格的列
 */
Hospital.initColumn = function () {
    return [
        {field: 'selectItem', radio: true},
        {title: 'id', field: 'id', visible: true, align: 'center', valign: 'middle'},
        {title: '用户id', field: 'userId', visible: true, align: 'center', valign: 'middle'},
        {title: '标题', field: 'title', visible: true, align: 'center', valign: 'middle'},
        {title: '内容', field: 'body', visible: true, align: 'center', valign: 'middle'},            
    ];
};


/**
 * 检查是否选中
 */
Hospital.check = function () {
    var selected = $('#' + this.id).bootstrapTable('getSelections');
    if(selected.length == 0){
        layer.msg("至少选择一条");
        return false;
    }else{
        Hospital.seItem = selected[0];
        return true;
    }
};

// /**
//  * 点击添加
//  */
Hospital.openAdd = function () {
    var index = layer.open({
        type: 2,
        title: '添加管理',
        area: ['800px', '420px'], //宽高
        fix: false, //不固定
        maxmin: true,
        content: 'add.html'
    })
    this.layerIndex = index;
};

// /**
//  * 修改管理
//  */
Hospital.openEditor = function () {
    if (this.check()) {
        var index = layer.open({
            type: 2,
            title: '修改详情',
            area: ['800px', '420px'], //宽高
            fix: false, //不固定
            maxmin: true,
            content:'update.html?id='+ Hospital.seItem.id
        })
        this.layerIndex = index;
    }
};

// /**
//  * 删除
//  */
Hospital.openDelete = function () {
    if (this.check()) {
        console.log(Hospital.seItem.id)
        layer.confirm('是否要删除该条信息?', {
            btn: ['是','否'], //按钮,
            btn1:function(){
                var ajax = new $ax('./php/delete.php', function (data) {
                    layer.msg('删除成功', {icon: 1})
                    Hospital.table.refresh();
                }, function (data) {
                   // console.log(data)
                });
                ajax.set('id',Hospital.seItem.id);
                ajax.start();
            },
            btn2:function(){
                layer.close();
            }
        })
}
};
// /**
//  * 查询
//  */
Hospital.search = function () {
    var queryData = {};
    queryData['id'] = $("#search").val();
    console.log(queryData)
    Hospital.table.refresh({query: queryData});
};


//初始化表格
$(function () {
    var defaultColunms = Hospital.initColumn();
    var table = new BSTreeTable(Hospital.id, "./php/list.php", defaultColunms);
    Hospital.table = table.init();
})


 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值