zoukankan      html  css  js  c++  java
  • zTree异步加载修改节点图标方法

    项目需要用到zTree插件,zTree就不做介绍了,下面两个连接是是zTree的文档和示例

    zTree文档:http://www.treejs.cn/v3/api.php

    zTree示例:http://www.treejs.cn/v3/demo.php#_101

    zTree的基本用法通过看演示及文档基本都能掌握

    下面记录下项目中特别的用法

    1.异步加载时修改图标

        $('#rptIndTree').height($(window).height()-120);
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
    //            chkboxType:{ "Y": "ps", "N": "ps" }
            },
            data: {
                key: {
                    name: "NAME"
                },
                simpleData: {
                    enable: true,
                    idKey: "ID",
                    pIdKey: "PID",
                    rootPId: "0"
                }
            },
           async : {    
                enable : true,   
                type: 'get',
                url : url, // Ajax 获取数据的 URL 地址    
                autoParam : [], 
                otherParam: []  
            },
            callback : {
                onAsyncSuccess: zTreeOnAsyncSuccess,
                onClick: zTreeOnClick,
                onCheck: zTreeOnCheck,
                beforeClick: zTreeBeforeClick,
                beforeCheck: zTreeBeforeCheck
            }
        };
        zTree = $.fn.zTree.init($("#rptIndTree"), setting, "");

    上面是基本的加载zTree的代码

    加载完后在加载成功的回调函数中处理树节点的图标zTreeOnAsyncSuccess

    //加载完后执行
    function zTreeOnAsyncSuccess(){
        var treeObj = $.fn.zTree.getZTreeObj("rptIndTree");
        var nodes = treeObj.getNodes();
        for (var i=0, l=nodes.length; i < l; i++) {
            if('undefined' != typeof(nodes[i].children)){
                nodes[i].iconOpen =  '../menu1_open.png';  //父菜单打开图标
                nodes[i].iconClose =  '../menu1_close.png';  //父菜单关闭图标
                treeObj.updateNode(nodes[i]);
                
                for (var k=0, _l=nodes[i].children.length; k < _l; k++) {
                    nodes[i].children[k].icon = '../menu2_def.png';  //子菜单图标
                    treeObj.updateNode(nodes[i].children[k]);
                }
            }else{
                nodes[i].icon = '../menu2_def.png';  //没有子菜单图标
                treeObj.updateNode(nodes[i]);
            }
        }
    }

    遍历每个树节点根据有无子节点来修改图标,如果有子节点需要同时设置iconOpen和iconClose 属性,否则改节点打开和关闭都是同一种样式。

    修改了节点的图标属性后,然后更新该节点用到以下方法:

    treeObj.updateNode(nodes[i])

     在zTree文档中可以查找到此方法。

  • 相关阅读:
    Daily Scrum02 12.05
    Daily Scrum02 12.04
    用户调研报告
    Daily Scrum02 12.03
    Daily Scrum02 12.02
    Daily Scrum02 12.01
    Daily Scrum02 11.30
    软件工程项目组Z.XML会议记录 2013/11/27
    Daily Scrum02 11.29
    201509-3 模板生成系统
  • 原文地址:https://www.cnblogs.com/but-he/p/9922680.html
Copyright © 2011-2022 走看看