表格树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style type="text/css">
.zsw-table-tbody tr td span {
width: 1.5em;
cursor: pointer;
text-indent: 0em;
}
</style>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="width:200px;">标题</th>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>操作</th>
</tr>
</thead>
<tbody id="zsw-tbody" class="zsw-table-tbody">
</tbody>
</table>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="tabletree.js"></script>
<script type="text/javascript">
$(function () {
// $("tr[data-id] td span").removeClass("glyphicon-chevron-down");
// $("tr[data-id] td span").addClass("glyphicon-chevron-right");
loadData();
addClick();
})
function HideTr(trs) {
if (trs.length > 0) {
$.each($(trs), function (i, item) {
//alert($(item).attr("data-id"))
if ($("tr[data-pid='" + $(item).attr("data-id") + "']")) {
$("tr[data-pid='" + $(item).attr("data-id") + "']").hide();
HideTr($("tr[data-pid='" + $(item).attr("data-id") + "']"));
}
if ($(item).find("td:first span").hasClass("glyphicon-chevron-down")) {
$(item).find("td:first span").removeClass("glyphicon-chevron-down");
$(item).find("td:first span").addClass("glyphicon-chevron-right");
}
})
}
}
function addClick() {
var tr = $("tr[data-id]");
$("tr[data-id]").on("click", "td:first > span", function () {
// glyphicon-chevron-right
// glyphicon-chevron-down
var trEle = $(this).parent().parent();
var id = trEle.data("id");
if ($(this).hasClass("glyphicon-chevron-right")) {
$(this).addClass("glyphicon-chevron-down");
$(this).removeClass("glyphicon-chevron-right");
var el = "tr[data-pid='" + id + "']";
$(el).show();
} else {
$(this).removeClass("glyphicon-chevron-down");
$(this).addClass("glyphicon-chevron-right");
$("tr[data-pid='" + id + "']").hide();
HideTr($("tr[data-pid='" + id + "']"));
}
})
$("body").on("change", "input[name='CheckedContent']", function () {
var e = $(this).parent().parent();
if (e.is('[data-id]')) {
if ($(this).is(':checked')) {
//选中
$("tr[data-pid='" + e.data("id") + "']").find("input[name='CheckedContent']").prop("checked", true);
checkChilde($("tr[data-pid='" + e.data("id") + "']"), true)
} else {
//未选中
$("tr[data-pid='" + e.data("id") + "']").find("input[name='CheckedContent']").prop("checked", false);
checkChilde($("tr[data-pid='" + e.data("id") + "']"), false)
}
}
if (e.is('[data-pid]')) {
if ($(this).is(':checked')) {
//选中
//设置父级选中
$("tr[data-id='" + $(e).data("pid") + "']").find("input[name='CheckedContent']").prop("checked", true);
//判断是不是顶级，非顶级，就继续往上走，直到顶级
while ($("tr[data-id='" + $(e).data("pid") + "']").is('[data-pid]')) {
e = $("tr[data-id='" + $(e).data("pid") + "']");
$("tr[data-id='" + $(e).data("pid") + "']").find("input[name='CheckedContent']").prop("checked", true);
}
} else {
//未选中
//判断下级是否已经全部是未选状态
if ($("tr[data-pid='" + $(e).data("pid") + "']").find("input[name='CheckedContent']:checked").length == 0) {
$("tr[data-id='" + $(e).data("pid") + "']").find("input[name='CheckedContent']").prop("checked", false);
while ($("tr[data-id='" + $(e).data("pid") + "']").is('[data-pid]')) {
e = $("tr[data-id='" + $(e).data("pid") + "']");
if ($("tr[data-pid='" + $(e).data("pid") + "']").find("input[name='CheckedContent']:checked").length == 0) {
$("tr[data-id='" + $(e).data("pid") + "']").find("input[name='CheckedContent']").prop("checked", false);
}
}
}
}
}
})
}
function checkChilde(obj, chekcStatus) {
if (obj != null && obj != "" && obj != undefined) {
$.each(obj, function (i, item) {
if ($("tr[data-pid='" + $(item).attr("data-id") + "']")) {
$("tr[data-pid='" + $(item).attr("data-id") + "']").find("input[name='CheckedContent']").prop("checked", chekcStatus);
}
checkChilde($("tr[data-pid='" + $(item).attr("data-id") + "']"), chekcStatus);
})
}
}
var data = [
{
pid: "0"
, id: "1"
, f: "<input type='checkbox' name='CheckedContent' /><img src='1.png' />1行1列"
, t: "1行2列"
, th: "1行3列"
, four: "1.png"
, isShow: true
, child: [
{
pid: "1"
, id: "1.1"
, f: "<input type='checkbox' name='CheckedContent' /><img src='2.png' />1.1行1列"
, t: "1.1行2列"
, th: "1.1行3列"
, isShow: false
, four: "2.png"
, child: []
}
, {
pid: "1"
, id: "1.2"
, f: "<input type='checkbox' name='CheckedContent' /><img src='3.png' />1.2行1列"
, t: "1.2行2列"
, th: "1.2行3列"
, isShow: false
, four: "3.png"
, child: []
}
, {
pid: "1"
, id: "1.3"
, f: "<input type='checkbox' name='CheckedContent' /><img src='4.png' />1.3行1列"
, t: "1.3行2列"
, th: "1.3行3列"
, isShow: false
, four: "4.png"
, child: [
{
pid: "1.3", id: "1.3.1"
, f: "<input type='checkbox' name='CheckedContent' /><img src='1.png' />1.2行1列"
, t: "1.2行2列"
, isShow: false
, four: "1.png"
, th: "1.2行3列"
, child: []
}
, {
pid: "1.3"
, id: "1.3.2"
, f: "<input type='checkbox' name='CheckedContent' /><img src='2.png' />1.2行1列"
, t: "1.2行2列"
, isShow: false
, four: "2.png"
, th: "1.2行3列"
, child: []
}
]
}
]
}
, {
pid: "0"
, id: "2"
, f: "<input type='checkbox' name='CheckedContent' /><img src='3.png' />2行1列"
, t: "2行2列"
, th: "2行3列"
, isShow: false
, four: "3.png"
, child: []
}
, {
pid: "0"
, id: "3"
, f: "<input type='checkbox' name='CheckedContent' /><img src='4.png' />3行1列"
, t: "3行2列"
, th: "3行3列"
, isShow: false
, four: "4.png"
, child: []
}
]
var setGetData = { pid: "pid", id: "id", treeFileName: "f", child: "child" };
var bindData = [
{ filedName: "f" }
, { filedName: "four", html: "<img src='#four#' />" }
, { filedName: "t" }
, { filedName: "th" }
]
function loadData() {
var tbody = $("#zsw-tbody");
tbody.html("");
var html = "";
var level = 0;
//第一级
$.each(data, function (i, item) {
var levelTemp = level;
html = "";
if (item[setGetData.pid] == 0) {
html += '<tr data-id="' + item[setGetData.id] + '">';
} else {
html += '<tr data-id="' + item[setGetData.id] + '" data-pid=' + item[setGetData.pid] + '>';
}
$.each(bindData, function (i2, item2) {
if (item2.filedName == setGetData.treeFileName) {
if (item[setGetData.child] != null && item[setGetData.child] != undefined && item[setGetData.child].length > 0) {
if (item2.html != null && item2.html != "" && item2.html != undefined) {
if (item.isShow) {
html += '<td><span class="glyphicon glyphicon-chevron-down"></span>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
} else {
html += '<td><span class="glyphicon glyphicon-chevron-right"></span>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
}
} else {
if (item.isShow) {
html += '<td><span class="glyphicon glyphicon-chevron-down"></span>' + item[item2.filedName] + '</td>';
} else {
html += '<td><span class="glyphicon glyphicon-chevron-right"></span>' + item[item2.filedName] + '</td>';
}
}
} else {
if (item2.html != null && item2.html != "" && item2.html != undefined) {
html += '<td><span class="glyphicon"></span>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
} else {
html += '<td><span class="glyphicon"></span>' + item[item2.filedName] + '</td>';
}
}
} else {
if (item2.html != null && item2.html != "" && item2.html != undefined) {
html += '<td>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
} else {
html += '<td>' + item[item2.filedName] + '</td>';
}
}
})
html += '<td><input type="checkbox" name="CheckedContent" /></td>';
html += '</tr>';
$(tbody).html($(tbody).html() + html);
loadChildData(item, item[setGetData.child], tbody, level)
level = levelTemp;
})
}
function loadChildData(parentObj, obj, el, level) {
if (obj != null && obj != undefined && obj.length > 0) {
var levelTemp = level + 1;
$.each(obj, function (i, item) {
var html = "";
if (parentObj.isShow) {
html += '<tr style="display: table-row;" data-id="' + item[setGetData.id] + '" data-pid=' + item[setGetData.pid] + '>';
} else {
html += '<tr style="display: none;" data-id="' + item[setGetData.id] + '" data-pid=' + item[setGetData.pid] + '>';
}
$.each(bindData, function (i2, item2) {
if (item2.filedName == setGetData.treeFileName) {
if (item[setGetData.child] != null && item[setGetData.child] != undefined && item[setGetData.child].length > 0) {
if (item2.html != null && item2.html != "" && item2.html != undefined) {
if (item.isShow) {
html += '<td style="text-indent:' + (1.5 * levelTemp) + 'em;"><span class="glyphicon glyphicon-chevron-right"></span>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
} else {
html += '<td style="text-indent:' + (1.5 * levelTemp) + 'em;"><span class="glyphicon glyphicon-chevron-down"></span>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
}
} else {
if (item.isShow) {
html += '<td style="text-indent:' + (1.5 * levelTemp) + 'em;"><span class="glyphicon glyphicon-chevron-down"></span>' + item[item2.filedName] + '</td>';
} else {
html += '<td style="text-indent:' + (1.5 * levelTemp) + 'em;"><span class="glyphicon glyphicon-chevron-right"></span>' + item[item2.filedName] + '</td>';
}
}
} else {
if (item2.html != null && item2.html != "" && item2.html != undefined) {
html += '<td style="text-indent:' + (1.5 * levelTemp) + 'em;"><span class="glyphicon"></span>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
} else {
html += '<td style="text-indent:' + (1.5 * levelTemp) + 'em;"><span class="glyphicon"></span>' + item[item2.filedName] + '</td>';
}
}
} else {
if (item2.html != null && item2.html != "" && item2.html != undefined) {
html += '<td>' + item2.html.replace("#" + item2.filedName + "#", item[item2.filedName]) + '</td>';
} else {
html += '<td>' + item[item2.filedName] + '</td>';
}
}
})
html += '<td><input type="checkbox" name="CheckedContent" /></td>';
html += '</tr>';
$(el).html($(el).html() + html);
loadChildData(item, item[setGetData.child], el, level);
level = levelTemp;
})
}
}
</script>
完整代码，没有整理，没有封装，懒得，后端都写不完了
岁月无情催人老，请珍爱生命，远离代码！！！
浙公网安备 33010602011771号