<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - Async</TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="css/demo.css" type="text/css">

    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>

</HEAD>

<BODY>

    <ul id="treeDemo" class="ztree"></ul>

    <button type="button" class="save">保存</button>

    <table>

        <tr data_id="1">

            <td class="title"><a href="javascript:void(0)" class="update">修改</a><a href="javascript:void(0)" class="delete">删除</a></td>

            <td class="filePath">n1/n1.n1/n1.n1.n1/n1.n1.n1.n3<br>n3/n3.n2</td>

        </tr>

        <tr data_id="2">

            <td><a href="javascript:void(0)" class="update">修改</a><a href="javascript:void(0)" class="delete">删除</a></td>

            <td class="filePath">n1/n1.n1/n1.n1.n1/n1.n1.n1.n4<br>n3/n3.n3/n3.n3.n1/n3.n3.n1.n2</td>

        </tr>

    </table>

    <SCRIPT type="text/javascript">

        <!--

        var setting = {

            check: {

                enable: true

            },

            async: {

                enable: true,

                url:"demo/cn/asyncData/getNodes.php",

                autoParam:["id", "name=n", "level=lv"],

                otherParam:{"otherParam":"zTreeAsyncTest"},

                dataFilter: filter

            },

            callback: {

                onAsyncSuccess: onAsyncSuccess,

                onExpand: onExpand,

                onCheck: onCheck,

                onNodeCreated: onNodeCreated

            }

        };

        var zTreeObj;

         $(document).ready(function(){

            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

        });

        function filter(treeId, parentNode, childNodes) {

            if (!childNodes)

                return null;

            childNodes.forEach(function(childNode){

                // 计算路径

                var path = '';

                if(!parentNode){

                    path = childNode.name;

                }else{

                    path = parentNode.filePath + '/' + childNode.name;

                }

                childNode.filePath = path;

                // 判断是否已选中

                var checked = false;

                var halfCheck = false;

                var chkDisabled = false;

                $(".filePath").each(function(i, item){

                    var filePathArray = $(item).html().trim().split('<br>');

                    filePathArray.forEach(function(filePath){

                        filePath = filePath.trim();

                        if(filePath == childNode.filePath){// 全匹配（叶节点）

                            checked = true;

                            if(jQuery.inArray(filePath,filterFilePathArray) < 0){

                                chkDisabled = true;

                            }

                        }else if(filePath.indexOf(childNode.filePath) == 0){// 部分匹配（父节点）

                            checked = true;

                            // halfCheck = true;

                        }

                    });

                });

                childNode.checked = checked;

                childNode.halfCheck = halfCheck;

                childNode.chkDisabled = chkDisabled;

            });

            return childNodes;

        }

        function onAsyncSuccess(event, treeId, treeNode, msg) {

            console.log(treeNode);

        }

        function onExpand(event, treeId, treeNode) {

            // console.log(treeNode);

        };

        function onCheck(event, treeId, treeNode) {

            // console.log(treeNode);

        };

        function onNodeCreated(event, treeId, treeNode) {

            if(treeNode.checked){

                zTreeObj.expandNode(treeNode, true, false, false, false);

            }

        };

        //-->

    </SCRIPT>

    <SCRIPT type="text/javascript">

        <!--

        var filterFilePathArray = [];

        var nowUpdateIndex = -1;

        $(document).on("click", ".delete", function(){

            $(this).parents("tr").remove();

            zTreeObj.destroy();

            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

        });

        $(document).on("click", ".update", function(){

            nowUpdateIndex = $(this).parents("tr").attr("data_id");

            filterFilePathArray = [];

            var filePathArray = $(this).parents("td").siblings(".filePath").text().html().split('<br>');

            filePathArray.forEach(function(filePath){

                filePath = filePath.trim();

                filterFilePathArray.push(filePath);

            });

            zTreeObj.destroy();

            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

        });

        $(document).on("click", ".save", function(){

            var str = '';

            var nodes = zTreeObj.getCheckedNodes();

            if(!!nodes){

                var i = 0;

                nodes.forEach(function(node){

                    if(!node.isParent){

                        if(i == 0){

                            str = node.filePath;

                        }else{

                            str = str + '<br>' + node.filePath;

                        }

                        i++;

                    }

                });

            }

            if(str==''){

                return;

            }

            if(nowUpdateIndex<=0){

                var id = $("tr").length + 1;

                id = id + '.' + Math.floor(Math.random()*100+1);

                $("table").append("<tr data_id='"+id+"'><td><a href='javascript:void(0)' class='update'>修改</a><a href='javascript:void(0)' class='delete'>删除</a></td><td class='filePath'>"+str+"</td></tr>");

            }else{

                $("<tr data_id='"+nowUpdateIndex+"'><td><a href='javascript:void(0)' class='update'>修改</a><a href='javascript:void(0)'' class='delete'>删除</a></td><td class='filePath'>"+str+"</td></tr>").replaceAll("tr[data_id='"+nowUpdateIndex+"']");

            }

            zTreeObj.destroy();

            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);

        });

        //-->

    </SCRIPT>

