表格树

其他 2018-10-25 19:18:20 阅读次数: 0 
<!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>

　　完整代码，没有整理，没有封装，懒得，后端都写不完了

猜你喜欢

转载自www.cnblogs.com/zhoushangwu/p/9851899.html
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022