支持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:; 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

下载附件

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

支持IE6的树形节结构TreeTable
关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...
国人Web前端开发必备干货，一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
MySQL 树形索引结构 B树 B+树
MySQL 树形索引结构 B树 B+树如何评估适合索引的数据结构索引的本质是一种数据结构内存只是临时存储,容量有限且容易丢失数据.因此我们需要将数据放在硬盘上. 在硬盘上进行查询时也就产生了 ...
jQuery 2.0发布，不再支持IE6/7/8
有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...
淘宝天猫网站停止支持IE6、IE7浏览器，你还在用xp吗？
2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...
CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
oracle 树形表结构查询排序
oracle 树形表结构排序 select * from Table start with parentid is null connect by prior id=parentid order SI ...
Java实现遍历N级树形目录结构
最近挺忙,一直在做项目,然后有个树形目录结构需要返回给前端,这里给大家说一下实现的思路. 具体达到的效果类似: 一级目录A: 二级目录A: 三级目录: 四级目录: 文件.txt 二级目录B: 文件1. ...

随机推荐

java中的包有那些？？？
java.util工具包java.sql数据库包java.io输入输出流包java.net网络包java.lang基础包这些是基本的包,还有一些其他的例如集合,反射等的工具包,你可以去查一下java ...
ApplePay高调入华，教你在app里上线ApplePay
ApplePay在中国上线后,就有许多线上app前后脚加入了对其的接入支持,个人比较喜欢的ENJOY也抢在首批接入了ApplePay应用内支付.本文将分享作者的接入经验. ApplePay是苹果公 ...
关于mysql下hibernate实体类字段与数据库关键字冲突的问题
好久没写了,都忘记博客了,趁着现在还在公司,写的东西是经过验证的,不是在家凭记忆力写的,正确率有保障,就说说最近遇到的一件事情吧. 以前一直用的oracle数据库,这次项目我负责的模块所在的系统是用的 ...
java.util Pattern 和 Mathcer
1.测试给定的正则表达式是否匹配输入的字符串,这里该正则表达式只使用一次 private String regex ; private String input; @Before public voi ...
亚马逊副总裁谈Marketplace平台的个性化服务
说到个性化,亚马逊无疑是挖掘与利用数据为消费者打造个性化网购体验的先驱之一.而现在,几乎所有的公司和网站都在利用更加个性化的推荐算法为用户提供更好的购物和浏览体验. 亚马逊近年来尤其重视将其个性化特性 ...
java笔记 chapter1 java是什么，能干什么，有什么，特点，开发环境
一,java是什么二,java能干什么三,java有什么四,java的特点五,java的三大特性:虚拟机,垃圾回收和代码安全六,构建JSE开发环境:下载安装jdk和配置环境变量七,编写并运 ...
【Android 界面效果26】listview android:cacheColorHint,android:listSelector属性作用
ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...
CentOS 7.0启用iptables防火墙
CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.service #停止fir ...
大部分人努力程度之低，根本轮不到拼天赋 [转自w3cschool]
2014-05-31 w3cschool 在过去的三个多月里,每周六一天的心理咨询师的培训课成了我一周中最重要最开心的事情之一.因为国庆节的缘故,从9月中旬到10月中旬培训中心都没有安排课程,因此习惯 ...
BZOJ 3713
Description 斐波那契数列的定义为:k=0或1时,F[k]=k:k>1时,F[k]=F[k-1]+F[k-2].数列的开头几项为0,1,1,2,3,5,8,13,21,34,55,…你 ...

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

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

随机推荐

热门专题