zTree树插件的小例子

曾经终败给现在 2022-08-07 13:47 154阅读 0赞

var setting = \{  
        check: \{  
            enable: true,                    //是否显示checkbox  
            chkboxType: \{"Y":"", "N":""\}            //多选框选中时触发的事件 无父节点子节点的关联  
                                    //Y 属性定义 checkbox 被勾选后的情况；  
                                    //N 属性定义 checkbox 取消勾选后的情况；  
                                    //"p" 表示操作会影响父级节点；  
                                    //"s" 表示操作会影响子级节点。  
        \},  
        view: \{  
            dblClickExpand: false,  
            showIcon: false,                //是否显示图标  
            showLine:false                    //是否显示层次线  
        \},  
        data: \{  
            simpleData: \{  
                enable: true                //简单的数据格式  
            \}  
        \},  
        async: \{                        //异步加载信息  
            enable: true,  
            url:ctx+"/category/getIndustryNodes.json",  
            autoParam:\["id", "name", "pId"\],          
            otherParam:\{"otherParam":"zTreeAsyncTest"\},  
            dataFilter: filter  
        \},  
        callback: \{  
            beforeClick: beforeClick,                //点击前调用的函数  
            onCheck:onCheck                          
        \}  
    \};  
  
    function beforeClick(treeId, treeNode) \{  
        var zTree = $.fn.zTree.getZTreeObj("categoryTree");  
        zTree.checkNode(treeNode, !treeNode.checked, null, true);  
        return false;  
    \}  
      
    function onCheck(e, treeId, treeNode) \{  
        var zTree = $.fn.zTree.getZTreeObj("categoryTree"),  
        nodes = zTree.getCheckedNodes(true),                //选中的节点对象集合  
        name = "",ids="";  
          
        for (var i=0, l=nodes.length; i<l; i++) \{  
            name += nodes\[i\].name + ",";  
            ids+=nodes\[i\].id + ",";  
        \}  
        if (name.length > 0 ) name = name.substring(0, name.length-1);  
        if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);  
        var showObj = $("\#categoryIds");  
        var hideObj = $("\#ids");  
        showObj.attr("value", name);  
        hideObj.attr("value",ids);  
    \}  
      
    function showMenu() \{  
        $("\#menuContent").css(\{left:"148px", top:"227px"\}).slideDown("fast");  
        $("body").bind("mousedown", onBodyDown);  
    \}  
    function hideMenu() \{  
        $("\#menuContent").fadeOut("fast");  
        $("body").unbind("mousedown", onBodyDown);  
    \}  
    function onBodyDown(event) \{  
        if (!(event.target.id == "menuBtn" || event.target.id == "categoryIds" || event.target.id == "menuContent" || $(event.target).parents("\#menuContent").length>0)) \{  
            hideMenu();  
        \}  
    \}  
    function filter(treeId, parentNode, childNodes) \{  
        if (!childNodes) return null;  
        for (var i=0, l=childNodes.length; i<l; i++) \{  
            childNodes\[i\].name = childNodes\[i\].name.replace(/\\.n/g, '.');  
        \}  
        return childNodes;  
    \}  
    $(document).ready(function()\{  
        $.fn.zTree.init($("\#categoryTree"), setting);  
    \});

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 zTree 树插件异步加载地区数据

之前使用zTree树插件实现全国五级地区点击后加载。今天记录使用zTree 树插件异步加载地区数据。还是上次的需求：[http://blog.csdn.net/li\_ya\_

待我称王封你为后i/ 2024年02月18日 18:07/ 0 赞/ 14 阅读

相关 (礼拜四log)zTree插件扩展

辛辛苦苦的码了一个礼拜的成果。。。单选框： <%@ tag language="java" pageEncoding="UTF-8"%> <%@ incl

╰半橙微兮°/ 2022年08月21日 11:41/ 0 赞/ 128 阅读

相关 zTree树插件的小例子

var setting = \{ check: \{ enable: true, //是否

曾经终败给现在/ 2022年08月07日 13:47/ 0 赞/ 155 阅读

相关插件介绍：ztree （备忘）

1. 引入文件: jquery 例如:jquery-2.1.4.min.js ztree 例如: jquery.z

迈不过友情╰/ 2022年07月13日 15:51/ 0 赞/ 146 阅读

相关 zTree插件setting配置详解

一. zTree的 setting 配置详解 var setting = \{ treeId : "", //zTree 的唯一标识，初始化后，等于用户定义的

骑猪看日落/ 2022年06月18日 07:12/ 0 赞/ 492 阅读

相关 Ztree-JQuery树插件的学习（未完）

官方地址在这：[http://www.treejs.cn/v3/main.php\\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTr

淡淡的烟草味﹌/ 2022年06月14日 06:52/ 0 赞/ 126 阅读

相关 mybatis分页插件PageHelper小例子

1导入jar <dependency> <groupId>com.github.pagehelper</groupId> <artifactI

太过爱你忘了你带给我的痛/ 2022年06月13日 13:48/ 0 赞/ 115 阅读

相关 zTree -- jQuery 树插件的使用

官网地址：[http://www.treejs.cn/v3/main.php\\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTree

╰半橙微兮°/ 2022年05月17日 01:24/ 0 赞/ 230 阅读

相关 Ztree树形插件使用

Ztree树形插件使用一. ztree.js 的使用　　Ztree 是一个依靠 jQuery 实现的多功能 "树插件". 开源免费的插件　　适合项目开发, 尤其

心已赠人/ 2022年01月11日 06:47/ 0 赞/ 354 阅读

相关 jQuery 树插件ZTree使用Demo

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件。 zTre...

朱雀/ 2020年10月17日 18:26/ 0 赞/ 824 阅读