支持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\">\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(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() + ">\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

下载附件

时间： 2024-10-24 01:18:53

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

淘宝天猫网站停止支持IE6、IE7浏览器，你还在用xp吗？

2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持IE6.IE7浏览器.如果你现在还是xp系统,没有升级你的浏览器的话,那么现在你打开淘宝或者天猫是这样的: (IE6浏览器打开的淘宝网首页界面) (IE6浏览器打开的天猫首页界面) (IE7浏览器打开的淘宝网首页界面) (IE7浏览器打开的天猫首页界面) 当然windows xp用户并不是所有人都没有

fixedBox固定div漂浮代码 支持ie6以上大部分浏览器

fixedBox固定div漂浮代码 支持ie6以上大部分浏览器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l

SSL证书不支持IE6 全球可信SSL证书

不支持IE6的SSL证书算不算的上全球可信的SSL证书?经过测试某品牌SSL证书竟然在IE6下https竟然无法访问,一时间彻底晕倒,虽然IE6已经快被淘汰了,但不可否认现在还有大量用户在使用Winxp系统使用IE6浏览器,如好多银行系统,他们都的网银系统好多只能在IE6下面才能工作,这让这一部分用户情何以堪,IE5以前的浏览器如果不支持还可以理解,不支持IE6是不是有点大逆不道呢?够买SSL证书,还需要多方了解,切不可追求一味低价,本说明只代表个人观点. 特别申明: 中国证书CHINASSL?

菜单数据（树形）结构的使用-- ---数据的列存储转换为行存储

一.菜单数据表中的存储结构 二.转换后的数据结构 三. 转换过程 1.确定菜单数据的最大级别 /// <summary> /// 获得Nature定义的最大目录级别,以便于确定Nature的DataTable表结构中的列数目 /// </summary> /// <returns></returns> public int GetMaxNatureLevel() { if (dtNature == null && dtNature.Rows.

jQuery 2.0发布，不再支持IE6/7/8

有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最新的jQuery库,导致突然换成2.0版本时,出现了一些没有关注的问题! 关于jQuery 2.0不再对IE6/7/8三个版本进行支持,我认为,使用jquery1.9版本好了,(我测试jquery1.11版本都是是支持IE8,2.0版本开始就不支持了! ). 等以后抛弃了IE8,我想那个时候,我们的

jQuery UI 1.10不再支持IE6，jQuery UI 1.11不再支持IE7

jQuery UI 1.10 Upgrade Guide(升级指南)中指出 jQuery UI 1.10 Removed support for IE6 IE6 usage has dropped to a low enough point that jQuery UI no longer finds it necessary to support. As of 1.10.0, some portions of jQuery UI may not work properly in IE6. If

CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器

你是否也在找ie透明背景的css?很多时候我们网页可能会用到透明的效果,比如一般半透明的白色背景,可能在ie7以上版本没问题,但是现在ie6和ie7的用户非常多,我们不得不考虑,可能出现这种问题时,大家可能更多是用一张半透明图片处理,当然我们的原则是能用代码解决的坚决不用图片,其中缘由就不细细道来.请直接看效果.子曰去哪是使用Windows Virtual PC中Windows XP Mode ie6测试所以可以保证原滋原味支持ie6这个奇葩! 纯css透明背景 效果演示 黑色透明背景白色透明背

css 制作三角形图标 不支持IE6

.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(0, 224, 255, 1); border-right: 4px solid rgb(0, 255, 10); border-top: 4px solid #ff0; border-bottom: 4px solid #ca0309; } 效果: 把10px改成0后: 去掉border-top这一句: 把border-lef

支持IE6、IE7、IE8等低端浏览器的简化版vue

最近研究Vue的底层原理,写了一个简化版的Vue,可以在支持IE6.IE7.IE8等低端浏览器运行.由于低端浏览器不支持对象属性定义,所以设置属性不支持直接赋值,需要调用虚拟机实例的set方法.目前只实现了基础的方法,后续继续完善! index.html <!DOCTYPE html> <html> <head> <title>简化版Vue</title> <script> window.onerror=function(){ ret