以前一直都是再用easyui插件来实现各种功能，但是easyui太过于庞大，使用越多对服务器负载影响越大。
基于此，在模仿easyui的dataGrid表格插件的同时，自己去封装了一个。实现了基本的json数据的动态加载，自动分页，全选全不选，鼠标悬浮变色，隔行变色等
由于涉及到ajax访问，所以必须部署到iis上才能看出效果
css样式
1 /* CSS Document */ 2 body { 3 font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial; 4 color: #253443; 5 margin: 0 auto; 6 padding: 0 auto; 7 } 8 table { 9 border-collapse: collapse; 10 border-spacing: 0; 11 background: #FFF; 12 font-size: 12px; 13 width: 100%; 14 border: 1; 15 width: 100%; 16 } 17 thead { 18 display: table-header-group; 19 vertical-align: middle; 20 border-color: inherit; 21 } 22 tr { 23 display: table-row; 24 vertical-align: inherit; 25 border-color: inherit; 26 } 27 table thead tr { 28 background-color: #E6F0FF; 29 } 30 table thead tr th { 31 padding: 5px 8px; 32 font-weight: normal; 33 color: #999; 34 border-bottom: 1px solid #B50802; 35 vertical-align: bottom; 36 line-height: 20px; 37 } 38 tbody { 39 display: table-row-group; 40 vertical-align: middle; 41 border-color: inherit; 42 } 43 table tbody tr td { 44 padding: 8px; 45 border-top: 0px; 46 border-bottom: 1px solid #DDD; 47 vertical-align: middle; 48 line-height: 20px; 49 } 50 table tfoot tr td { 51 width: 100%; 52 background-color: #F4F4F4; 53 height: 20px; 54 padding: 8px 0px; 55 color: #000; 56 } 57 table tfoot tr td input { 58 width: 30px; 59 float: left; 60 } 61 table tfoot tr td span { 62 display: inline-block; 63 cursor: pointer; 64 height:20px; 65 padding:0 10px; 66 float: left; 67 } 68 .mouseover { 69 background-color: #EAF2FF; 70 color: #000; 71 }
JSON文件
1 { 2 "total":16, 3 "rows": [ 4 { 5 "ID": 1, 6 "name": "公共js和公共css样式部分", 7 "descrtion":"描述公共js和公共css样式部分", 8 "Price": 950 9 }, 10 { 11 "ID": 2, 12 "name": "自定义特性（如：皮肤风格选择等）部分", 13 "descrtion":"描述自定义特性（如：皮肤风格选择等）", 14 "Price": 5500 15 }, 16 { 17 "ID": 3, 18 "name": "具体定义及实现部分", 19 "descrtion":"描述具体定义及实现部分", 20 "Price": 150 21 }, 22 { 23 "ID": 4, 24 "name": "对外开放部分", 25 "descrtion":"描述对外开放部分", 26 "Price": 650 27 }, 28 { 29 "ID": 5, 30 "name": "公共js和公共css样式部分", 31 "descrtion":"描述公共js和公共css样式部分", 32 "Price": 950 33 }, 34 { 35 "ID": 6, 36 "name": "匹配所有大于给定索引值的元素", 37 "descrtion":"描述匹配所有大于给定索引值的元素", 38 "Price": 5500 39 }, 40 { 41 "ID": 7, 42 "name": "查找第二第三行，即索引值是1和2，也就是比0大", 43 "descrtion":"描述查找第二第三行，即索引值是1和2，也就是比0大", 44 "Price": 150 45 }, 46 { 47 "ID": 8, 48 "name": "从 0 开始计数", 49 "descrtion":"从 0 开始计数", 50 "Price": 650 51 }, 52 { 53 "ID": 9, 54 "name": "公共js和公共css样式部分", 55 "descrtion":"描述公共js和公共css样式部分", 56 "Price": 950 57 }, 58 { 59 "ID": 10, 60 "name": "自定义特性（如：皮肤风格选择等）部分", 61 "descrtion":"描述自定义特性（如：皮肤风格选择等）", 62 "Price": 5500 63 }, 64 { 65 "ID": 11, 66 "name": "具体定义及实现部分", 67 "descrtion":"描述具体定义及实现部分", 68 "Price": 150 69 }, 70 { 71 "ID": 12, 72 "name": "对外开放部分", 73 "descrtion":"描述对外开放部分", 74 "Price": 650 75 }, 76 { 77 "ID": 13, 78 "name": "公共js和公共css样式部分", 79 "descrtion":"描述公共js和公共css样式部分", 80 "Price": 950 81 }, 82 { 83 "ID": 14, 84 "name": "匹配所有大于给定索引值的元素", 85 "descrtion":"描述匹配所有大于给定索引值的元素", 86 "Price": 5500 87 }, 88 { 89 "ID": 15, 90 "name": "查找第二第三行，即索引值是1和2，也就是比0大", 91 "descrtion":"描述查找第二第三行，即索引值是1和2，也就是比0大", 92 "Price": 150 93 }, 94 { 95 "ID": 16, 96 "name": "从 0 开始计数", 97 "descrtion":"从 0 开始计数", 98 "Price": 650 99 } 100 ] 101 } 102 103
jquery
1 // JavaScript Document 2 $(function () { 3 var dataGrid = function (ele, opt) { 4 this.defaults = { 5 //id 6 id: "", 7 //请求url 8 url: null, 9 //表头格式 10 columns: null, 11 //是否分页 12 pagination: false, 13 //是否隔行变色 14 isoddcolor: false, 15 //是否搜索栏 16 searchnation:false, 17 //页显示 18 pagesize: 5, 19 //页索引 20 pageindex: 1, 21 //总页数 22 totalpage: null 23 } 24 this.settings = $.extend({}, this.defaults, opt); 25 } 26 27 dataGrid.prototype = { 28 _id:null, 29 _op:null, 30 init: function () { 31 this._id=this.settings.id; 32 _op=this; 33 this.create(); 34 this.bindEvent(); 35 }, 36 create: function () { 37 //初始化元素 38 this.InitializeElement(); 39 //初始化表头 40 this.createTableHead(); 41 //初始化动态行 42 this.createTableBody(1); 43 //初始化搜索框 44 //if(this.settings.searchnation) this.createsearchbox(); 45 //选择是否分页 46 if (this.settings.pagination) this.createTableFoot(); 47 }, 48 bindEvent: function () { 49 //添加上一页事件 50 this.registerUpPage(); 51 //添加下一页事件 52 this.registerNextPage(); 53 //添加首页事件 54 this.registerFirstPage(); 55 //添加最后一页事件 56 this.registerlastPage(); 57 //添加跳转事件 58 this.registerSkipPage(); 59 //添加鼠标悬浮事件 60 this.registermousehover(); 61 //添加隔行变色 62 this.registerchangebgcolor(); 63 //添加全选全不选事件 64 this.registercheckall(); 65 }, 66 //初始化元素 67 InitializeElement: function () { 68 //var id = this.settings.id; 69 $("#"+this._id).empty().append("<thead><tr></tr></thead><tbody></tbody><TFOOT></TFOOT>"); 70 }, 71 //循环添加表头 72 createTableHead: function () { 73 var headcols = this.settings.columns; 74 for (var i = 0; i < headcols.length; i++) { 75 if (headcols[i].field == 'ck') $("table[id='" + this._id + "'] thead tr").append("<th width='50px'><input name='chkall' type='checkbox'></th>"); 76 else $("table[id='" + this._id + "'] thead tr").append("<th width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "</th>"); 77 } 78 }, 79 //循环添加行 80 createTableBody: function (pn) { 81 var columns = _op.settings.columns; 82 var json = this.getAjaxDate( _op.settings.url, null); 83 //总页数=向上取整(总数/每页数) 84 _op.settings.totalpage = Math.ceil((json.total) / _op.settings.pagesize); 85 //开始页数 86 var startPage = _op.settings.pagesize * (pn - 1); 87 //结束页数 88 var endPage = startPage + _op.settings.pagesize; 89 var rowsdata = ""; 90 for (var row = startPage; row < endPage; row++) { 91 if (row == json.rows.length) break; 92 rowsdata += "<tr>"; 93 for (var colindex = 0; colindex < columns.length; colindex++) { 94 if (columns[colindex].field == 'ck') rowsdata += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>' 95 else rowsdata += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>' + json.rows[row][columns[colindex].field] + '</td>'; 96 } 97 rowsdata += "</tr>"; 98 } 99 $("table[id='" + this._id + "'] tbody").empty().append(rowsdata); 100 $("#currentpageIndex").html(pn); 101 this.registermousehover(); 102 }, 103 //初始化分页 104 createTableFoot: function () { 105 var footHtml = "<tr><td>"; 106 footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + _op.settings.totalpage + "页</span>"; 107 footHtml += "<span id='firstPage'>首页</span>"; 108 footHtml += "<span id='UpPage'>上一页</span>"; 109 footHtml += "<span id='nextPage'>下一页</span>"; 110 footHtml += "<span id='lastPage'>末页</span>"; 111 footHtml += "<input type='text'/><span id='skippage'>跳转</span>"; 112 footHtml += "</td></tr>"; 113 $("table[id='" + this._id + "'] tfoot").append(footHtml); 114 $("table[id='" + this._id + "'] tfoot tr td").attr("colspan", "5"); 115 }, 116 //添加鼠标悬浮事件 117 registermousehover: function () { 118 //添加鼠标悬浮事件 119 $("table[id='" + this._id + "'] tbody tr").mouseover(function () { 120 $(this).addClass("mouseover"); 121 }).mouseleave(function () { 122 $(this).removeClass("mouseover"); 123 }); 124 }, 125 //添加隔行变色事件 126 registerchangebgcolor: function () { 127 //添加隔行变色 128 if (this.settings.isoddcolor) $("table[id='" + this._id + "'] tr:odd").css("background-color", "#A77C7B").css("color", "#fff"); 129 }, 130 //添加全选全不选事件 131 registercheckall: function () { 132 //添加全选全不选事件 133 $("input[name='chkall']").click(function () { 134 if (this.checked) { 135 $("input[name='chk']").each(function () { 136 $(this).attr("checked", true); 137 }); 138 } else { 139 $("input[name='chk']").each(function () { 140 $(this).attr("checked", false); 141 }); 142 } 143 }); 144 }, 145 //添加首页事件 146 registerFirstPage: function () { 147 $("#firstPage").click(function(){ 148 _op.settings.pageindex = 1; 149 _op.createTableBody( _op.settings.pageindex); 150 }); 151 }, 152 //添加上一页事件 153 registerUpPage: function () { 154 $("table").delegate("#UpPage", "click", 155 function () { 156 if ( _op.settings.pageindex == 1) { 157 alert("已经是第一页了"); 158 return; 159 } 160 _op.settings.pageindex = _op.settings.pageindex - 1; 161 _op.createTableBody(_op.settings.pageindex); 162 }); 163 }, 164 //添加下一页事件 165 registerNextPage: function () { 166 $("table").delegate("#nextPage", "click", 167 function () { 168 if (_op.settings.pageindex == _op.settings.totalpage) { 169 alert("已经是最后一页了"); 170 return; 171 } 172 _op.settings.pageindex = _op.settings.pageindex + 1; 173 _op.createTableBody(_op.settings.pageindex); 174 }); 175 }, 176 //添加尾页事件 177 registerlastPage: function () { 178 $("table").delegate("#lastPage", "click", 179 function () { 180 _op.settings.pageindex = _op.settings.totalpage; 181 _op.createTableBody( _op.settings.totalpage); 182 }); 183 }, 184 //添加页数跳转事件 185 registerSkipPage: function () { 186 $("table").delegate("#skippage", "click", 187 function () { 188 var value = $("table[id='" + this._id + "'] tfoot tr td input").val(); 189 if (!isNaN(parseInt(value))) { 190 if (parseInt(value) <= _op.settings.totalpage) _op.createTableBody(parseInt(value)); 191 else alert("超出页总数"); 192 } else alert("请输入数字"); 193 }); 194 }, 195 //添加异步ajax事件 196 getAjaxDate: function (url, parms) { 197 //定义一个全局变量来接受$post的返回值 198 var result; 199 //用ajax的同步方式 200 $.ajax({ 201 url: url, 202 async: false, 203 //改为同步方式 204 data: parms, 205 success: function (data) { 206 result = data; 207 } 208 }); 209 return result; 210 } 211 } 212 213 $.fn.grid = function (options) { 214 var grid = new dataGrid(this, options); 215 return this.each(function () { 216 grid.init(); 217 }); 218 } 219 })
html调用
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script src="jquery-1.8.0.min.js"></script> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <script src="pagetion.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $("#dg").grid({ 12 id:"dg", 13 url:"data.json", 14 columns: [ 15 {field:'ck',checkbox:true}, 16 { field: 'ID', title: '编号', 100, align: 'center'}, 17 { field: 'name', title: '名称', 150, align: 'left' }, 18 { field: 'descrtion', title: '描述', 350, align: 'left' }, 19 { field: 'Price', title: '价格', 100, align: 'left' } 20 ], 21 isoddcolor:false, 22 pagination:true, 23 searchnation:true, 24 pagesize:5 25 }); 26 }); 27 </script> 28 </head> 29 <body> 30 <form id="form1"> 31 <table id="dg"> 32 </table> 33 </form> 34 </body> 35 </html>
显示效果
