zoukankan      html  css  js  c++  java
  • 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值的总和,后端分页的话则是当页数据的总和。
  • 相关阅读:
    win10的power shell可以学习少部分linux命令_功能与cmd类似
    js数组的初始化
    Vue.js 学习笔记
    jquery knob旋钮插件
    jquery 城市三级联动
    xampp 配置虚拟主机
    2016 360 前端开发 面经
    2016 乐视 前端开发 面经
    主流浏览器内核及前缀
    前端代码优化方法
  • 原文地址:https://www.cnblogs.com/tzzf/p/7764360.html
Copyright © 2011-2022 走看看