思享工具箱

jQuery之自定义datagrid控件

摘要：
$(sldatagrid).data("settings").singleSelect){83tr.toggleClass("sldatagrid-row-selected");84if(tr.hasClass("sldatagrid-row-selected")){85$("td:checkbox",tr).attr("checked","checked");86}else{87$("td:checkbox",tr).removeAttr("checked");88}89if($("trtdinput:checked",tbody).length==$("tr",tbody).length){90$(":checkbox",theadtr).attr("checked","checked");91}else
sldatagrid

效果：

jQuery之自定义datagrid控件第1张

sldatagrid.js

1 (function($) {
2     functionloadColumns(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   field='ck'   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   field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + ";display:none;'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
36                     } else{
37                         $("<th   field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
38 }
39 }
40             } else{
41                 $("<th   field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
42 }
43 });
44 }
45     functionloadDatas(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   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     functioninsertData(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   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     functioncheckRow(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     functionunselectAll(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 = newArray();
283             $("tbody tr.sldatagrid-row-selected", sldatagrid).each(function(i) {
284                 selectedRows[i] = $(this).data("bindData");
285 });
286             returnselectedRows;
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         functiona() {
49             varrowData =$("#sl").sldatagrid("getClickRow");
50 $.each(rowData, function(i, n) {
51 alert(i + ":" +n)
52 });
53 }
54         functionb() {
55             varrowDatas =$("#sl").sldatagrid("getSelectedRows");
56 }
57     </script>
58 </body>
59 </html>
View Code

API文档

表格属性：
属性名属性值类型描述默认值
classstringcss样式sldatagrid
stylestring应用到表格整体的样式auto;
singleSelectbool如果为true，则只允许选择一行false
columnsarray列配置对象undefined
datasarray数据undefined
列属性：
属性名属性值类型描述默认值
titlestring列标题无
fieldstring列字段（"ck"：checkbox列）无
hiddenbool是否隐藏false
alignstring水平位置（"center","left","right"）"left"
stylestring列样式无
htmlstring自定义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);

标签：#datagrid#jquery | 浏览：875 | 发布日期：

免责声明：文章转载自《jQuery之自定义datagrid控件》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Java使用Aspose-Words实现Word转换Pdf超图三维数据格式解析下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

JQuery点击行tr实现checkBox选中与未选中切换

点击table中的行时checkbox选中，再次点击取消。如何将tr作为模板插入的话可以在每一行tr注册点击事件 <tr onclick=" $($(this).children()[0]).children()[0].checked = ! $($(this).children()[0]).children()[0].checked" >...

Dialog基于jQuery弹出层对话框插件

原理很简单，通过JS动态构建一个div层，将其插入到body中，然后通过调整position的CSS属性为absolute或fixed，使其脱离原来的文档流的位置。再通过适当的加工美化就成了。 <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 -...

jQuery（一）

一、什么是 jQuery jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。 js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。 关于jQuery的相关资料： 官网：http://jquery.com/ 官网API文档：http://api.jquery.com/ 汉化API...

jquery或者javascript将list转array数组_快速开发平台

jquery或者javascript将list转array数组，软件开发平台软件开发过程中经常会碰到后台传过来的list数据模型要转换成array数组的情况，那么我们该怎么去做呢？ 如上图是转换后的表现形式。 解决方案，for循环进行赋值转换。如下代码段： $.getJSON('GetSCKBNum', function (da...

jquery模拟点击事件

在某些情况下，我们需要自动执行一些点击事件。比如：一些 tab 一般是通过点击事件来加载不同的数据内容。 而如果要页面加载完直接显示第三个 tab，怎么办呢？此时就需要用到 jQuery 的模拟点击事件。 要用到 jQuery 的 trigger 方法。 如： $('#btn').trigger("click"); 会自动执行 id 为 btn 的 cli...

jQuery 根据value设置radio默认选中

jQuery 根据value设置radio默认选中: HTML： <input type="radio" name="type" value="1" checked=""> 132<input type="radio" name="type" value="2">456 JS: var sex = 2;$(":radio[name=...

最新文章

随机推荐

思享工具箱导航