欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap Table的一些小操作

程序员文章站 2022-04-09 21:19:39
本文实例为大家分享了bootstrap table的操作代码,供大家参考,具体内容如下 function hqcreattable(ob) { var op...

本文实例为大家分享了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值的总和,后端分页的话则是当页数据的总和。

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