本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下
function HQCreatTable(ob) {
var option = {
cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
scrollX: true,
scrollY:true,
striped: true, //使表格带有条纹 //是否显示行间隔色
sidePagination: "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; }
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配置函数
<table id="Table3" data-row-style="rowStyle"></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
if (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值的总和,后端分页的话则是当页数据的总和。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
bootstrap,table
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“bootstrap Table的一些小操作”评论...
更新日志
2025年10月24日
2025年10月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]