- 在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 = $('');
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+="${v} `;
});
//表格头部
this.tableHeader = $(`${t} `);
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 = $(``);
//列表table page展示对象
if(this.pageOptions.showPage)
{
this.tablePageDiv = $(``);
}
this.table.append(this.tableHeader);
this.table.append(this.tableTbody);
var d=$("");
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+="${v} `;
});
//表格头部
if(this.tableHeader)
{
this.tableHeader=$(`${t} `);
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 + '';
tableBody = tableBody + this.renderRow(seqNum + i,tempBean);
tableBody = tableBody + ' ';
}
// this.tableT.html(tableBody);
this.tableTbody.html(tableBody);
this.pageOptions.totlePage=Math.ceil(this.pageOptions.totleRows / this.pageOptions.pageSize);
// 初始化分页数据
this.initTablePage();
} else {
// 无记录
tableBody = ''
+ '没有相关记录 '
+ ' ';
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 += '';
// 统计数量
pageControlHtml += ''+this.pageOptionslang.total+'' +this.pageOptions.totleRows+ ''+this.pageOptionslang.records+' ';
pageControlHtml += ''+this.pageOptionslang.together+'' +this.pageOptions.totlePage+ ''+this.pageOptionslang.page+' ';
pageControlHtml += ''+this.pageOptionslang.currentFirst+'' +this.pageOptions.currentPage+ ''+this.pageOptionslang.page+' ';
// 首页按钮
pageControlHtml += ''+this.pageOptionslang.firstPage+' ';
// 上一页按钮
pageControlHtml += ''+this.pageOptionslang.previousPage+' ';
// 下一页按钮
pageControlHtml += ''+this.pageOptionslang.nextPage+' ';
// 尾页按钮
pageControlHtml += ''+this.pageOptionslang.lastPage+' ';
if(true){
pageControlHtml += ''+this.pageOptionslang.eachPage+' ';
pageControlHtml += ' '+this.pageOptionslang.row+' '+this.pageOptionslang.first+' ';
}
pageControlHtml += '';
pageControlHtml += '';
if(this.pageConfig){
pageControlHtml += ''+this.pageOptionslang.page+'';
}
pageControlHtml += ' GO ';
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 用
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 `${seq} `+
`${t.userName || ''} `+
`${t.employeeName || ''} `+
`${t.companyCode || ''} `+
`${t.companyFullName || ''} `+
`${t.companyTypeName || ''} `+
`${t.parentCode || ''} `+
`${t.parentName || ''} `+
`${t.globalFlagName || ''} `+
`${t.enabledFlagName || ''} `+
`编辑
详情 `;
}
});
你可能感兴趣的:(jq 封装table 组件)