支持IE6的树形节结构TreeTable实际应用案例

Posted 2020-06-16

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.treeTable.js" type="text/javascript"></script>
<link href="default/jquery.treeTable.css" rel="stylesheet" type="text/css" />

<table id="treeTable">
    <tr id="43" pid="0" department_id="43">
        <td>
            <input type="checkbox" value="43" /><img src="default/jinghui.png" />大安
        </td>
    </tr>
    <tr id="7" pid="43" manage_id="7">
        <td>
            <input type="checkbox" value="7" /><img src="default/jingyuan.png" />测试
        </td>
    </tr>
    <tr id="5" pid="43" manage_id="5">
        <td>
            <input type="checkbox" value="5" /><img src="default/jingyuan.png" />张警官
        </td>
    </tr>
    <tr id="47" pid="0" department_id="47">
        <td>
            <input type="checkbox" value="47" /><img src="default/jinghui.png" />自贡市公安局
        </td>
    </tr>
    <tr id="4" pid="47" manage_id="4">
        <td>
            <input type="checkbox" value="4" /><img src="default/jingyuan.png" />管理员
        </td>
    </tr>
    <tr id="50" pid="47" department_id="50">
        <td>
            <input type="checkbox" value="50" /><img src="default/jinghui.png" />信息中心
        </td>
    </tr>
    <tr id="48" pid="47" department_id="48">
        <td>
            <input type="checkbox" value="48" /><img src="default/jinghui.png" />自贡公安局指挥中心
        </td>
    </tr>
    <tr id="49" pid="48" department_id="49">
        <td>
            <input type="checkbox" value="49" /><img src="default/jinghui.png" />招生办
        </td>
    </tr>
    <tr id="9" pid="49" manage_id="9">
        <td>
            <input type="checkbox" value="9" /><img src="default/jingyuan.png" />赵警官
        </td>
    </tr>
    <tr id="46" pid="0" department_id="46">
        <td>
            <input type="checkbox" value="46" /><img src="default/jinghui.png" />沿滩
        </td>
    </tr>
    <tr id="45" pid="0" department_id="45">
        <td>
            <input type="checkbox" value="45" /><img src="default/jinghui.png" />富顺
        </td>
    </tr>
    <tr id="8" pid="45" manage_id="8">
        <td>
            <input type="checkbox" value="8" /><img src="default/jingyuan.png" />富顺用户
        </td>
    </tr>
    <tr id="39" pid="0" department_id="39">
        <td>
            <input type="checkbox" value="39" /><img src="default/jinghui.png" />贡井
        </td>
    </tr>
    <tr id="6" pid="39" manage_id="6">
        <td>
            <input type="checkbox" value="6" /><img src="default/jingyuan.png" />贡井用户
        </td>
    </tr>
    <tr id="38" pid="0" department_id="38">
        <td>
            <input type="checkbox" value="38" /><img src="default/jinghui.png" />自流井
        </td>
    </tr>
</table>
<script type="text/javascript">
    $(function () {
        var option = {
            expandLevel: 6, //默认展开的层次
            beforeExpand: function ($treeTable, id) {
                //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                if ($(‘.‘ + id, $treeTable).length) { return; }
                //这里的html可以是ajax请求
                var html = ‘‘;

                $treeTable.addChilds(html);
            },
            onSelect: function ($treeTable, id) {
                window.console && console.log(‘onSelect:‘ + id);

            }

        };
        $(‘#treeTable‘).treeTable(option);

        /* START 修改时绑定部门*/
        $("#treeTable tr[department_id]").each(function () {

            if ($("#HF_departs_edit").val() != "") {
                var departs1 = $("#HF_departs_edit").val().substr(0, $("#HF_departs_edit").val().length - 1).split(‘|‘);
                for (var j = 0; j < departs1.length; j++) {
                    if (departs1[j] == $(this).find("input[type=checkbox]").val()) {
                        $(this).find("input[type=checkbox]").attr("checked", "checked");
                    }
                }
            }
        });
        /* END 修改时绑定部门*/
        /* START 修改时绑定人员*/
        $("#treeTable tr[manage_id]").each(function () {

            if ($("#HF_managers_edit").val() != "") {
                var managers1 = $("#HF_managers_edit").val().substr(0, $("#HF_managers_edit").val().length - 1).split(‘|‘);
                for (var j = 0; j < managers1.length; j++) {
                    if (managers1[j] == $(this).find("input[type=checkbox]").val()) {
                        $(this).find("input[type=checkbox]").attr("checked", "checked");
                    }
                }
            }
        });
        /* END 修改时绑定人员*/
        $(‘#treeTable‘).click(function () {
            var departs = "";
            var managers = "";
            $("#treeTable tr[department_id] td input[type=checkbox]").each(function () {
                if ($(this).prop(‘checked‘) == true) {
                    departs += $(this).val() + "|";
                    alert(departs)
                }
                $("#HF_departs").val(departs);
            }); //获取选中部门的值

            $("#treeTable tr[manage_id] td input[type=checkbox]").each(function () {
                if ($(this).prop(‘checked‘) == true) {
                    managers += $(this).val() + "|";
                }
                $("#HF_managers").val(managers);
            }); //获取选中人员的值
        });

    });
            
