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);
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 }
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 : "width:100px;" 24 }, { 25 title : "列2", 26 field : "col2", 27 align : "center", 28 style : "width: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>
API文档
表格属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
| class | string | css样式 | sldatagrid |
| style | string | 应用到表格整体的样式 | width: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:"width:100px;" },{ title:"列2", field:"col2", align:"center", style:"width: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",{ |
| checkRow | 行索引 |
无 | 使指定行选中 $("#dg").sldatagrid("checkRow",0); |
| unselectAll | 无 |
无 | 取消当前页所有行的选中状态 $("#dg").sldatagrid("unselectAll"); |
| getRow | index |
所有指定行数据 | 返回行数据 $("#dg").sldatagrid("getRow",0); |