js/jq基础（日常整理记录）-3-一个自定义表格
一、一个自定义的表格
这个js是我刚工作的时候，我们老大让我做一个功能，我觉得html自带的table功能单一，没有分页和排序功能，所有就尝试着做一下，所以这个东西就出来了。很久没写博客了，贴出来吧，避免以后丢失。
先看看做出来是什么样子吧！（侧重于功能，样式没有怎么用心调整哈）
走的是ajax请求的挡板数据：
（说明：可以给指定类设置是否支持排序（升降序）,支出翻页功能）
话不多说：直接贴出代码了，由于很久之前写的了，还没有做后续优化，以后看有心情在补上优化的版本吧！
1 /** 2 * JS自执行函数 3 * @author 小风微凉 4 * @time 2018-04-23 17:54 5 */ 6 ;(function($,undefined){ 7 /** 8 * 进入严格模式 9 */ 10 "use strict" 11 /** 12 * $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效 13 */ 14 var MyTable=function(ele,opt){ 15 this.default={ 16 //请求id 17 id:'', 18 //请求url 19 url:null, 20 //列格式 21 columns: null, 22 //是否分页 默认不分页 23 pagination: false, 24 //是否隔行变色 25 isoddcolor: false, 26 //是否搜索栏 27 searchnation:false, 28 //页显示 29 pagesize: 5, 30 //页索引 31 pageindex: 1, 32 //总页数 33 totalpage: null, 34 //是否启动背景模式 35 bgflag: false, 36 //背景展示类型 37 bgmode:0, 38 //背景图片地址 39 bgimg:'' 40 41 } 42 //装配设置 43 this.settings=$.extend({},this.default,opt); 44 } 45 var _op=null; 46 MyTable.prototype={ 47 _id:null, 48 _currentTbData:[], 49 _columnsSortFlag:1, 50 _currentBeginPage:0, 51 _currentEndPage:0, 52 //初始化表格 53 init:function(){ 54 this._id=this.settings.id; 55 _op=this; 56 this.creat(); 57 this.bindEvent(); 58 }, 59 //创建表格 60 creat:function(){ 61 //初始化元素 62 this.InitializeElement(); 63 //初始化表头 64 this.createTableHead(); 65 //初始化动态行 66 this.createTableBody(1); 67 //判断是否开启分页项 68 if (this.settings.pagination){ 69 //初始化分页 70 this.createTableFoot(); 71 } 72 //是否启动背景模式 73 if(this.settings.bgflag){ 74 //初始化背景 75 this.randerBackground(); 76 } 77 }, 78 //绑定事件 79 bindEvent:function(){ 80 //添加上一页事件 81 this.registerUpPage(); 82 //添加下一页事件 83 this.registerNextPage(); 84 //添加首页事件 85 this.registerFirstPage(); 86 //添加最后一页事件 87 this.registerlastPage(); 88 //添加跳转事件 89 this.registerSkipPage(); 90 //添加鼠标悬浮事件 91 this.registermousehover(); 92 //添加隔行变色 93 this.registerchangebgcolor(); 94 //添加全选全不选事件 95 this.registercheckall(); 96 }, 97 //初始化元素 98 InitializeElement:function(){ 99 $('#'+this._id).empty().append('<thead><tr></tr></thead><tbody></tbody><tfoot></tfoot>'); 100 }, 101 //循环添加表头 102 createTableHead:function(){ 103 var headcols=this.settings.columns; 104 for(var i=0;i<headcols.length;i++){ 105 if (headcols[i].field == 'ck'){ 106 $("table[id='" + this._id + "'] thead tr").append("<th width='50px'><input name='chkall' type='checkbox'></th>"); 107 }else{ 108 //列标题，点击排序 109 if(headcols[i].headsort == true){ 110 $("table[id='" + this._id + "'] thead tr") 111 .append("<th class='theadsorts' id='"+headcols[i].field+"' width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "▼</th>"); 112 var param={'sortId':headcols[i]}; 113 $("table[id='" + this._id + "'] thead tr th#"+headcols[i].field).bind('click',param,_op._sortColumnsChanged); 114 }else{ 115 $("table[id='" + this._id + "'] thead tr").append("<th width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "</th>"); 116 } 117 } 118 } 119 }, 120 //点击指定列-排序 121 _sortColumnsChanged:function(event){ 122 var columns=_op.settings.columns; 123 var rowDatas=''; 124 var sortResults=_op._currentTbData; 125 //拿到排序列 126 var colID=event.data.sortId.field; 127 //拿到列标题 128 var colTitle=event.data.sortId.title; 129 for(var i=0;i<sortResults.length-1;i++){ 130 for(var j=0;j<sortResults.length-i-1;j++){ 131 /** 132 * 根据每一行指定列的的比较，给所在行排序 133 */ 134 var bool=false; 135 switch(_op._columnsSortFlag){//逆序 136 case 1:bool=sortResults[j][colID]<sortResults[j+1][colID];break; 137 case 2:bool=sortResults[j][colID]>sortResults[j+1][colID];break; 138 } 139 if(bool)//交换两数位置 140 { 141 var temp = sortResults[j]; 142 sortResults[j] = sortResults[j+1]; 143 sortResults[j+1] = temp; 144 } 145 } 146 } 147 switch(_op._columnsSortFlag){//逆序 148 case 1:_op._columnsSortFlag=2; 149 //改变样式 150 $("table[id='" + _op._id + "'] thead tr th#"+colID).html(colTitle+"▲"); 151 break; 152 case 2:_op._columnsSortFlag=1; 153 //改变样式 154 $("table[id='" + _op._id + "'] thead tr th#"+colID).html(colTitle+"▼"); 155 break; 156 } 157 158 //debugger; 159 var pn=_op.settings.pageindex; 160 for(var row=_op._currentBeginPage;row<_op._currentEndPage;row++){ 161 //开始拼接行 162 rowDatas+='<tr>'; 163 for(var colindex=0;colindex<columns.length;colindex++){ 164 //debugger; 165 if(columns[colindex].field=='ck'){ 166 rowDatas += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>' 167 }else{ 168 if(columns[colindex].link==true){ 169 rowDatas += '<td width="50px" align="center"><a name="links" href="javascript:void(0)" onclick="'+columns[colindex].formatter+'('+row+','+sortResults[row][columns[colindex].field]+')">' 170 +sortResults[row][columns[colindex].field] 171 + '</a></td>' 172 }else{ 173 rowDatas += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>' 174 +sortResults[row][columns[colindex].field] 175 + '</td>'; 176 } 177 } 178 } 179 rowDatas+='</tr>'; 180 } 181 //装填数据 182 $("table[id='"+_op.settings.id+"'] tbody").empty().append(rowDatas); 183 //显示当前页数:1 默认 184 $("#currentpageIndex").html(pn); 185 _op.registermousehover(); 186 187 }, 188 //循环添加行 189 createTableBody:function(pn){ 190 //每次加载数据，情况临时集合 191 _op._currentTbData=[]; 192 var columns = _op.settings.columns; 193 var json = this.getAjaxData( _op.settings.url, null); 194 //总页数=向上取整(总数/每页数) 195 this.settings.totalpage=Math.ceil((json.total)/ this.settings.pagesize); 196 //开始页数(统计起点) 197 var startPage=this.settings.pagesize*(pn-1); 198 this._currentBeginPage=0; 199 //结束页数（统计终点） 200 var endPage=startPage+this.settings.pagesize; 201 //行数据 202 var rowDatas=''; 203 //创建一个临时排序指令集合 204 var sortOrders=[]; 205 for(var colindex=0;colindex<columns.length;colindex++){ 206 var sortValue=columns[colindex].field; 207 //暂时只提供支持，按数字排序 208 var canSort=/^[0-9]*$/.test(sortValue); 209 if(columns[colindex].sort==true){ 210 var sortOption=[]; 211 sortOption.value=sortValue; 212 sortOption.desc=false; 213 if(columns[colindex].descflag==true){ 214 sortOption.desc=true; 215 } 216 sortOrders.push(sortOption); 217 } 218 } 219 //创建一个临时排序结果集合 220 var sortResults=[]; 221 //先读取每页数据到集合中 222 for(var row=0;row<json.rows.length;row++){ 223 sortResults.push(json.rows[row]); 224 } 225 //debugger; 226 //根据排序指令给集合排序 227 for(var sortIndex=0;sortIndex<sortOrders.length;sortIndex++){ 228 for(var i=0;i<sortResults.length-1;i++){ 229 for(var j=0;j<sortResults.length-i-1;j++){ 230 //拿到排序列 231 var val=sortOrders[sortIndex].value; 232 //判断 排序顺序 233 var descFlag=sortOrders[sortIndex].desc; 234 /** 235 * 根据每一行指定列的的比较，给所在行排序 236 */ 237 var bool=false; 238 if(descFlag){ 239 //逆序 240 bool=sortResults[j][val]<sortResults[j+1][val]; 241 }else{ 242 //正序 243 bool=sortResults[j][val]>sortResults[j+1][val]; 244 } 245 if(bool) //交换两数位置 246 { 247 var temp = sortResults[j]; 248 sortResults[j] = sortResults[j+1]; 249 sortResults[j+1] = temp; 250 } 251 } 252 } 253 } 254 //循环读取-显示数据 255 for(var row=startPage;row<endPage;row++){ 256 if(row==json.rows.length){ 257 break; 258 } 259 /** 260 * 找出当前：标题列排序索引结束值 261 */ 262 if(json.rows.length-this.settings.pagesize*(pn-1)<=this.settings.pagesize){ 263 this._currentEndPage=json.rows.length-this.settings.pagesize*(pn-1); 264 }else{ 265 this._currentEndPage=this.settings.pagesize; 266 } 267 //保存当前显示的数据到：临时集合中 268 _op._currentTbData.push(sortResults[row]); 269 //开始拼接行 270 rowDatas+='<tr>'; 271 for(var colindex=0;colindex<columns.length;colindex++){ 272 //debugger; 273 if(columns[colindex].field=='ck'){ 274 rowDatas += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>' 275 }else{ 276 if(columns[colindex].link==true){ 277 rowDatas += '<td width="50px" align="center"><a name="links" href="javascript:void(0)" onclick="'+columns[colindex].formatter+'('+row+','+sortResults[row][columns[colindex].field]+')">' 278 +sortResults[row][columns[colindex].field] 279 + '</a></td>' 280 }else{ 281 rowDatas += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>' 282 +sortResults[row][columns[colindex].field] 283 + '</td>'; 284 } 285 } 286 } 287 rowDatas+='</tr>'; 288 } 289 //装填数据 290 $("table[id='"+this.settings.id+"'] tbody").empty().append(rowDatas); 291 //显示当前页数:1 默认 292 $("#currentpageIndex").html(pn); 293 this.registermousehover(); 294 }, 295 //渲染表格背景 296 randerBackground:function(){ 297 var _target=''; 298 var _flag=_op.settings.bgmode; 299 if(!typeof _flag =='number'){ 300 _flag=0; 301 } 302 switch(_flag){ 303 //渲染列标题 304 case 1:_target="table[id='"+this._id+"'] thead th";break; 305 //渲染：奇数行 306 case 2:_target="table[id='"+this._id+"'] tbody tr:odd";break; 307 //渲染：偶数行 308 case 3:_target="table[id='"+this._id+"'] tbody tr:even";break; 309 //渲染：表格背景色：默认 310 default: 311 _target="table[id='"+this._id+"'] "; 312 $("table[id='"+this._id+"'] tbody tr").css('background',"none") 313 break; 314 } 315 $(_target).css('background-image',"url("+_op.settings.bgimg+")") 316 .css('color','white').css('cursor','pointer') 317 .css('background-repeat','repeat') 318 .css('background-position','0px 0px'); 319 320 }, 321 //创建分页栏 322 createTableFoot:function(){ 323 var footHtml = "<tr><td>"; 324 footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + this.settings.totalpage + "页</span>"; 325 footHtml += "<span id='firstPage'>首页</span>"; 326 footHtml += "<span id='UpPage'>上一页</span>"; 327 footHtml += "<span id='nextPage'>下一页</span>"; 328 footHtml += "<span id='lastPage'>末页</span>"; 329 footHtml += "<input type='text'/><span id='skippage'>跳转</span>"; 330 footHtml += "</td></tr>"; 331 $("table[id='" + this._id + "'] tfoot").append(footHtml); 332 $("table[id='" + this._id + "'] tfoot tr td").attr("colspan", this.settings.columns.length); 333 }, 334 //添加异步ajax事件 335 getAjaxData:function(url,parms){ 336 //定义一个全局变量来接受$post的返回值 337 var result; 338 //用ajax的同步方式 339 $.ajax({ 340 url:url, 341 data:parms, 342 type:'get', 343 async:false, 344 dataType:'json', 345 success:function(responseData){ 346 result = responseData; 347 } 348 }); 349 return result; 350 }, 351 //添加鼠标悬浮事件 352 registermousehover:function(){ 353 //添加鼠标悬浮事件 354 $("table[id='" + this._id + "'] tbody tr") 355 .mouseover(function () { 356 $(this).addClass("mouseover"); 357 }).mouseleave(function () { 358 $(this).removeClass("mouseover"); 359 }); 360 }, 361 registercheckall:function(){ 362 //添加全选全不选事件 363 $("input[name='chkall']").click(function () { 364 if (this.checked) { 365 $("input[name='chk']").each(function () { 366 $(this).attr("checked", true); 367 }); 368 } else { 369 $("input[name='chk']").each(function () { 370 $(this).attr("checked", false); 371 }); 372 } 373 }); 374 }, 375 //添加首页事件 376 registerFirstPage: function () { 377 $("#firstPage").click(function(){ 378 _op.settings.pageindex = 1; 379 _op.createTableBody( _op.settings.pageindex); 380 _op.randerBackground(); 381 }); 382 }, 383 //添加上一页事件 384 registerUpPage: function () { 385 $("table").delegate("#UpPage", "click",function () { 386 if( _op.settings.pageindex == 1){ 387 alert("已经是第一页了"); 388 return; 389 } 390 _op.settings.pageindex = _op.settings.pageindex - 1; 391 _op.createTableBody(_op.settings.pageindex); 392 _op.randerBackground(); 393 }); 394 }, 395 //添加下一页事件 396 registerNextPage: function () { 397 $("table").delegate("#nextPage", "click",function () { 398 if (_op.settings.pageindex == _op.settings.totalpage) { 399 alert("已经是最后一页了"); 400 return; 401 } 402 _op.settings.pageindex = _op.settings.pageindex + 1; 403 _op.createTableBody(_op.settings.pageindex); 404 _op.randerBackground(); 405 }); 406 }, 407 //添加尾页事件 408 registerlastPage: function () { 409 $("table").delegate("#lastPage", "click",function () { 410 _op.settings.pageindex = _op.settings.totalpage; 411 _op.createTableBody( _op.settings.totalpage); 412 _op.randerBackground(); 413 }); 414 }, 415 //添加页数跳转事件 416 registerSkipPage: function () { 417 $("table").delegate("#skippage", "click",function () { 418 var value = $("table[id='" + _op._id + "'] tfoot tr td input").val(); 419 if (!isNaN(parseInt(value))) { 420 if (parseInt(value) <= _op.settings.totalpage){ 421 _op.createTableBody(parseInt(value)); 422 _op.randerBackground(); 423 }else { 424 alert("超出页总数"); 425 } 426 } else { 427 alert("请输入数字"); 428 } 429 }); 430 }, 431 //添加隔行变色事件 432 registerchangebgcolor: function () { 433 //添加隔行变色 434 if (_op.settings.isoddcolor) { 435 $("table[id='" + _op._id + "'] tbody tr:odd").css("background-color", "#A77C7B") 436 .css("color", "#fff"); 437 } 438 }, 439 //by函数接受一个成员名字符串和一个可选的次要比较函数做为参数 440 //并返回一个可以用来包含该成员的对象数组进行排序的比较函数 441 //当o[age] 和 p[age] 相等时，次要比较函数被用来决出高下 442 443 } 444 $.fn.table=function(options){ 445 var table = new MyTable(this, options); 446 return this.each(function () { 447 //如果多个表格则循环创建 448 table.init(); 449 }); 450 } 451 })(jQuery);
那么看一下是如何使用的吧！
1 $(function(){ 2 $("#dg").table({ 3 id:"dg", 4 url:"json/table_learn_01.json", 5 columns: [ 6 { field:'ck', checkbox:true,width:30}, 7 { field: 'ID', title: '编号', width:30,sort:false,descflag:true,headsort:true, align: 'center'}, 8 { field: 'flowNo',link:true, title: '流水号',formatter:'gotoBaidu',sort:false,descflag:true,headsort:true, align: 'center'}, 9 { field: 'name', title: '上班日累计', width: 250, align: 'left' }, 10 { field: 'descrtion', title: '心情', width: 350, align: 'left' }, 11 { field: 'Price', title: '状态值', width: 100,sort:true,descflag:false,headsort:true, align: 'left' } 12 ], 13 isoddcolor:false, 14 pagination:true, 15 searchnation:true, 16 pagesize:10, 17 bgflag:true, 18 bgmode:1, 19 bgimg:'img/tables/table_header_bg.jpg' 20 }); 21 }); 22 function gotoBaidu(rowIndex,$Value){ 23 console.log('这是第'+(rowIndex+1)+"行数据："+$Value) 24 } 25 </script>
说明具体的属性设置说明，在js中已经说明，这里在贴出来一下：
1 var MyTable=function(ele,opt){ 2 this.default={ 3 //请求id 4 id:'', 5 //请求url 6 url:null, 7 //列格式 8 columns: null, 9 //是否分页 默认不分页 10 pagination: false, 11 //是否隔行变色 12 isoddcolor: false, 13 //是否搜索栏 14 searchnation:false, 15 //页显示 16 pagesize: 5, 17 //页索引 18 pageindex: 1, 19 //总页数 20 totalpage: null, 21 //是否启动背景模式 22 bgflag: false, 23 //背景展示类型 24 bgmode:0, 25 //背景图片地址 26 bgimg:'' 27 28 } 29 //装配设置 30 this.settings=$.extend({},this.default,opt); 31 }
好了就到这里，有不足的地方，欢迎指正，只求共同进步，提升自己的编程能力!
研究技术需要静下心来，一点一点地深究.......
