jq 封装table 组件

1. 在jq项目里面我们也会用到一下表格，这个时候就是用到表格
   先提条件就是已经用了，jq的插件了
   在components建立table组件命名 table.js

// 设置全局
window.$ = $;
window.jQuery = $;
window.getType = function (str) {

    var a = typeof (str);
    if (a === 'object') {
        var t = Object.prototype.toString.call(str);
        switch (t) {
            case "[object Function]":
                return 'Function';
            case "[object Array]":
                return 'Array';
            default:
                return a;
        }
    } else if (a == 'function') {
        return 'Function';
    } else {
        return a;
    }
};

function Custom_table(){

    //表格事件
    this.events=null;
    /**
     * 列表table展示对象
     */
    this.table = null;
    /**
     * 列表table body展示对象
     */
    this.tableTbody = null;
    /**
     * 列表table page展示对象
     */
    this.tablePageDiv = null;
    
    /**
     * 列表table 数据集合（非外部传入）
     */
    this.pageData = null;
    
    /**
     * 列表table 列数
     */
    this.columnNum = 0;
    
    /**
     * 列表行排列集函数
     */
    this.renderRow = null;
    
    /**
     * 数据加载完成后执行的扩展方法(可选)
     */
    this.loadEndFun = null;
        
    /**
     * 每页记录下拉框(可选)
     */
    this.pageConfig = false;
    /**
     * 分页数据
     */
    this.options=null;
    this.pageOptions = {
        // 当前页号, 从1开始
        currentPage : 1,
        // 上一页 
        previousPage : 1,
        // 下一页
        nextPage : 1,
        // 总页数
        totlePage : 1,
        // 总记录数
        totleRows : 0,
        // 当前记录数开始序列，默认从0开始
        startNum : 0,
        // 单页显示最大数量
        pageSize : 10,
        //是否显示分页
        showPage:true,
        // 单页显示数量选择集合
        selectPageSize : [5,10,20,50]
    };
    return this;
}
/**
 * 初始化
 */
Custom_table.prototype.init = function(options) {
    //判断当前表格是否初始化了
    
    this.options=options;
    this.el=$(options.el).eq(0);
    this.el.children().remove();
    if(options.showPage !== undefined)
    {
        this.pageOptions.showPage=options.showPage;
    }
    //获取表格数据
    this.ajaxRequest=options.ajaxRequest;
    //事件注册
    this.events=options.events && options.events.length ? options.events : [];
    //列表table展示对象
    this.table = $('<table width="100%" border="'+ (options.border || 0) +'" cellspacing="0" cellpadding="0" class="table">');


    if (!options.headerHtml)
    {
        let t = '';
        let arr=[];
        if(getType(options['header']) == 'Array')
        {
            //列表table 列数
            this.columnNum =   options['header'].length;
            arr=options["header"];
        }else if(getType(options['header']) == 'Function'){
            //列表table 列数
            this.columnNum =   options['header']().length;
            arr=options["header"]() || [];
        }
        if (options.type=="select")
        {
            options.selectIndex=options.selectIndex || 0;
            this.columnNum++;
        }
        arr.forEach((v, i) => {
            if(options.selectIndex==i)
            {
                t+="<th style='width:30px;'><input class='select_all' type='checkbox'/></th>"
            }
            t += `<th>${v}</th>`;
        });
        //表格头部
        this.tableHeader = $(`<thead><tr style="white-space: nowrap">${t}</tr></thead>`);
        var _this=this;
        this.table.on("change",'thead input.select_all',function(e){
            var index=$(this).parent().index();
            var f=$(this).prop("checked");
            if(f)
            {
                //全选按钮
                _this.table.find("td input[type='checkbox']").prop("checked", true);
                
    
            }else{
                //全选按钮
                _this.table.find("td input[type='checkbox']").prop("checked", false);
            }
            options.checkedChange && options.checkedChange(e,{
                type:'all',
                value:f
            });
        })  
    }else{
        this.tableHeader = $(options.headerHtml);
        //列表table 列数
        this.columnNum =   options.colNum ||　11;
    }

    //列表table body展示对象
    this.tableTbody = $(`<tbody id="acctItemTBody"></tbody>`);
    //列表table page展示对象
    if(this.pageOptions.showPage)
    {
        this.tablePageDiv = $(`<div id="acctItemTablePageDiv" class="page"></div>`);
    }


    this.table.append(this.tableHeader);
    this.table.append(this.tableTbody);
    var d=$("<div class='table-warp'></div>");
    d.append(this.table);
    this.el.append(d);

    this.tablePageDiv && this.el.append(this.tablePageDiv);
    //添加事件
    this.events.forEach((v)=>{
        this.table.on(v.type, v.selector, v.handle)
    });
    //列表行排列集函数
    this.renderRow = options['renderRow'];

    //数据加载完成后执行的自定义方法（可选）
    this.loadEndFun = options['loadEndFun'];
    //每页记录下拉框(可选)
    this.pageConfig = options['pageConfig'];

    if(options['pageSize']) {   // 如果设置了pageSize需要初始化

        this.pageOptions.pageSize = options['pageSize'];
        if( this.pageOptions.selectPageSize.indexOf(options['pageSize']) ==-1)
        {
            this.pageOptions.selectPageSize.unshift(options['pageSize']);
        }
    }
    // 初始化扩展参数
    this.ajaxRequest.apply(this);
    return this;
};
/**
 * 渲染
 */
