bootstrap v3 笔记 table插件

JS代码片段

数据表初始化配置

 

/**

 * 获取角色表数据

 */

function loadTableData () {

$('#' + roleTableID).bootstrapTable({

url: roleTableDataURL, // 服务器数据的加载地址。

method:'get',     // 服务器数据的请求方式 'get' 或 'post'。

pagination:true,// 在表格底部显示分页信息(显示第 x 到第 x 条记录，总共 x 条记录)，翻页条 // 注意：数据页页数超过1页会才展示翻页条

paginationVAlign:'bottom', // 指定分页条在垂直方向的位置。'top'，'bottom' 或 'both'。

sidePagination:'server', // 设置在哪里进行分页，可选值为 'client' 或者 'server'。注意：设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。

responseHandler:responseHandler, // 加载服务器数据之前的处理程序，可以用来格式化数据。

pageSize:10, // 如果启用分页，设置初始化界面时，默认的每页显示数据条数

pageList:[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 'All'],  // 如果设置了分页，设置可供选择的页面记录数。设置为 All 或者 Unlimited，则显示所有记录

smartDisplay:false, // 设置为 true 是程序自动判断显示分页信息和 card 视图。这会导致自定义的 pageList不起作用

silentSort:true, // 设置为true将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效

showColumns:true, // 展示内容列下拉框，方便设置展示那些列

showRefresh:true, //   显示刷新按钮

idField:'id',     // 指定主键列

        //dataField: "data",  //返回的json数组记录(表格数据)的key.默认是"rows", 数据格式： {"total": 0, "rows": []}

checkboxHeader:true, // 如果设置 false，将在列头隐藏全选复选框，反之则显示，设置为ture时，必须设置singleSelect=false 才有效

clickToSelect:true, // 如果设置 true，则在点击行时，自动选中 rediobox 、 checkbox。

singleSelect:false,  //如果设置为true - 禁止多选，否则不禁止多选

striped:true, // 设置为 true 会有隔行变色效果

toolbar:'#toolbar', // 一个jQuery 选择器，形如#toolbar, .toolbar，指明自定义的 toolbar       

toolbarAlign:'left', // 指定 toolbar 水平方向的位置。'left' 或 'right'。

columns: [{

field: 'checkbox',

align: 'center',   // 设置数据对齐方式可选项： 'left', 'right', 'center'

halign: 'center',  // 设置表头标题对齐方式可选项： 'left', 'right', 'center'

valign: 'middle',   // 设置单元格数据的垂直方向上的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）针对checkbox似乎不起作用

checkbox:true,    // 显示为复选框

width: '1%',// 设置列宽度

        },{

field: 'id',

title: '角色ID',

align: 'center',

halign: 'center',

valign:'middle',

sortable:true, // 允许排序列

order:'desc',  // 默认排序方式升序-asc 降序-desc

width: '2%',

        }, {

field: 'name',

title: '角色名称',

align: 'center',

valign: 'middle',

halign: 'center',

width: '14%'

}, {

field: 'remark',

title: '角色描述',

valign: 'middle',

align: 'center',

halign: 'center',

width: '20%'

}, {

field: 'is_enable',

title: '是否启用',

valign: 'middle',

align: 'center',

halign: 'center',

width:'4%'

}, {

field: 'creater',

title: '创建人',

valign: 'middle',

align: 'center',

halign: 'center',

width:'7%'

}, {

field: 'create_time',

title: '创建时间',

valign: 'middle',

align: 'center',

halign: 'center',

width:'11%'

}, {

field: 'modifier',

title: '修改人',

valign: 'middle',

align: 'center',

halign: 'center',

width:'7%'

},{

field: 'modify_time',

title: '修改时间',

valign: 'middle',

align: 'center',

halign: 'center',

width:'11%'

},{

field:'operate',

title:'操作',

algin:'left',

halgin:'center',

width:'23%',

events: operateEvents,

formatter:operateFormatter

} ]

    });

}

笔记--来源url -1：https://www.cnblogs.com/laowangc/p/8875526.html

笔记--来源url -2：http://www.3672js.com/jQuery/30353.html