</script>
<input type="hidden" name="HF_departs" id="HF_departs" />
<input type="hidden" name="HF_managers" id="HF_managers" />
<input type="hidden" name="HF_departs_edit" id="HF_departs_edit" />
<input type="hidden" name="HF_managers_edit" id="HF_managers_edit" />

 

实际为：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.treeTable.js" type="text/javascript"></script>
<link href="default/jquery.treeTable.css" rel="stylesheet" type="text/css" />

<%=zNodes %>
<script type="text/javascript">
    $(function () {
        var option = {
            expandLevel: 6, //默认展开的层次
            beforeExpand: function ($treeTable, id) {
                //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                if ($(‘.‘ + id, $treeTable).length) { return; }
                //这里的html可以是ajax请求
                var html = ‘‘;

                $treeTable.addChilds(html);
            },
            onSelect: function ($treeTable, id) {
                window.console && console.log(‘onSelect:‘ + id);

            }

        };
        $(‘#treeTable‘).treeTable(option);

        /* START 修改时绑定部门*/
        $("#treeTable tr[department_id]").each(function () {

            if ($("#HF_departs_edit").val() != "") {
                var departs1 = $("#HF_departs_edit").val().substr(0, $("#HF_departs_edit").val().length - 1).split(‘|‘);
                for (var j = 0; j < departs1.length; j++) {
                    if (departs1[j] == $(this).find("input[type=checkbox]").val()) {
                        $(this).find("input[type=checkbox]").attr("checked", "checked");
                    }
                }
            }
        });
        /* END 修改时绑定部门*/
        /* START 修改时绑定人员*/
        $("#treeTable tr[manage_id]").each(function () {

            if ($("#HF_managers_edit").val() != "") {
                var managers1 = $("#HF_managers_edit").val().substr(0, $("#HF_managers_edit").val().length - 1).split(‘|‘);
                for (var j = 0; j < managers1.length; j++) {
                    if (managers1[j] == $(this).find("input[type=checkbox]").val()) {
                        $(this).find("input[type=checkbox]").attr("checked", "checked");
                    }
                }
            }
        });
        /* END 修改时绑定人员*/
        $(‘#treeTable‘).click(function () {
            var departs = "";
            var managers = "";
            $("#treeTable tr[department_id] td input[type=checkbox]").each(function () {
                if ($(this).prop(‘checked‘) == true) {
                    departs += $(this).val() + "|";
                    alert(departs)
                }
                $("#HF_departs").val(departs);
            }); //获取选中部门的值

            $("#treeTable tr[manage_id] td input[type=checkbox]").each(function () {
                if ($(this).prop(‘checked‘) == true) {
                    managers += $(this).val() + "|";
                }
                $(以上是关于支持IE6的树形节结构TreeTable实际应用案例的主要内容，如果未能解决你的问题，请参考以下文章
 
 实现layui的树形表格treeTable
 ELement-UI之树形表格（treeTable&&treeGrid）
 jquery treeTable插件使用细则
 Spring Boot 入门：集成 treetable 和 zTree 实现树形图
 [Layui]JS实现Layui树形表格treetable演示下载
 jQuery+zTree加载树形结构菜单