</BODY>

</HTML>

ztree-demo 2的更多相关文章

  1. jQurey zTree Demo 3.5

    https://jeesite.gitee.io/front/jquery-ztree/3.5/demo/cn/index.html

  2. ztree : 增删改功能demo与自定义DOM功能demo的结合

    最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把 ...

  3. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  4. zTree学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 简单Ztree的实现————不连接数据库版

    Ztree可以去官网去下载相应的版本和API,我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题,稍后我会在博客中写JS的异步问题, 我这里用的是MVC4.0,好了正文开始,上代码 ...

  6. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  7. (菜鸟要飞系列)四，基于Asp.Net MVC5的后台管理系统（zTree绑定Json数据生成树）

    上一次老师让我们用递归将中国城市镇县四级联动 显示在树上,那个时候就知道可以显示在zTree上,可是苦于对Json的不了解,对zTree的Api的不了解,一直没有做出来,只好将递归算法显示在了窗体上, ...

  8. jquery——zTree, 完美好用的树插件

    Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. _______________________________________________ ...

  9. 使用zTree和json构建简单树节点

    我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...

  10. 【Ztree】前台展示多级菜单，后台配置方法

    第一步.前台HTML页面. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...

随机推荐

  1. 【USACO 3.1】Stamps （完全背包）

    题意:给你n种价值不同的邮票,最大的不超过10000元,一次最多贴k张,求1到多少都能被表示出来?n≤50,k≤200. 题解:dp[i]表示i元最少可以用几张邮票表示,那么对于价值a的邮票,可以推出 ...

  2. 马虎将classname加到了id属性中，造成报错

    今天做了一个瀑布流布局的小例子,自己在写代码的过程中一直报cannot read property 'style' of null,百度之后说是页面还没有加载完,但是我看了代码是写在window.on ...

  3. SQLMap Tamper Scripts Update 04/July/2016

    SQLMap Tamper Scripts Update apostrophemask.py Replaces apostrophe character with its UTF-8 full wid ...

  4. Javascript模板引擎插件收集

    为什么要用JS的模板引擎,打个比方,如果你要通过接口绑定数据,最终要加进去DOM中,我们普遍的做法就是不断的+,最终append进去,但是这样的做法就是后续人员压根就没法维护.所以这时模板引擎出来了. ...

  5. SVD的几何意义，以及在去噪，推荐系统中的应用

    很多文章说到奇异值分解的时候总是大概罗列下它的功能,并没有对功能及物理意义进行过多的阐述,现在我来对奇异值进行整理一下. 一 奇异值分解 对任意的矩阵A∈Fmn,rank(A)=r(矩阵的秩),总可以 ...

  6. 网站中使用echart

    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...

  7. WinForm------DateEdit属性设置

    1.只能选择年份属性设置                       

  8. thinkphp3.2和phpexcel导入

    先整个最基础的代码,理解了这个,后面的就非常简单了 $file_name= './Upload/excel/123456.xls'; import("Org.Util.PHPExcel&qu ...

  9. [Java] JSP笔记 - 自定义标签

    自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...

  10. Codeforces Round 319 # div.1 & 2 解题报告

    Div. 2 Multiplication Table (577A) 题意: 给定n行n列的方阵,第i行第j列的数就是i*j,问有多少个格子上的数恰为x. 1<=n<=10^5, 1< ...