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

<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() + "|";
                }
                $("#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" />

css

.tree_table{border-collapse:collapse;border-spacing:0px;border: medium none;}
.tree_table tr{vertical-align:middle;height:30px;line-height:30px;border: medium none;}
.tree_table tr td{padding-left:10px;vertical-align:middle;border: medium none;}
.tree_table tr td input{vertical-align:middle;margin-left:10px}
.tree_table tr td img {vertical-align:middle;margin:0 5px}
.tree_table .default_node, .tree_table .default_active_node {vertical-align:middle;width:30px;height:30px;line-height:30px;border: medium none; margin: 0; padding: 0;display: inline-block;}
.tree_table .default_active_node {cursor: pointer;}
.tree_table .default_leaf{background:url(allbgs.png) no-repeat -33px -5px;width:30px;}/*T线*/
.tree_table .default_last_leaf{background:url(allbgs.png) no-repeat -120px -5px;width:30px;}/*折线*/
.tree_table .default_vertline{background:url(allbgs.png) no-repeat -57px -5px;width:30px;}/*竖线*/

.tree_table .default_open, .tree_table .default_hover_open{vertical-align:middle;background:url(allbgs.png) no-repeat -0px -5px;width:30px;}
.tree_table .default_shut, .tree_table .default_hover_shut{vertical-align:middle;background:url(allbgs.png) no-repeat -87px -5px;width:30px;}
.tree_table .default_last_shut, .tree_table .default_hover_last_shut{background:url(allbgs.png) no-repeat -158px -5px;width:30px;}
.tree_table .default_last_open, .tree_table .default_hover_last_open{background:url(allbgs.png) no-repeat -203px -5px;width:34px;}

asp.net后台代码

由两张表构成，一张部门表，一张人员表，人员和部门的关系为：人员所属部门

private string TreeTable()
        {
            BLL.department bll = new BLL.department();
            DataTable dt = bll.GetList(0);//获取所有部门
            BLL.manager blluser = new BLL.manager();
            StringBuilder JsonData = new StringBuilder();
            JsonData.Append("<table id="treeTable">
");
            foreach (DataRow dr in dt.Rows)
            {
                JsonData.Append("<tr id=" + dr["id"].ToString() + "  pId=" + dr["parent_depart"].ToString() + " department_id=" + dr["id"].ToString() + ">
");
                JsonData.Append("<td><input type=checkbox  value=" + dr["id"].ToString() + " /><img src="../skin/default/jinghui.png" />" + dr["depart_name"].ToString() + "</td>
");
                JsonData.Append("</tr>
");
                //JsonData.Append("{id:" + dr["id"].ToString() + ",department_id:"department_id",pId:" + dr["parent_depart"].ToString() + ",name:"" + dr["depart_name"].ToString() + "",open:true,icon:"../skin/default/jinghui.png"},
");
                DataTable dtuser = blluser.GetList(0, "department_id=" + dr["id"].ToString(), "  id desc").Tables[0];
                foreach (DataRow rowuser in dtuser.Rows)
                {
                    JsonData.Append("<tr id=" + rowuser["id"].ToString() + "  pId=" + rowuser["department_id"].ToString() + " manage_id=" + rowuser["id"].ToString() + ">
");
                    JsonData.Append("<td><input type=checkbox  value=" + rowuser["id"].ToString() + " /><img src="../skin/default/jingyuan.png" />" + rowuser["real_name"].ToString() + "</td>
");
                    JsonData.Append("</tr>
");
                    //JsonData.Append("{id:" + rowuser["id"].ToString() + ",manage_id:"manage_id",pId:" + rowuser["department_id"].ToString() + ",name:"" + rowuser["real_name"].ToString() + "",open:true,icon:"../skin/default/jingyuan.png"},
");

                }

            }
            JsonData.Append("</table>
");
            
            return JsonData.ToString();
        }

protected string zNodes="";
//页面加载事件
protected void Page_Load(object sender, EventArgs e)
{
     if (!Page.IsPostBack)
     {
          this.zNodes = TreeTable();
     }
}

TreeTable基础讲解：http://www.cnblogs.com/qigege/p/5213639.html

下载附件