js/jq基础（日常整理记录）-3-一个自定义表格
一、一个自定义的表格
这个js是我刚工作的时候，我们老大让我做一个功能，我觉得html自带的table功能单一，没有分页和排序功能，所有就尝试着做一下，所以这个东西就出来了。很久没写博客了，贴出来吧，避免以后丢失。
先看看做出来是什么样子吧！（侧重于功能，样式没有怎么用心调整哈）
走的是ajax请求的挡板数据：
（说明：可以给指定类设置是否支持排序（升降序）,支出翻页功能）
话不多说：直接贴出代码了，由于很久之前写的了，还没有做后续优化，以后看有心情在补上优化的版本吧！
/**
* JS自执行函数
* @author 小风微凉
* @time 2018-04-23 17:54
*/
;(function($,undefined){
/**
* 进入严格模式
*/
"use strict"
/**
* $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效
*/
var MyTable=function(ele,opt){
this.default={
//请求id
id:'',
//请求url
url:null,
//列格式
columns: null,
//是否分页 默认不分页
pagination: false,
//是否隔行变色
isoddcolor: false,
//是否搜索栏
searchnation:false,
//页显示
pagesize: 5,
//页索引
pageindex: 1,
//总页数
totalpage: null,
//是否启动背景模式
bgflag: false,
//背景展示类型
bgmode:0,
//背景图片地址
bgimg:'' }
//装配设置
this.settings=$.extend({},this.default,opt);
}
var _op=null;
MyTable.prototype={
_id:null,
_currentTbData:[],
_columnsSortFlag:1,
_currentBeginPage:0,
_currentEndPage:0,
//初始化表格
init:function(){
this._id=this.settings.id;
_op=this;
this.creat();
this.bindEvent();
},
//创建表格
creat:function(){
//初始化元素
this.InitializeElement();
//初始化表头
this.createTableHead();
//初始化动态行
this.createTableBody(1);
//判断是否开启分页项
if (this.settings.pagination){
//初始化分页
this.createTableFoot();
}
//是否启动背景模式
if(this.settings.bgflag){
//初始化背景
this.randerBackground();
}
},
//绑定事件
bindEvent:function(){
//添加上一页事件
this.registerUpPage();
//添加下一页事件
this.registerNextPage();
//添加首页事件
this.registerFirstPage();
//添加最后一页事件
this.registerlastPage();
//添加跳转事件
this.registerSkipPage();
//添加鼠标悬浮事件
this.registermousehover();
//添加隔行变色
this.registerchangebgcolor();
//添加全选全不选事件
this.registercheckall();
},
//初始化元素
InitializeElement:function(){
$('#'+this._id).empty().append('<thead><tr></tr></thead><tbody></tbody><tfoot></tfoot>');
},
//循环添加表头
createTableHead:function(){
var headcols=this.settings.columns;
for(var i=0;i<headcols.length;i++){
if (headcols[i].field == 'ck'){
$("table[id='" + this._id + "'] thead tr").append("<th width='50px'><input name='chkall' type='checkbox'></th>");
}else{
//列标题，点击排序
if(headcols[i].headsort == true){
$("table[id='" + this._id + "'] thead tr")
.append("<th class='theadsorts' id='"+headcols[i].field+"' width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "▼</th>");
var param={'sortId':headcols[i]};
$("table[id='" + this._id + "'] thead tr th#"+headcols[i].field).bind('click',param,_op._sortColumnsChanged);
}else{
$("table[id='" + this._id + "'] thead tr").append("<th width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "</th>");
}
}
}
},
//点击指定列-排序
_sortColumnsChanged:function(event){
var columns=_op.settings.columns;
var rowDatas='';
var sortResults=_op._currentTbData;
//拿到排序列
var colID=event.data.sortId.field;
//拿到列标题
var colTitle=event.data.sortId.title;
for(var i=0;i<sortResults.length-1;i++){
for(var j=0;j<sortResults.length-i-1;j++){
/**
* 根据每一行指定列的的比较，给所在行排序
*/
var bool=false;
switch(_op._columnsSortFlag){//逆序
case 1:bool=sortResults[j][colID]<sortResults[j+1][colID];break;
case 2:bool=sortResults[j][colID]>sortResults[j+1][colID];break;
}
if(bool)//交换两数位置
{
var temp = sortResults[j];
sortResults[j] = sortResults[j+1];
sortResults[j+1] = temp;
}
}
}
switch(_op._columnsSortFlag){//逆序
case 1:_op._columnsSortFlag=2;
//改变样式
$("table[id='" + _op._id + "'] thead tr th#"+colID).html(colTitle+"▲");
break;
case 2:_op._columnsSortFlag=1;
//改变样式
$("table[id='" + _op._id + "'] thead tr th#"+colID).html(colTitle+"▼");
break;
} //debugger;
var pn=_op.settings.pageindex;
for(var row=_op._currentBeginPage;row<_op._currentEndPage;row++){
//开始拼接行
rowDatas+='<tr>';
for(var colindex=0;colindex<columns.length;colindex++){
//debugger;
if(columns[colindex].field=='ck'){
rowDatas += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>'
}else{
if(columns[colindex].link==true){
rowDatas += '<td width="50px" align="center"><a name="links" href="javascript:void(0)" onclick="'+columns[colindex].formatter+'('+row+','+sortResults[row][columns[colindex].field]+')">'
+sortResults[row][columns[colindex].field]
+ '</a></td>'
}else{
rowDatas += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>'
+sortResults[row][columns[colindex].field]
+ '</td>';
}
}
}
rowDatas+='</tr>';
}
//装填数据
$("table[id='"+_op.settings.id+"'] tbody").empty().append(rowDatas);
//显示当前页数:1 默认
$("#currentpageIndex").html(pn);
_op.registermousehover(); },
//循环添加行
createTableBody:function(pn){
//每次加载数据，情况临时集合
_op._currentTbData=[];
var columns = _op.settings.columns;
var json = this.getAjaxData( _op.settings.url, null);
//总页数=向上取整(总数/每页数)
this.settings.totalpage=Math.ceil((json.total)/ this.settings.pagesize);
//开始页数(统计起点)
var startPage=this.settings.pagesize*(pn-1);
this._currentBeginPage=0;
//结束页数（统计终点）
var endPage=startPage+this.settings.pagesize;
//行数据
var rowDatas='';
//创建一个临时排序指令集合
var sortOrders=[];
for(var colindex=0;colindex<columns.length;colindex++){
var sortValue=columns[colindex].field;
//暂时只提供支持，按数字排序
var canSort=/^[0-9]*$/.test(sortValue);
if(columns[colindex].sort==true){
var sortOption=[];
sortOption.value=sortValue;
sortOption.desc=false;
if(columns[colindex].descflag==true){
sortOption.desc=true;
}
sortOrders.push(sortOption);
}
}
//创建一个临时排序结果集合
var sortResults=[];
//先读取每页数据到集合中
for(var row=0;row<json.rows.length;row++){
sortResults.push(json.rows[row]);
}
//debugger;
//根据排序指令给集合排序
for(var sortIndex=0;sortIndex<sortOrders.length;sortIndex++){
for(var i=0;i<sortResults.length-1;i++){
for(var j=0;j<sortResults.length-i-1;j++){
//拿到排序列
var val=sortOrders[sortIndex].value;
//判断 排序顺序
var descFlag=sortOrders[sortIndex].desc;
/**
* 根据每一行指定列的的比较，给所在行排序
*/
var bool=false;
if(descFlag){
//逆序
bool=sortResults[j][val]<sortResults[j+1][val];
}else{
//正序
bool=sortResults[j][val]>sortResults[j+1][val];
}
if(bool) //交换两数位置
{
var temp = sortResults[j];
sortResults[j] = sortResults[j+1];
sortResults[j+1] = temp;
}
}
}
}
//循环读取-显示数据
for(var row=startPage;row<endPage;row++){
if(row==json.rows.length){
break;
}
/**
* 找出当前：标题列排序索引结束值
*/
if(json.rows.length-this.settings.pagesize*(pn-1)<=this.settings.pagesize){
this._currentEndPage=json.rows.length-this.settings.pagesize*(pn-1);
}else{
this._currentEndPage=this.settings.pagesize;
}
//保存当前显示的数据到：临时集合中
_op._currentTbData.push(sortResults[row]);
//开始拼接行
rowDatas+='<tr>';
for(var colindex=0;colindex<columns.length;colindex++){
//debugger;
if(columns[colindex].field=='ck'){
rowDatas += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>'
}else{
if(columns[colindex].link==true){
rowDatas += '<td width="50px" align="center"><a name="links" href="javascript:void(0)" onclick="'+columns[colindex].formatter+'('+row+','+sortResults[row][columns[colindex].field]+')">'
+sortResults[row][columns[colindex].field]
+ '</a></td>'
}else{
rowDatas += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>'
+sortResults[row][columns[colindex].field]
+ '</td>';
}
}
}
rowDatas+='</tr>';
}
//装填数据
$("table[id='"+this.settings.id+"'] tbody").empty().append(rowDatas);
//显示当前页数:1 默认
$("#currentpageIndex").html(pn);
this.registermousehover();
},
//渲染表格背景
randerBackground:function(){
var _target='';
var _flag=_op.settings.bgmode;
if(!typeof _flag =='number'){
_flag=0;
}
switch(_flag){
//渲染列标题
case 1:_target="table[id='"+this._id+"'] thead th";break;
//渲染：奇数行
case 2:_target="table[id='"+this._id+"'] tbody tr:odd";break;
//渲染：偶数行
case 3:_target="table[id='"+this._id+"'] tbody tr:even";break;
//渲染：表格背景色：默认
default:
_target="table[id='"+this._id+"'] ";
$("table[id='"+this._id+"'] tbody tr").css('background',"none")
break;
}
$(_target).css('background-image',"url("+_op.settings.bgimg+")")
.css('color','white').css('cursor','pointer')
.css('background-repeat','repeat')
.css('background-position','0px 0px'); },
//创建分页栏
createTableFoot:function(){
var footHtml = "<tr><td>";
footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + this.settings.totalpage + "页</span>";
footHtml += "<span id='firstPage'>首页</span>";
footHtml += "<span id='UpPage'>上一页</span>";
footHtml += "<span id='nextPage'>下一页</span>";
footHtml += "<span id='lastPage'>末页</span>";
footHtml += "<input type='text'/><span id='skippage'>跳转</span>";
footHtml += "</td></tr>";
$("table[id='" + this._id + "'] tfoot").append(footHtml);
$("table[id='" + this._id + "'] tfoot tr td").attr("colspan", this.settings.columns.length);
},
//添加异步ajax事件
getAjaxData:function(url,parms){
//定义一个全局变量来接受$post的返回值
var result;
//用ajax的同步方式
$.ajax({
url:url,
data:parms,
type:'get',
async:false,
dataType:'json',
success:function(responseData){
result = responseData;
}
});
return result;
},
//添加鼠标悬浮事件
registermousehover:function(){
//添加鼠标悬浮事件
$("table[id='" + this._id + "'] tbody tr")
.mouseover(function () {
$(this).addClass("mouseover");
}).mouseleave(function () {
$(this).removeClass("mouseover");
});
},
registercheckall:function(){
//添加全选全不选事件
$("input[name='chkall']").click(function () {
if (this.checked) {
$("input[name='chk']").each(function () {
$(this).attr("checked", true);
});
} else {
$("input[name='chk']").each(function () {
$(this).attr("checked", false);
});
}
});
},
//添加首页事件
registerFirstPage: function () {
$("#firstPage").click(function(){
_op.settings.pageindex = 1;
_op.createTableBody( _op.settings.pageindex);
_op.randerBackground();
});
},
//添加上一页事件
registerUpPage: function () {
$("table").delegate("#UpPage", "click",function () {
if( _op.settings.pageindex == 1){
alert("已经是第一页了");
return;
}
_op.settings.pageindex = _op.settings.pageindex - 1;
_op.createTableBody(_op.settings.pageindex);
_op.randerBackground();
});
},
//添加下一页事件
registerNextPage: function () {
$("table").delegate("#nextPage", "click",function () {
if (_op.settings.pageindex == _op.settings.totalpage) {
alert("已经是最后一页了");
return;
}
_op.settings.pageindex = _op.settings.pageindex + 1;
_op.createTableBody(_op.settings.pageindex);
_op.randerBackground();
});
},
//添加尾页事件
registerlastPage: function () {
$("table").delegate("#lastPage", "click",function () {
_op.settings.pageindex = _op.settings.totalpage;
_op.createTableBody( _op.settings.totalpage);
_op.randerBackground();
});
},
//添加页数跳转事件
registerSkipPage: function () {
$("table").delegate("#skippage", "click",function () {
var value = $("table[id='" + _op._id + "'] tfoot tr td input").val();
if (!isNaN(parseInt(value))) {
if (parseInt(value) <= _op.settings.totalpage){
_op.createTableBody(parseInt(value));
_op.randerBackground();
}else {
alert("超出页总数");
}
} else {
alert("请输入数字");
}
});
},
//添加隔行变色事件
registerchangebgcolor: function () {
//添加隔行变色
if (_op.settings.isoddcolor) {
$("table[id='" + _op._id + "'] tbody tr:odd").css("background-color", "#A77C7B")
.css("color", "#fff");
}
},
//by函数接受一个成员名字符串和一个可选的次要比较函数做为参数
//并返回一个可以用来包含该成员的对象数组进行排序的比较函数
//当o[age] 和 p[age] 相等时，次要比较函数被用来决出高下 }
$.fn.table=function(options){
var table = new MyTable(this, options);
return this.each(function () {
//如果多个表格则循环创建
table.init();
});
}
})(jQuery);
那么看一下是如何使用的吧！
$(function(){
$("#dg").table({
id:"dg",
url:"json/table_learn_01.json",
columns: [
{ field:'ck', checkbox:true,width:30},
{ field: 'ID', title: '编号', width:30,sort:false,descflag:true,headsort:true, align: 'center'},
{ field: 'flowNo',link:true, title: '流水号',formatter:'gotoBaidu',sort:false,descflag:true,headsort:true, align: 'center'},
{ field: 'name', title: '上班日累计', width: 250, align: 'left' },
{ field: 'descrtion', title: '心情', width: 350, align: 'left' },
{ field: 'Price', title: '状态值', width: 100,sort:true,descflag:false,headsort:true, align: 'left' }
],
isoddcolor:false,
pagination:true,
searchnation:true,
pagesize:10,
bgflag:true,
bgmode:1,
bgimg:'img/tables/table_header_bg.jpg'
});
});
function gotoBaidu(rowIndex,$Value){
console.log('这是第'+(rowIndex+1)+"行数据："+$Value)
}
</script>
说明具体的属性设置说明，在js中已经说明，这里在贴出来一下：
var MyTable=function(ele,opt){
this.default={
//请求id
id:'',
//请求url
url:null,
//列格式
columns: null,
//是否分页 默认不分页
pagination: false,
//是否隔行变色
isoddcolor: false,
//是否搜索栏
searchnation:false,
//页显示
pagesize: 5,
//页索引
pageindex: 1,
//总页数
totalpage: null,
//是否启动背景模式
bgflag: false,
//背景展示类型
bgmode:0,
//背景图片地址
bgimg:''
}
//装配设置
this.settings=$.extend({},this.default,opt);
}
好了就到这里，有不足的地方，欢迎指正，只求共同进步，提升自己的编程能力!
js/jq基础（日常整理记录）-3-一个自定义表格的更多相关文章
- Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...
- js/jq基础（日常整理记录）-1-纯js格式化时间
一.纯js格式化时间 之前记录了一些,工作中发现的比较常用的使用,就记录一下. 由于很基础,就直接贴出来了,不做分析了. 改造一下Date的原型 Date.prototype.format = fun ...
- js/jq基础（日常整理记录）-4-一个简单的自定义tree插件
一.一个简单的自定义tree插件 上一篇是之前自定义的table插件,这一篇也是之前同期尝试做的一个tree插件. 话不多说,先看看长什么样子哈! 现在来看确实不好看,以后在优化吧! 数据源:ajax ...
- js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝
一.一个简单的js方法实现集合拷贝 做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举 ...
- Spring MVC基础知识整理➣拦截器和自定义注解
概述 Spring MVC中通过注解来对方法或者类进行动态的说明或者标注,类似于配置标识文件的属性信息.当标注的类或者方式被使用时候,通过提取注解信息来达到对类的动态处理.在 MVC中,我们常用的注解 ...
- JS高级群的日常！写一个从10到0的倒计时，用console.log打印，不可以用 setInterval！本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。
JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力.. 小森执行一 ...
- 一个简单的3D范例，是在别人基础上面整理的。
一个简单的范例,是在别人基础上面整理的.原来的例子,框图太乱了,没有条理感. http://pan.baidu.com/s/1eQTyGCE
- JS零基础一步一步做应用全记录
1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握 ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
随机推荐
- vertex shader must minimally write all four components of POSITION
Though the POSITION semantic must be written out by the vertex shader, it cannot be read in by the p ...
- as3设计模式乱用之工厂模式
好久没写技术相关的日记了,一忙,二懒,三则被这单调的生活熏得没什么感悟. 其实这篇日记早就想写了,项目开发初期的时候,带学生.经常看到那种乱用设计模式的现象.一方面,公司面试人的时候喜欢问设计模式,另 ...
- javascript switch continue break 执行语句
1:switch 关键字段:switch(n).case.break.default switch(n) :n是一个表达式 或者是一变量,用来与其下的各种case进行匹配,比如:此时的day输出的是 ...
- BZOJ3262：陌上花开
浅谈离线分治算法:https://www.cnblogs.com/AKMer/p/10415556.html 题目传送门:https://lydsy.com/JudgeOnline/problem.p ...
- 寻找php.ini之旅
/usr/local/php-fpm/lib/php.ini 可以通过phpinfo()来查看 https://www.cnblogs.com/ChineseMoonGod/p/6474772.htm ...
- n年的一次聚会
今日聚会有a,b,b1,c,d 五人一起吃饭. 先谈谈各自的变化吧. a 毕业之后,他爸给他买了一个京a的牌照,然后出印度留学,然后回到北京,现在算一个中层领导,不过比较忙,刚刚聚餐完毕就立马回去加班 ...
- Spark on yarn的两种模式 yarn-cluster 和 yarn-client
从深层次的含义讲,yarn-cluster和yarn-client模式的区别其实就是Application Master进程的区别,yarn-cluster模式下,driver运行在AM(Applic ...
- Spring 自动注册及自动装配
Spring支持三种注册Bean及装配Bean的方式: 显式地在Java代码中注册及装配 显示地在Xml文件中注册及装配 隐式地装配,即自动注册及装配 这三种方式可以混合使用.选择哪种更多地是看个人品 ...
- java代码swing编程JPaswordField类
总结:JPasswordField类是JTextField类的子类.用户在JPasswordField对象中输入的字符会被其他的字符替代 而挡住,JPasswordFiled组件主要用来输入口令 pa ...
- $route路由
<!DOCTYPE html><html ng-app="AngularApp"> <head> <meta charset=" ...