微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

bootstrap Table的一些小操作

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

rush:js;"> 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,//<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>刷新按钮
//search: false,//是否<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>右上角的<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>框
//toolbar: '#toolbar',//工具按钮用哪个容器
uniqueId: "ID",//每一行的唯一标识,一般为主键列
undefinedText: "",toolb<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>lign: '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配置函数

rush:js;"> bed_msg==0) { return { classes: classes2 }; }else{ if (row.status == 1) { return { classes: classes1 }; } else { return { classes: classes }; } }

}

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

rush:js;"> formatter: function (value,row,index) { // 根据row.列名 那状态确定返回 true/false if (row.status == 1) { return { disabled: true }; }
    }

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

rush:js;"> footerFormatter: function (data) { return data.reduce(function (sum,row) { return accAdd(sum,row["Selmoney"]); },0) + "元"; }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