bootstrap Table的一些小操作

2023-09-21 17:54:05 50

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

functionHQCreatTable(ob){
varoption={
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配置函数


//行根据数据变色
functionrowStyle(row,index){
varclasses=['success'];
varclasses1=['danger'];
varclasses2=['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){
returndata.reduce(function(sum,row){
returnaccAdd(sum,row["Selmoney"]);
},0)+"元";
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

bootstrap Table的一些小操作

热门推荐

随机推荐