bootStrap table使用

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

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
            }]
        });
    }

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 初始化表格 刷新表格 表格列数据居中 设置高度 表格列中添加button按钮及事件如初始化表格最后一列 field...
    simplehu阅读 2,316评论 0 1
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,749评论 0 15
  • 表格参数: 列参数: 事件: 方法:
    Air丹阅读 19,794评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,136评论 19 139
  • text
    CSK的自留地阅读 146评论 0 0

友情链接更多精彩内容