sldatagrid
效果：
sldatagrid.js
(function($) {
function loadColumns(sldatagrid, columns) {
$(sldatagrid).empty();
$(sldatagrid).append("<thead><tr></tr></thead><tbody></tbody>");
var thead = $("thead", sldatagrid);
var tr = $("tr", thead);
$.each(columns, function(i, n) {
var settings = {};
$.extend(settings, $.fn.sldatagrid.column, n);
if (settings.html == "") {
if (settings.field == "ck") {
$("<th class='sldatagrid-header-check' field='ck' align='center' style='" + settings.style + "'></th>").data("settings", settings).appendTo(tr);
$("<input>", {
type : 'checkbox',
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
if (this.checked) {
$.each(thead.next().children(), function() {
$(this).addClass("sldatagrid-row-selected");
$("td :checkbox", this).attr("checked", "checked");
});
} else {
$.each(thead.next().children(), function() {
$(this).removeClass("sldatagrid-row-selected");
$("td :checkbox", this).removeAttr("checked");
});
}
} else {
return false;
}
}
}).appendTo($("th", tr));
} else {
if (settings.hidden) {
$("<th class='sldatagrid-header-cell' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + ";display:none;'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
} else {
$("<th class='sldatagrid-header-cell' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
}
}
} else {
$("<th class='sldatagrid-header-custom' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
}
});
}
function loadDatas(sldatagrid, datas) {
$("tbody", sldatagrid).remove();
$(sldatagrid).append("<tbody></tbody>");
var thead = $("thead", sldatagrid);
var theadtr = $("tr", thead);
var tbody = $("tbody", sldatagrid);
$.each(datas, function(i, n) {
n.ck = false;
var tr = $("<tr>", {
mouseenter : function() {
if (!$(this).hasClass("sldatagrid-row-selected")) {
$(this).addClass("sldatagrid-row-enter");
}
$(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;
},
mouseleave : function() {
$(this).removeClass("sldatagrid-row-enter");
},
click : function() {
}
}).data("bindData", n).appendTo(tbody);
$("th", theadtr).each(function() {
var field = $(this).attr('field');
if ($(this).data("settings").hidden) {
$("<td>", {
"class" : "sldatagrid-row-cell",
style : "display:none;",
click : function() {
}
}).text(n[field]).appendTo(tr);
} else {
if ($(this).data("settings").html == undefined || $(this).data("settings").html.length == 0) {
if (field == "ck") {
$("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
$("<input>", {
type : "checkbox",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
tr.toggleClass("sldatagrid-row-selected");
if (tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", tr).attr("checked", "checked");
} else {
$("td :checkbox", tr).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
} else {
return false;
}
}
}
}).appendTo($("td", tr));
} else {
$("<td>", {
"class" : "'sldatagrid-row-cell",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
$(this).parent().toggleClass("sldatagrid-row-selected");
if ($(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $(this).parent()).attr("checked", "checked");
} else {
$("td :checkbox", $(this).parent()).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!$(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
}
}
}
}).text(n[field]).appendTo(tr);
}
} else {
$("<td>", {
"class" : "sldatagrid-row-custom",
click : function() {
}
}).appendTo(tr).html($(this).data("settings").html);
}
}
});
});
}
function insertData(sldatagrid, index, data) {
var thead = $("thead", sldatagrid);
var theadtr = $("tr", thead);
var tbody = $("tbody", sldatagrid);
var tr = $("<tr>", {
mouseenter : function() {
if (!$(this).hasClass("sldatagrid-row-selected")) {
$(this).addClass("sldatagrid-row-enter");
}
$(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;
},
mouseleave : function() {
$(this).removeClass("sldatagrid-row-enter");
},
click : function() {
}
}).data("bindData", data);
if ($("tr", tbody).length > 0) {
$("tr", tbody).eq(index).before(tr);
} else {
tbody.append(tr);
}
$("th", theadtr).each(function() {
var field = $(this).attr('field');
if ($(this).data("html") == undefined || $(this).data("html").length == 0) {
if (field == "ck") {
$("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
$("<input>", {
type : "checkbox",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
tr.toggleClass("sldatagrid-row-selected");
if (tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", tr).attr("checked", "checked");
} else {
$("td :checkbox", tr).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
} else {
return false;
}
}
}
}).appendTo($("td", tr));
} else {
$("<td>", {
"class" : "'sldatagrid-row-cell",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
$(this).parent().toggleClass("sldatagrid-row-selected");
if ($(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $(this).parent()).attr("checked", "checked");
} else {
$("td :checkbox", $(this).parent()).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!$(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
}
}
}
}).text(data[field]).appendTo(tr);
}
} else {
$("<td>", {
"class" : "sldatagrid-row-custom",
click : function() {
}
}).appendTo(tr).html($(this).data("settings").html);
}
});
}
function checkRow(sldatagrid, index) {
var tr = $("tbody tr", sldatagrid);
if ($(sldatagrid).data("settings").singleSelect) {
tr.removeClass("sldatagrid-row-selected");
$("td :checkbox", tr).removeAttr("checked");
}
tr = tr.eq(index);
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
}
function unselectAll(sldatagrid) {
var tr = $("tbody tr", sldatagrid);
tr.removeClass("sldatagrid-row-selected");
$("td :checkbox", tr).removeAttr("checked");
}
$.fn.sldatagrid = function(options, params) {
if ($.type(options) == "string") {
var method = $.fn.sldatagrid.methods[options];
if (method) {
return method(this, params);
} else {
return null;
}
}
var settings = {};
$.extend(settings, $.fn.sldatagrid.defaults, options);
$(this).data("settings", settings).data("property", $.fn.sldatagrid.property);
$(this).attr({
border : 0,
cellpadding : 0,
cellspacing : 0,
"class" : settings.cssClass,
style : settings.style
});
if (settings.columns) {
loadColumns(this, settings.columns);
}
if (settings.datas) {
loadDatas(this, settings.datas);
}
};
$.fn.sldatagrid.methods = {
getClickRow : function(sldatagrid) {
return $("tbody tr", sldatagrid).eq($(sldatagrid).data("property").enterRowIndex).data("bindData");
},
getSelectedRows : function(sldatagrid) {
var selectedRows = new Array();
$("tbody tr.sldatagrid-row-selected", sldatagrid).each(function(i) {
selectedRows[i] = $(this).data("bindData");
});
return selectedRows;
},
loadColumns : function(sldatagrid, columns) {
loadColumns(sldatagrid, columns);
},
loadDatas : function(sldatagrid, datas) {
loadDatas(sldatagrid, datas);
},
insertData : function(sldatagrid, params) {
insertData(sldatagrid, params.index, params.data);
},
checkRow : function(sldatagrid, index) {
checkRow(sldatagrid, index);
},
unselectAll : function(sldatagrid) {
unselectAll(sldatagrid);
},
getRow : function(sldatagrid, index) {
return $("tbody tr", sldatagrid).eq(index).data("bindData");
}
};
$.fn.sldatagrid.property = {
enterRowIndex : -1
};
$.fn.sldatagrid.defaults = {
cssClass : "sldatagrid",
style : "",
singleSelect : false,
columns : undefined,
datas : undefined
};
$.fn.sldatagrid.column = {
title : "",
field : "",
hidden : false,
align : "left",
style : "",
html : ""
};
})(jQuery);sldatagrid.css
table,thead,tr,th,td,input {
margin:;
padding:;
font-family: verdana;
font-size: 12px;
}
.sldatagrid {
border: solid 1px #B4B4B4;
border-collapse: collapse;
margin: 1px 0 0 0;
}
.sldatagrid tr th {
height: 27px;
border: solid 1px #B4B4B4;
background-color: #F4F4F4;
word-break: keep-all;
white-space: nowrap;
padding: 1px 5px 1px 5px;
}
.sldatagrid tr td {
height: 25px;
border: solid 1px #B4B4B4;
word-break: keep-all;
white-space: nowrap;
padding: 0 5px 0 5px;
}
.sldatagrid-header-check {
width: 20px;
}
.sldatagrid-header-custom {
width: auto;
}
.sldatagrid-header-cell {
min-width: 50px;
}
.sldatagrid-row-check {
width: 20px;
}
.sldatagrid-row-custom {
}
.sldatagrid-row-cell {
padding: 0 5px 0 5px;
width: auto;
}
.sldatagrid-row-selected {
background-color: #FCFCB6;
}
.sldatagrid-row-enter {
background-color: #DDFAFB;
}testsldatagrid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="sldatagrid.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="sldatagrid.js"></script>
</head>
<body>
<table id="sl">
</table>
<script type="text/javascript">
$(function() {
$("#sl").sldatagrid({
columns : [ {
field : "ck",
style : ""
}, {
title : "列1",
field : "col1",
align : "center",
style : "width:100px;"
}, {
title : "列2",
field : "col2",
align : "center",
style : "width:100px;"
}, {
title : "",
field : "op",
align : "center",
style : "",
html : "<input type='button' value='编辑' onclick='a()'/><input type='button' value='删除' onclick='b()'/>"
} ],
datas : [ {
"col1" : "列1数据1",
"col2" : "列2数据1"
}, {
"col1" : "列1数据2",
"col2" : "列2数据2"
}, {
"col1" : "列1数据3",
"col2" : "列2数据3"
} ]
});
});
function a() {
var rowData = $("#sl").sldatagrid("getClickRow");
$.each(rowData, function(i, n) {
alert(i + ":" + n)
});
}
function b() {
var rowDatas = $("#sl").sldatagrid("getSelectedRows");
}
</script>
</body>
</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); |