bootstrap table

最近用bootstrap table,所以放上来记录一下

HTML

1 <table id="tblAttribute" class="table">
2 </table>

这部分放在哪里就代表table放在哪里。我尽量说详细一下大家都能明白。

JS


 var SelfAttrTableInit = function () {   
            var oTableInit = new Object();              //初始化table插件
            oTableInit.Init = function () {
                $("#tblAttribute").bootstrapTable({     //通过html的id=tblAttribute触发这个table
                    method: 'get',                      //请求方式(*)
                    //url: '/adminapi/Attribute/GetSelfDefineAttribute',         //请求后台的URL(*)
                    queryParams: oTableInit.queryParams,//传递参数(*)
                    //queryParamsType:'limit',
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    striped: true,                      //是否显示行间隔色
                    cache: true,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
                    pageNumber: 1,                       //初始化加载第一页,默认第一页
                    pageSize: 10,                       //每页的记录行数(*)
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                    smartDisplay: false,
                    showRefresh: true,                  //是否显示刷新按钮
                    clickToSelect: true,                //是否启用点击选中行
                    height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                    uniqueId: "id",                     //每一行的唯一标识,一般为主键列
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                   //是否显示父子表
                    pagination: true,                   //是否显示分页(*)
            //表格显示的列
columns: [{ checkbox: true }, { field: 'id', title: 'id', visible: false }, { field: 'Desc', title: '描述', }, { field: 'Desc_e', title: '描述E', }, { field: 'Desc_c', title: '描述C' }, { field: 'Desc_s', title: '描述S' }, { field: 'Desc_j', title: '描述J' }, { field: 'IsBatchOrder', title: 'is' }] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { return { //name: $("#txtAttributeName").val(), limit: params.limit, //页面大小 offset: params.offset //页码 }; } return oTableInit; } $(document).ready(function () { InitDateTimePicker(); var oTable = SelfAttrTableInit(); oTable.Init(); });

 

 

 

posted @ 2017-07-31 11:19  kklam  阅读(118)  评论(0)    收藏  举报