bootStrap table使用

作者: As大大 | 来源:发表于2017-07-06 11:59 被阅读0次

// 设置最后一个操作字段里面的方法...

window.actionEvents = {
    'click #id名': function (e, value, row, index) {
        fn(row);
    }
};

function refresh某某表() {
    var resultArr = [];
    get某某数据();

    function get某某数据() {
        $.ajax({
            type: "GET",                                   // 请求类型
            url: urlPrefix + "地址",                       // 请求地址
            async: false,                                  // 是否异步  false为同步 
            dataType: "json",                              // 返回数据类型
            xhrFields: {                                   // 设置跨域请求
                withCredentials: true
            },
            crossDomain: true,                             // 设置跨域请求
            success: function (data) {                     // 接受到数据
                    bindDOM(data);
            }
        });
    }

    function bindDOM(records) {
        $('#theTable').html('<table id="addUseRecordTable" class="table table-bordered table-hover"></table>');    // 把之前的html清空
        $('#addUseRecordTable').removeData();                                                                      //  把之前的数据清空
        $('#addUseRecordTable').bootstrapTable({                                                                   // 重新渲染
            striped: false, //是否显示行间隔色
            cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: false, //是否显示分页(*)
            sortable: false, //排序方式
            sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1, //初始化加载第一页,默认第一页
            pageSize: 5, //每页的记录行数(*)
            pageList: [5, 10, 15, 20], //可供选择的每页的行数(*)
            search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: false,
            showHeader: true,
            showColumns: false, //是否显示所有的列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            uniqueId: "sparePartId", //每一行的唯一标识,一般为主键列
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            data: records,
            columns: [{
                field: 'sparePartId',
                title: '编号',

            }, {
                field: 'typeName',
                title: '类型',
            }, {
                field: 'name',
                title: '名称',
            }, {
                field: 'specification',
                title: '型号'
            }, {
                field: 'totalInventory',
                title: '库存'
            }, {
                field: 'operation',
                title: '操作',
                formatter: operationUseFormatter,
                events: actionEvents
            }]
        });
    }

}

相关文章

网友评论

    本文标题:bootStrap table使用

    本文链接:https://www.haomeiwen.com/subject/zhuchxtx.html