Custom_table.prototype.renderHeader=function(){
    let options=this.options;
    let t='';
    let arr=[];
    if(getType(options['header']) == 'Function'){
        //列表table 列数
        this.columnNum =   options['header']().length;
        if(options.type == 'select')
        {
            this.columnNum++;
        }
        arr=options["header"]() || [];
        arr.forEach((v, i) => {
            if(options.selectIndex==i)
            {
                t+="<th style='width:30px;'><input class='select_all' type='checkbox'/></th>"
            }
            t += `<th>${v}</th>`;
        });
        //表格头部
        if(this.tableHeader)
        {   
            this.tableHeader=$(`<thead><tr>${t}</tr></thead>`);
            this.table.find('thead').replaceWith(this.tableHeader);
        }
    }
    return this;
};
/**
 * 针对输入自定义业务条件后查询，需要初始化到第一页(对外方法)
 */
Custom_table.prototype.reset = function() {
    // 当前页号, 从1开始
    this.pageOptions.currentPage = 1;
    // 上一页 
    this.pageOptions.previousPage = 1;
    // 下一页
    this.pageOptions.nextPage = 1;
    // 总页数
    this.pageOptions.totlePage = 1;
    // 总记录数
    this.pageOptions.totleRows = 0;
    // 当前记录数开始序列，默认从0开始
    this.pageOptions.startNum = 0;
};
//更新表格
Custom_table.prototype.refresh = function() {
    var tableBody = '';
    this.tableHeader.find("th input.select_all").prop("checked",false);
    this.renderHeader();
    if(null != this.pageData  && this.pageData.length > 0 ) {

        var seqNum = (this.pageOptions.currentPage-1)*this.pageOptions.pageSize +1; // 序号
        // 有记录
        for(var i = 0; i < this.pageData.length ; i ++ ) {
            var tempBean = this.pageData[i];
            // 执行外部封装的行处理展示对象
            var doubleRowStyle = i % 2 == 0 ? '' : 'class="tableWRow"';
            tableBody = tableBody + '<tr id="tr" rowEvent="' +i+ '" ' +doubleRowStyle+ '>';
            tableBody = tableBody + this.renderRow(seqNum + i,tempBean);
            tableBody = tableBody + '</tr>';
        }
        // this.tableT.html(tableBody);
        this.tableTbody.html(tableBody);
        this.pageOptions.totlePage=Math.ceil(this.pageOptions.totleRows / this.pageOptions.pageSize);
        // 初始化分页数据
        this.initTablePage();

    } else {
        // 无记录
        tableBody = '<tr class="noRecord">'
                + '<td colspan="' +this.columnNum+ '" style="color: red;" align="center">没有相关记录</td>'
                + '</tr>';
        this.tableTbody.html(tableBody);
        this.pageOptions.currentPage =1;
        this.pageOptions.totlePage=Math.ceil(this.pageOptions.totleRows / this.pageOptions.pageSize);
        // 初始化分页数据
        this.initTablePage();

    }
};
/**
 * 初始化分页操作区域数据
 */
