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

2022-10-03 09:00:06

<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:; padding:;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();//获取所有部门

            BLL.manager blluser = new BLL.manager();

            StringBuilder JsonData = new StringBuilder();

            JsonData.Append("<table id=\"treeTable\">\r\n");

            foreach (DataRow dr in dt.Rows)

            {

                JsonData.Append("<tr id=" + dr["id"].ToString() + "  pId=" + dr["parent_depart"].ToString() + " department_id=" + dr["id"].ToString() + ">\r\n");

                JsonData.Append("<td><input type=checkbox  value=" + dr["id"].ToString() + " /><img src=\"../skin/default/jinghui.png\" />" + dr["depart_name"].ToString() + "</td>\r\n");

                JsonData.Append("</tr>\r\n");

                //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\"},\r\n");

                DataTable dtuser = blluser.GetList(, "department_id=" + dr["id"].ToString(), "  id desc").Tables[];

                foreach (DataRow rowuser in dtuser.Rows)

                {

                    JsonData.Append("<tr id=" + rowuser["id"].ToString() + "  pId=" + rowuser["department_id"].ToString() + " manage_id=" + rowuser["id"].ToString() + ">\r\n");

                    JsonData.Append("<td><input type=checkbox  value=" + rowuser["id"].ToString() + " /><img src=\"../skin/default/jingyuan.png\" />" + rowuser["real_name"].ToString() + "</td>\r\n");

                    JsonData.Append("</tr>\r\n");

                    //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\"},\r\n");

                }

            }

            JsonData.Append("</table>\r\n");

            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

下载附件

码农公寓

相关文章