自定义jquery表格插件

以前一直都是再用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 }

CSS

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

JSON

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 })

View Code

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: '编号', width:100, align: 'center'},
17                          { field: 'name', title: '名称', width: 150, align: 'left' },
18                          { field: 'descrtion', title: '描述', width: 350, align: 'left' },
19                          { field: 'Price', title: '价格', width: 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>

HTML

显示效果

posted @ 2015-02-05 17:28 不想当码农阅读(3372) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

自定义jquery表格插件

公告