<!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/[email protected]/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>
完整代码,没有整理,没有封装,懒得,后端都写不完了