jQuery之自定义datagrid控件

sldatagrid

效果：

sldatagrid.js

  1 (function($) {
  2     function loadColumns(sldatagrid, columns) {
  3         $(sldatagrid).empty();
  4         $(sldatagrid).append("<thead><tr></tr></thead><tbody></tbody>");
  5         var thead = $("thead", sldatagrid);
  6         var tr = $("tr", thead);
  7         $.each(columns, function(i, n) {
  8             var settings = {};
  9             $.extend(settings, $.fn.sldatagrid.column, n);
 10             if (settings.html == "") {
 11                 if (settings.field == "ck") {
 12                     $("<th class='sldatagrid-header-check' field='ck' align='center' style='" + settings.style + "'></th>").data("settings", settings).appendTo(tr);
 13                     $("<input>", {
 14                         type : 'checkbox',
 15                         click : function() {
 16                             if (!$(sldatagrid).data("settings").singleSelect) {
 17                                 if (this.checked) {
 18                                     $.each(thead.next().children(), function() {
 19                                         $(this).addClass("sldatagrid-row-selected");
 20                                         $("td :checkbox", this).attr("checked", "checked");
 21                                     });
 22                                 } else {
 23                                     $.each(thead.next().children(), function() {
 24                                         $(this).removeClass("sldatagrid-row-selected");
 25                                         $("td :checkbox", this).removeAttr("checked");
 26                                     });
 27                                 }
 28                             } else {
 29                                 return false;
 30                             }
 31                         }
 32                     }).appendTo($("th", tr));
 33                 } else {
 34                     if (settings.hidden) {
 35                         $("<th class='sldatagrid-header-cell' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + ";display:none;'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
 36                     } else {
 37                         $("<th class='sldatagrid-header-cell' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
 38                     }
 39                 }
 40             } else {
 41                 $("<th class='sldatagrid-header-custom' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
 42             }
 43         });
 44     }
 45     function loadDatas(sldatagrid, datas) {
 46         $("tbody", sldatagrid).remove();
 47         $(sldatagrid).append("<tbody></tbody>");
 48         var thead = $("thead", sldatagrid);
 49         var theadtr = $("tr", thead);
 50         var tbody = $("tbody", sldatagrid);
 51         $.each(datas, function(i, n) {
 52             n.ck = false;
 53             var tr = $("<tr>", {
 54                 mouseenter : function() {
 55                     if (!$(this).hasClass("sldatagrid-row-selected")) {
 56                         $(this).addClass("sldatagrid-row-enter");
 57                     }
 58                     $(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;
 59                 },
 60                 mouseleave : function() {
 61                     $(this).removeClass("sldatagrid-row-enter");
 62                 },
 63                 click : function() {
 64                 }
 65             }).data("bindData", n).appendTo(tbody);
 66             $("th", theadtr).each(function() {
 67                 var field = $(this).attr('field');
 68                 if ($(this).data("settings").hidden) {
 69                     $("<td>", {
 70                         "class" : "sldatagrid-row-cell",
 71                         style : "display:none;",
 72                         click : function() {
 73                         }
 74                     }).text(n[field]).appendTo(tr);
 75                 } else {
 76                     if ($(this).data("settings").html == undefined || $(this).data("settings").html.length == 0) {
 77                         if (field == "ck") {
 78                             $("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
 79                             $("<input>", {
 80                                 type : "checkbox",
 81                                 click : function() {
 82                                     if (!$(sldatagrid).data("settings").singleSelect) {
 83                                         tr.toggleClass("sldatagrid-row-selected");
 84                                         if (tr.hasClass("sldatagrid-row-selected")) {
 85                                             $("td :checkbox", tr).attr("checked", "checked");
 86                                         } else {
 87                                             $("td :checkbox", tr).removeAttr("checked");
 88                                         }
 89                                         if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
 90                                             $(":checkbox", theadtr).attr("checked", "checked");
 91                                         } else {
 92                                             $(":checkbox", theadtr).removeAttr("checked");
 93                                         }
 94                                     } else {
 95                                         if (!tr.hasClass("sldatagrid-row-selected")) {
 96                                             $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
 97                                             $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
 98                                             tr.addClass("sldatagrid-row-selected");
 99                                             $("td :checkbox", tr).attr("checked", "checked");
100                                         } else {
101                                             return false;
102                                         }
103                                     }
104                                 }
105                             }).appendTo($("td", tr));
106                         } else {
107                             $("<td>", {
108                                 "class" : "'sldatagrid-row-cell",
109                                 click : function() {
110                                     if (!$(sldatagrid).data("settings").singleSelect) {
111                                         $(this).parent().toggleClass("sldatagrid-row-selected");
112                                         if ($(this).parent().hasClass("sldatagrid-row-selected")) {
113                                             $("td :checkbox", $(this).parent()).attr("checked", "checked");
114                                         } else {
115                                             $("td :checkbox", $(this).parent()).removeAttr("checked");
116                                         }
117                                         if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
118                                             $(":checkbox", theadtr).attr("checked", "checked");
119                                         } else {
120                                             $(":checkbox", theadtr).removeAttr("checked");
121                                         }
122                                     } else {
123                                         if (!$(this).parent().hasClass("sldatagrid-row-selected")) {
124                                             $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
125                                             $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
126                                             tr.addClass("sldatagrid-row-selected");
127                                             $("td :checkbox", tr).attr("checked", "checked");
128                                         }
129                                     }
130                                 }
131                             }).text(n[field]).appendTo(tr);
132                         }
133                     } else {
134                         $("<td>", {
135                             "class" : "sldatagrid-row-custom",
136                             click : function() {
137 
138                             }
139                         }).appendTo(tr).html($(this).data("settings").html);
140                     }
141                 }
142             });
143         });
144     }
145     function insertData(sldatagrid, index, data) {
146         var thead = $("thead", sldatagrid);
147         var theadtr = $("tr", thead);
148         var tbody = $("tbody", sldatagrid);
149         var tr = $("<tr>", {
150             mouseenter : function() {
151                 if (!$(this).hasClass("sldatagrid-row-selected")) {
152                     $(this).addClass("sldatagrid-row-enter");
153                 }
154                 $(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;
155             },
156             mouseleave : function() {
157                 $(this).removeClass("sldatagrid-row-enter");
158             },
159             click : function() {
160             }
161         }).data("bindData", data);
162         if ($("tr", tbody).length > 0) {
163             $("tr", tbody).eq(index).before(tr);
164         } else {
165             tbody.append(tr);
166         }
167         $("th", theadtr).each(function() {
168             var field = $(this).attr('field');
169             if ($(this).data("html") == undefined || $(this).data("html").length == 0) {
170                 if (field == "ck") {
171                     $("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
172                     $("<input>", {
173                         type : "checkbox",
174                         click : function() {
175                             if (!$(sldatagrid).data("settings").singleSelect) {
176                                 tr.toggleClass("sldatagrid-row-selected");
177                                 if (tr.hasClass("sldatagrid-row-selected")) {
178                                     $("td :checkbox", tr).attr("checked", "checked");
179                                 } else {
180                                     $("td :checkbox", tr).removeAttr("checked");
181                                 }
182                                 if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
183                                     $(":checkbox", theadtr).attr("checked", "checked");
184                                 } else {
185                                     $(":checkbox", theadtr).removeAttr("checked");
186                                 }
187                             } else {
188                                 if (!tr.hasClass("sldatagrid-row-selected")) {
189                                     $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
190                                     $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
191                                     tr.addClass("sldatagrid-row-selected");
192                                     $("td :checkbox", tr).attr("checked", "checked");
193                                 } else {
194                                     return false;
195                                 }
196                             }
197                         }
198                     }).appendTo($("td", tr));
199                 } else {
200                     $("<td>", {
201                         "class" : "'sldatagrid-row-cell",
202                         click : function() {
203                             if (!$(sldatagrid).data("settings").singleSelect) {
204                                 $(this).parent().toggleClass("sldatagrid-row-selected");
205                                 if ($(this).parent().hasClass("sldatagrid-row-selected")) {
206                                     $("td :checkbox", $(this).parent()).attr("checked", "checked");
207                                 } else {
208                                     $("td :checkbox", $(this).parent()).removeAttr("checked");
209                                 }
210                                 if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
211                                     $(":checkbox", theadtr).attr("checked", "checked");
212                                 } else {
213                                     $(":checkbox", theadtr).removeAttr("checked");
214                                 }
215                             } else {
216                                 if (!$(this).parent().hasClass("sldatagrid-row-selected")) {
217                                     $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
218                                     $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
219                                     tr.addClass("sldatagrid-row-selected");
220                                     $("td :checkbox", tr).attr("checked", "checked");
221                                 }
222                             }
223                         }
224                     }).text(data[field]).appendTo(tr);
225                 }
226             } else {
227                 $("<td>", {
228                     "class" : "sldatagrid-row-custom",
229                     click : function() {
230 
231                     }
232                 }).appendTo(tr).html($(this).data("settings").html);
233             }
234         });
235     }
236     function checkRow(sldatagrid, index) {
237         var tr = $("tbody tr", sldatagrid);
238         if ($(sldatagrid).data("settings").singleSelect) {
239             tr.removeClass("sldatagrid-row-selected");
240             $("td :checkbox", tr).removeAttr("checked");
241         }
242         tr = tr.eq(index);
243         tr.addClass("sldatagrid-row-selected");
244         $("td :checkbox", tr).attr("checked", "checked");
245     }
246     function unselectAll(sldatagrid) {
247         var tr = $("tbody tr", sldatagrid);
248         tr.removeClass("sldatagrid-row-selected");
249         $("td :checkbox", tr).removeAttr("checked");
250     }
251     $.fn.sldatagrid = function(options, params) {
252         if ($.type(options) == "string") {
253             var method = $.fn.sldatagrid.methods[options];
254             if (method) {
255                 return method(this, params);
256             } else {
257                 return null;
258             }
259         }
260         var settings = {};
261         $.extend(settings, $.fn.sldatagrid.defaults, options);
262         $(this).data("settings", settings).data("property", $.fn.sldatagrid.property);
263         $(this).attr({
264             border : 0,
265             cellpadding : 0,
266             cellspacing : 0,
267             "class" : settings.cssClass,
268             style : settings.style
269         });
270         if (settings.columns) {
271             loadColumns(this, settings.columns);
272         }
273         if (settings.datas) {
274             loadDatas(this, settings.datas);
275         }
276     };
277     $.fn.sldatagrid.methods = {
278         getClickRow : function(sldatagrid) {
279             return $("tbody tr", sldatagrid).eq($(sldatagrid).data("property").enterRowIndex).data("bindData");
280         },
281         getSelectedRows : function(sldatagrid) {
282             var selectedRows = new Array();
283             $("tbody tr.sldatagrid-row-selected", sldatagrid).each(function(i) {
284                 selectedRows[i] = $(this).data("bindData");
285             });
286             return selectedRows;
287         },
288         loadColumns : function(sldatagrid, columns) {
289             loadColumns(sldatagrid, columns);
290         },
291         loadDatas : function(sldatagrid, datas) {
292             loadDatas(sldatagrid, datas);
293         },
294         insertData : function(sldatagrid, params) {
295             insertData(sldatagrid, params.index, params.data);
296         },
297         checkRow : function(sldatagrid, index) {
298             checkRow(sldatagrid, index);
299         },
300         unselectAll : function(sldatagrid) {
301             unselectAll(sldatagrid);
302         },
303         getRow : function(sldatagrid, index) {
304             return $("tbody tr", sldatagrid).eq(index).data("bindData");
305         }
306     };
307     $.fn.sldatagrid.property = {
308         enterRowIndex : -1
309     };
310     $.fn.sldatagrid.defaults = {
311         cssClass : "sldatagrid",
312         style : "",
313         singleSelect : false,
314         columns : undefined,
315         datas : undefined
316     };
317     $.fn.sldatagrid.column = {
318         title : "",
319         field : "",
320         hidden : false,
321         align : "left",
322         style : "",
323         html : ""
324     };
325 })(jQuery);

View Code

sldatagrid.css

 1 table,thead,tr,th,td,input {
 2     margin: 0;
 3     padding: 0;
 4     font-family: verdana;
 5     font-size: 12px;
 6 }
 7 
 8 .sldatagrid {
 9     border: solid 1px #B4B4B4;
10     border-collapse: collapse;
11     margin: 1px 0 0 0;
12 }
13 
14 .sldatagrid tr th {
15     height: 27px;
16     border: solid 1px #B4B4B4;
17     background-color: #F4F4F4;
18     word-break: keep-all;
19     white-space: nowrap;
20     padding: 1px 5px 1px 5px;
21 }
22 
23 .sldatagrid tr td {
24     height: 25px;
25     border: solid 1px #B4B4B4;
26     word-break: keep-all;
27     white-space: nowrap;
28     padding: 0 5px 0 5px;
29 }
30 
31 .sldatagrid-header-check {
32     width: 20px;
33 }
34 
35 .sldatagrid-header-custom {
36     width: auto;
37 }
38 
39 .sldatagrid-header-cell {
40     min-width: 50px;
41 }
42 
43 .sldatagrid-row-check {
44     width: 20px;
45 }
46 
47 .sldatagrid-row-custom {
48     
49 }
50 
51 .sldatagrid-row-cell {
52     padding: 0 5px 0 5px;
53     width: auto;
54 }
55 
56 .sldatagrid-row-selected {
57     background-color: #FCFCB6;
58 }
59 
60 .sldatagrid-row-enter {
61     background-color: #DDFAFB;
62 }

View Code

testsldatagrid.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title></title>
 6 <link rel="stylesheet" href="sldatagrid.css" />
 7 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 8 <script type="text/javascript" src="sldatagrid.js"></script>
 9 </head>
10 <body>
11     <table id="sl">
12     </table>
13     <script type="text/javascript">
14         $(function() {
15             $("#sl").sldatagrid({
16                 columns : [ {
17                     field : "ck",
18                     style : ""
19                 }, {
20                     title : "列1",
21                     field : "col1",
22                     align : "center",
23                     style : "100px;"
24                 }, {
25                     title : "列2",
26                     field : "col2",
27                     align : "center",
28                     style : "100px;"
29                 }, {
30                     title : "",
31                     field : "op",
32                     align : "center",
33                     style : "",
34                     html : "<input type='button' value='编辑' onclick='a()'/><input type='button' value='删除' onclick='b()'/>"
35                 } ],
36                 datas : [ {
37                     "col1" : "列1数据1",
38                     "col2" : "列2数据1"
39                 }, {
40                     "col1" : "列1数据2",
41                     "col2" : "列2数据2"
42                 }, {
43                     "col1" : "列1数据3",
44                     "col2" : "列2数据3"
45                 } ]
46             });
47         });
48         function a() {
49             var rowData = $("#sl").sldatagrid("getClickRow");
50             $.each(rowData, function(i, n) {
51                 alert(i + ":" + n)
52             });
53         }
54         function b() {
55             var rowDatas = $("#sl").sldatagrid("getSelectedRows");
56         }
57     </script>
58 </body>
59 </html>

View Code

API文档

表格属性：

属性名	属性值类型	描述	默认值
class	string	css样式	sldatagrid
style	string	应用到表格整体的样式	auto;
singleSelect	bool	如果为true，则只允许选择一行	false
columns	array	列配置对象	undefined
datas	array	数据	undefined

列属性：

属性名	属性值类型	描述	默认值
title	string	列标题	无
field	string	列字段（"ck"：checkbox列）	无
hidden	bool	是否隐藏	false
align	string	水平位置（"center","left","right"）	"left"
style	string	列样式	无
html	string	自定义html	无

方法：

方法名	参数	返回值	描述
getClickRow	无	行数据对象	var rowData=$("#sl").sldatagrid("getClickRow"); rowData： { "col1" : "列1数据1", "col2" : "列2数据1" }
getSelectedRows	无	行数据对象数据	var rowDatas=$("#sl").sldatagrid("getSelectedRows"); rowDatas： [ {"col1" : "列1数据1", "col2" : "列2数据1"}, {"col1" : "列1数据2", "col2" : "列2数据2"} ]
loadColumns	列数据	无	[{ field:"ck", style:"" },{ title:"列1", field:"col1", align:"center", style:"100px;" },{ title:"列2", field:"col2", align:"center", style:"100px;" },{ title:"", field:"", align:"center", style:"", html:"<input type='button' value='编辑' onclick='a()'/><input type='button' value='删除' onclick='b()'/>" }]
loadDatas	行数据	无	[{ "col1":"列1数据1", "col2":"列2数据1" },{ "col1":"列1数据2", "col2":"列2数据2" }]
insertData	{ index:索引, data:行数据 }	无	$("#dg").sldatagrid("insertData",{ 　　index:0, 　　data:{ 　　　　　　"col1":"列1数据", 　　　　　　"col2":"列2数据" 　　　　　} });
checkRow	行索引	无	使指定行选中 $("#dg").sldatagrid("checkRow",0);
unselectAll	无	无	取消当前页所有行的选中状态 $("#dg").sldatagrid("unselectAll");
getRow	index	所有指定行数据	返回行数据 $("#dg").sldatagrid("getRow",0);