Custom_table.prototype.getPageControlHtml = function() {
  this.pageOptionslang = {
    // 每页显示
    displayPerPage: "每页显示",
    // 条
    item: "条",
    // 总
    total: "总",
    // 条记录
    records: "条记录",
    // 共
    together: "共",
    // 页
    page: "页",
    // 当前第
    currentFirst: "当前第",
    // 首页
    firstPage: "首页",
    // 上一页
    previousPage: "上一页",
    // 下一页
    nextPage: "下一页",
    //尾页
    lastPage: "尾页",
    // 每页
    eachPage: "每页",
    // 行
    row: "行",
    // 第
    first: "第"
  };
    var  pageControlHtml = '';
    // 每页显示按钮
    pageControlHtml += '<div style="display: none;" id="acctItempageSize">'+this.pageOptionslang.displayPerPage+'<select name="pageSize" id="pageSize" class="input45" goToPage="1" >';

    pageControlHtml += '</select>'+this.pageOptionslang.item+'&nbsp;</div>';
    // 统计数量
    pageControlHtml += '<span>'+this.pageOptionslang.total+'<font color="red">' +this.pageOptions.totleRows+ '</font>'+this.pageOptionslang.records+'</span>&nbsp;';
    pageControlHtml += '<span>'+this.pageOptionslang.together+'<font color="red">' +this.pageOptions.totlePage+ '</font>'+this.pageOptionslang.page+'</span>&nbsp;';
    pageControlHtml += ''+this.pageOptionslang.currentFirst+'<font color="red">' +this.pageOptions.currentPage+ '</font>'+this.pageOptionslang.page+'&nbsp;';
    // 首页按钮
    pageControlHtml += '<a id="firstA" href="javascript:void(0);" '+'>'+this.pageOptionslang.firstPage+'</a>&nbsp;';
    // 上一页按钮
    pageControlHtml += '<a id="upA" href="javascript:void(0);">'+this.pageOptionslang.previousPage+'</a>&nbsp;';
    // 下一页按钮
    pageControlHtml += '<a id="downA" href="javascript:void(0);">'+this.pageOptionslang.nextPage+'</a>&nbsp;';
    // 尾页按钮
    pageControlHtml += '<a id="lastA" href="javascript:void(0);" >'+this.pageOptionslang.lastPage+'</a>&nbsp;';

    if(true){
        pageControlHtml += ''+this.pageOptionslang.eachPage+'&nbsp';
        pageControlHtml += '<select id="EveryB"style="text-align:center;border:1px solid #b1c3e0;background:#fff;height:26px;line-height:26px;padding-bottom:0px;padding-left:10px;color:#5b6274;">';
        var tmp=this.pageOptions.selectPageSize;
        for(var i=0;i<tmp.length;i++)
        {
            pageControlHtml += '<option value="'+tmp[i]+'">'+tmp[i]+'</option>'
        }
        pageControlHtml += '</select>&nbsp'+this.pageOptionslang.row+'&nbsp;'+this.pageOptionslang.first+'&nbsp;';

    }
    
    pageControlHtml += '<input id="curPage" name="curPage" type="hidden" value="' +this.pageOptions.currentPage+ '" />';
    pageControlHtml += '<input name="pageNum" id="pageNum" class="page_inp" maxlength="8" />';
    if(this.pageConfig){
        pageControlHtml += ''+this.pageOptionslang.page+'';
    }
    pageControlHtml += '&nbsp;<a type="button" id="goButton" name="goButton" class="page_normal" goToPageByNum="">GO</a>&nbsp;&nbsp;';
    return pageControlHtml;
};
/**
 * 初始化分页page数据
 */
