bootstrap Table的一些小操作

bootstrap Table的一些小操作

本文实例为大家分享了bootstrap Table的操作代码，供大家参考，具体内容如下

function HQCreatTable(ob) {

var option = {

cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

scrollX: true,

scrollY:true,

striped: true, //使表格带有条纹 //是否显示行间隔色

sidePaginationhttp://: "client",//分页方式：client客户端分页，server服务端分页（*）

pagination: true, //在表格底部显示分页工具栏

pageNumber: 1, //初始化加载第一页，默认第一页

pageSize: 10,

pageList: [ 10,15],//可供选择的每页的行数（*）

showColumns: false,//是否显示所有的列

sortable: true, //是否启用排序

clickToSelect: true,//是否启用点击选中行

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

//search: false,//是否显示右上角的搜索框

//toolbar: '#toolbar', //工具按钮用哪个容器

uniqueId: "ID", //每一行的唯一标识，一般为主键列

undefinedText: "",

toolbarAlign: 'left',

exportDataType: "all", //basic', 'all', 'selected'.

}

if (ob.rowStyle) {

option.rowStyle = ob.rowStyle;//行样式 是函数

}

//排序

if (ob.sortOrder) {

option.sortOrder = ob.sortOrder;

} else {

option.sortOrder = "desc";

}

if (ob.sortName) {

option.sortName = ob.sortName;

}

if (ob.showExport) {

option.showExport = ob.showExport;//导出Excel

}

if (ob.showFooter) {

option.showFooter = ob.showFooter;//是否显示统计页脚

}

if (ob.searchAlign) {

option.searchAlign = ob.searchAlign;

}

if (ob.num) {

option.pageSize = ob.num;//每页的记录行数（*）

}

if (ob.data) {

option.data = ob.data;

} else {

option.data = [];

}

if (ob.search) {

option.search = ob.search;

}

if (ob.columns) {

option.columns = ob.columns;

}

if (ob.onClickRow) {

option.onClickRow = ob.onClickRow;

}

if (ob.onDblClickRow) {

option.onDblClickRow = ob.onDblClickRow;

}

if (ob.onDblClickRow) {

option.onDblClickRow = ob.onDblClickRow;

}

if (ob.onCheck) {

option.onCheck = ob.onCheck;

}

if (ob.onAll) {

option.onAll = ob.onAll;

}

if (ob.onLoadSuccess) {

option.onLoadSuccess = ob.onLoadSuccess;

}

if (ob.toolbar) {

option.toolbar = ob.toolbar;

}

if (ob.singleSelect || ob.singleSelect == false) {

option.singleSelect = ob.singleSelect

} else {

option.singleSelect = true;//禁止多选

}

if (ob.maintainSelected) {

option.maintainSelected = ob.maintainSelected;

} else {

option.maintainSelected = false;//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项

}

if (ob.detailView) { option.detailView = ob.detailView; }

http:// if (ob.onExpandRow) {

option.onExpandRow = ob.onExpandRow;

}

if (ob.onEditableSave) {

option.onEditableSave = ob.onEditableSave;

}

$(ob.id).bootstrapTable('destroy');

$(ob.id).bootstrapTable(option);

if (ob.data) {

$(ob.id).bootstrapTable('load', ob.data);

}

}

前端分页的Table配置函数

//行根据数据变色

function rowStyle(row, index) {

var classes = ['success'];

var classes1 = ['danger'];

var classes2 = ['warning'];

if (row.bed_msg==0) {

return {

classes: classes2

};

}else{

if (row.status == 1) {

return {

classes: classes1

};

} else {

return {

classes: classes

};

}

}

}

根据每行数据的一个字段的值来改变行的背景色（class好像只能调用他本来默认的那几个，很久之前写的忘记了是不是这样的）

formatter: function (value, row, index) {

// 根据row.列名 那状态确定返回 true/false

ifnVZRIcvMWk (row.status == 1) {

return {

disabled: true

};

}

}

这个是根据每行数据的一个字段的值来是否禁用选择框（我在之前项目需要做结算，已结算的和未结算的在一起，因此需要这个），formatter还可以写别的函数，比如根据1，0值改成其对应的值

footerFormatter: function (data) {

return data.reduce(function (sum, row) {

return accAdd(sum, row["Selmoney"]);

}, 0) + "元";

}

footerFormatter是必须之前的配置Table时，showFooter属性为true，否则不会显示。我写这个是前端分页的话是Table所有数据的Selmoney值的总和，后端分页的话则是当页数据的总和。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。