当前位置： 移动技术网 > IT编程>开发语言>JavaScript > bootstrap Table的一些小操作

bootstrap Table的一些小操作

2017年12月12日  | 移动技术网IT编程  | 我要评论

长安汽车站,大哲去南方,缓解压力的音乐

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网