Custom_table.prototype.initTablePage = function() {
    if(!this.pageOptions.showPage ) return;
    var thisObj = this;
    var tempPage = this.getPageControlHtml();
    this.tablePageDiv.html(tempPage);
    if(this.pageOptions.totlePage > 0) {    // 最大页数大于0
        // 单元格行点击事件
        this.tableTbody.on("",function(){

        });
        // 对点击首页按钮添加事件
        $(this.tablePageDiv.find('a[id=firstA]') ).on("click",function(){
            if(thisObj.pageOptions.currentPage>1)
            {
                thisObj.goToPage(1);
            }
            
        });
        // 对点击上一页按钮添加事件
        $(this.tablePageDiv.find('a[id=upA]') ).on("click",function(){
            if(thisObj.pageOptions.currentPage-1>0)
            {
                thisObj.goToPage(thisObj.pageOptions.currentPage-1);
            }
            
        });

        // 对点击下一页按钮添加事件
        $(this.tablePageDiv.find('a[id=downA]') ).on("click",function(){
            if(thisObj.pageOptions.currentPage+1<=thisObj.pageOptions.totlePage)
            {
                thisObj.goToPage(thisObj.pageOptions.currentPage+1);
            }
            
        });
        // 对点击末页的按钮添加事件
        $(this.tablePageDiv.find('a[id=lastA]') ).on("click",function(){
            if(thisObj.pageOptions.currentPage!=thisObj.pageOptions.totlePage)
            {
                thisObj.goToPage(thisObj.pageOptions.totlePage);
            }
            
        });
        // 对选择每页记录添加事件
        $(this.tablePageDiv.find('#EveryB') ).change(function(){ 
            thisObj.pageOptions.pageSize=$(this).children('option:selected').val();
            thisObj.pageOptions.currentPage = 1;
            thisObj.goToPage(thisObj.pageOptions.currentPage);
        });
        
        // 对点击GO的分页查询按钮添加事件
        this.tablePageDiv.find('#goButton').click(function() {
            thisObj.goToPageByNum();
        });
        
        // 对选择每页记录添加值
        this.tablePageDiv.find('#EveryB').val(this.pageOptions.pageSize);
    }
};
/**
 * 分页查询中点击翻页按钮的查询事件
 * @param pageNum
 */
Custom_table.prototype.goToPage = function(pageNum) {
    var selectedPageSize = this.tablePageDiv.find('#pageSize').val();
    if(selectedPageSize && selectedPageSize.length > 0) {
        this.pageOptions.pageSize = parseInt(selectedPageSize);
    }
    this.pageOptions.currentPage=parseInt(pageNum);
    this.tablePageDiv.find('#curPage').val(pageNum);
    this.ajaxRequest.apply(this);
};
/**
 * 分页查询中点击“Go”去指定页数的查询事件
 */
Custom_table.prototype.goToPageByNum = function() {
    var pageNum = this.tablePageDiv.find('#pageNum').val();
    if('' != pageNum && pageNum.match(/^[0-9]*[1-9][0-9]*$/)) {
        pageNum = parseInt(pageNum);
        if(this.pageOptions.totlePage >= pageNum ) {

            this.pageOptions.currentPage=pageNum;

            this.tablePageDiv.find('#curPage').val(pageNum);
            this.ajaxRequest.apply(this);
        }
    }
};
/**
 * 选择页数的查询事件
 */
Custom_table.prototype.goEveryByNum = function(num) {
    this.pageOptions.pageSize = num;
    this.pageOptions.startNum = 0;
    this.pageOptions.currentPage = 1;
    this.tablePageDiv.find('#pageSize').val(num);
    this.ajaxRequest.apply(this);
};
window.Custom_table = Custom_table;

style.scss 文件

