效果：
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);