Bootstrap table表格初始化表格数据的方法

一、项目说明

　　①此项目是ASP.NET项目，开发语言是C#

　　②bootstrap-table使用需要下载对应的css和js插件

　　③具体详情还需查看api文档

二、前端代码

 <div class="table-responsive">     <table id="table" class="text-nowrap"> </table>  </div>

【说明】 ①text-nowrap设置表格超出不换行而显示滚动条，避免表格列过多

 　　　　②table-responsive：有table-responsive，表格有滚动条没有table-responsive，网页有滚动条

$('#table').bootstrapTable({        url: '/B_Product/GetProductData',     //请求后台的URL（*）        method: 'get',           //请求方式（*）        toolbar: '#toolbar',        //工具按钮用哪个容器        striped: true,           //是否显示行间隔色        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）        pagination: true,          //是否显示分页（*）        sortable: false,           //是否启用排序        sortOrder: "asc",          //排序方式        queryParams: function (pageRequest) {          return pageRequest;        },//        //传递参数（*）        sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）        pageNumber: 1,            //初始化加载第一页，默认第一页        pageSize: 10,            //每页的记录行数（*）        pageList: [10, 25, 50, 100],    //可供选择的每页的行数（*）        search: true,            //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大        strictSearch: true,        showColumns: true,         //是否显示所有的列        showRefresh: true,         //是否显示刷新按钮        minimumCountColumns: 2,       //最少允许的列数        clickToSelect: true,        //是否启用点击选中行        height: tableHeight(),            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度        uniqueId: "Id",           //每一行的唯一标识，一般为主键列        showToggle: false,          //是否显示详细视图和列表视图的切换按钮        cardView: false,          //是否显示详细视图        detailView: false,          //是否显示父子表        showExport: true, //是否显示导出按钮        buttonsAlign: "right", //按钮位置        exportTypes: ['excel'], //导出文件类型        Icons: 'glyphicon-export',        columns: [{          checkbox: true        }, {            field: 'ID',            title: '编号',            visible: false        }, {          field: 'PRODUCTID',          title: '产品编号'        }, {          field: 'PRODUCTNAME',            title: '产品名称'          }, {          field: 'PRODUCTUSER',          title: '货主名称'        }, {          field: 'PRICE',          title: '单价（元）'        }, {          field: 'BARCODERULE',          title: '条码规则'                          }, {            field: 'ISUSING',            title: '启用状态',            formatter: function (value, row, index) {              if (value == "启用")                return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 启用</span>';              else                return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不启用</span>';            }          }, {            field: 'REMARK1',            title: '备注'          },         ]      });