.vk_table_warp table {border:1px solid #bacae3;line-height:35px;text-align:center;}
.vk_table_warp table thead th {background:#ebeff8;font-weight:normal;}
.vk_table_warp table thead th,.table tbody td {border-right:1px solid #dee5f4; padding: 0 5px;}
.vk_table_warp table thead th.nor,.table tbody td.nor {border-right:0;}
.vk_table_warp table tbody td.text {text-align:right;padding-right:10px;}
.vk_table_warp table tbody tr:hover {background:#ebeff8;} /*这个将是鼠标高亮行的背景色*/
.vk_table_warp table tbody tr td a {margin:0 5px;color:#4eb2e1;text-decoration:underline;}
.vk_table_warp table tbody tr td a:hover {color:#4eb2e1;text-decoration:none;}
.vk_table_warp table tbody tr td.text a {color:#5b6274;text-decoration:none;}
.vk_table_warp table tbody tr td.price {line-height:35px;text-align:right;padding-right:10px;border-top:1px solid #dee5f4;}
.vk_table_warp table a.block {background:#4eb2e1;color:#fff;display:block;text-decoration:none;}
.vk_table_warp .tableWRow { background: #f6f7f9;}

/*分页*/
.vk_table_warp .page{zoom:1; text-align:right;border:1px solid #bacae3;border-top:0;padding:10px 0; box-sizing: border-box;}
.vk_table_warp .page a{padding:5px 8px;border:1px solid #dedede;margin-right:3px;text-decoration:none;background:#fff;color:#5b6274;} 
.vk_table_warp .page a:hover,.page a.hover{color:#fff;background:#4eb2e1;}
.vk_table_warp .page_inp{width:48px;height:22px;line-height:22px;border:1px solid #dedede;text-align:center;margin-right:3px;}
.vk_table_warp .page a.page_normal{padding:0;border:0;margin:0;background:none;font-weight:bold;}
.vk_table_warp .page a.page_normal:hover{color:#5b6274;background:none;}

在我们使用的时候就可以直接用到，
html 用

<div id="accountingOrganizationAuthorityManageTable" class="vk_table_warp"></div>

js 用

  let self = new Custom_table();
  self.init({
    el: '#accountingOrganizationAuthorityManageTable',
    header: ["序号","用户名","员工姓名","全局", "启用", "操作"],
    pageSize: 10, // 每页显示的条数，可以不设定，默认是20,
    ajaxRequest: function() { //请求数据，默认传入当前的页码
      // 请求的方法
        getData((res) => {
           // 重新刷新页面
            self.pageData = res.rows;
            self.pageOptions.totleRows = res.total;
            self.refresh();
        })
    },
    //点击行时出发回调 
    events: [{
      //选择器 获取编辑事件
      selector: "span.edit",
      //事件类型
      type: 'click',
      //事件处理函数
      handle: function (e) {
          //获取当前行的数据
          let index = $(this).parents("tr").index();
          let data = self.pageData[index]
          console.log(data);
      }
  },{
      //选择器 获取详情事件
      selector: "span.detail",
      //事件类型
      type: 'click',
      //事件处理函数
      handle: function (e) {
          //获取当前行的数据
          let index = $(this).parents("tr").index();
          let data = self.pageData[index]
          console.log(data);
      }
  }
],
    renderRow: function(seq, t) { //表格每行数据的渲染
        return `<td>${seq}</td>`+
            `<td>${t.userName || ''}</td>`+
            `<td>${t.employeeName || ''}</td>`+
            `<td>${t.companyCode || ''}</td>`+
            `<td>${t.companyFullName || ''}</td>`+
            `<td>${t.companyTypeName || ''}</td>`+
            `<td>${t.parentCode || ''}</td>`+
            `<td>${t.parentName || ''}</td>`+
            `<td>${t.globalFlagName || ''}</td>`+
            `<td>${t.enabledFlagName || ''}</td>`+
            `<td><span class='handle vk_cell_primary edit'>编辑</span>
             <span class='handle vk_cell_primary detail'>详情</span></td>`;
    }
  });