boot Strap Tab -- load 的使用

项目里面使用的是Boot Strap Tab来操作的，搞得我一直很蒙圈，对于我这样的小白来说，有点难以理解，下面谈谈个人理解。

Boot Strap Tab是用来对表格进行操作的，里面提供了一系列的属性和方法，既然是属性，肯定需要有设置属性的地方，所以需要在页面进行初始化的时候，就需要进行设置（设置是需要使用到boot Strap Tab进行属性的设置）。

建议浏览官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

采用的是分隔文件的形式来写的

 var columns = [
       {field: "checked", checkbox: true},
       {field: "num", title: "序号", width: 5, align: "center",     
               formatter:common.formatter.index},
       {field: "id", visible: false},
        {field: "gcdmc", title: "观测点名称", width: 80, align: "center"},
       {field: "gcdbh", title: "观测点编号", width: 80, align: "center"},
       {field: "simpleName", title: "管理单位", width: 80, align: "center"},
       {field: "hdmc", title: "所属航道", width: 80, align: "center"},
       {field: "htmc", title: "所属航段", width: 80, align: "center"},
       {field: "wz", title: "位置", width: 80, align: "center"}
            ];
// common 代表的window
         common.initTable(columns);

/**
         * 初始化bootstrap table
         * @param columns
         * @param params
         */
        initTable: function (columns, params) {
            var args = $.extend({}, {
                id: "btTable",
                columns: columns,
                onlyInfoPagination: false,
                pageSize: pageLogic.initData.pageSize,
                pageList: pageLogic.initData.pageList,
                totalField: pageLogic.initData.totalField,
                checkbox: true
            }, params);
// 将拼接的数据进行初始化
            var btTable = bt.init(args);

            if (!pageLogic.btTable) {
                pageLogic.btTable = btTable;
            }

            return btTable;
        }

初始化代码

;(function (window) {
    var bt = {
        init: function (params) {
            var id = params.id;
            var target = $("#" + id);
            if (!target.length) {
                throw new Error("wrong id, current id = " + id);
            }

            if (!params.columns) {
                throw new Error("id, columns canot be null.");
            }

// 使用BootStrap Tab 进行对页面的初始化
            var defaultParams = {
                loadData: false,
                method: "post",
                cache: false,
                pagination: true,
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 30, 100],
                striped: true,
                showPaginationSwitch: false, //显示或关闭分页的开关
                selectItemName: 'btSelectItem', //checkbox or radio group name
                search: false,
                escape: true, //支持特殊字符转义
                showColumns: false, //勾选显示所有列的下拉框

                responseHandler: function (response) {
                    return response["data"];
                },

                clickToSelect: true, //当选中行时checkbox或者radio自动选中
                height: 0,
                dataField: "result",
                uniqueId: "id",
                totalField: "totalCount",
                onPreBody: function () {
                    pageLogic.pageNo = this.pageNumber - 1;
                    pageLogic.pageSize = this.pageSize;
                }
            };

            //用来将显示的数据进行初始化
            //defaultParams   设置一些配置，params是要显示的具体的元素
            var btTable = target.bootstrapTable($.extend({}, defaultParams, params));

在页面显示得效果

下面介绍数据显示 -- 模拟的数据

json数据

[{
  "Name": "123",
  "ParentName": "111",
  "Level": "111",
  "Desc": "444"
}]

进行数据请求

$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();
    $.get("data.json", function (datas) {
        $('#tb_departments').bootstrapTable("load", datas)
    })
});

上面步骤完成之后就会实现数据的展示

boot Strap Tab -- load 的使用

猜你喜欢