0

0

关于 jQuery Easyui异步加载tree的问题解析

高洛峰

高洛峰

发布时间:2016-12-29 13:29:06

|

1541人浏览过

|

来源于php中文网

原创

想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug

html中代码是这样的

    js中的代码

    $(".next-menu:nth-child(1) a").click(function() {
    var $IDstr = $(this).attr("id"),
    $treeIDNum = parseInt($(this).attr("treeID")),
    jsonURL = "json/" + $IDstr + ".json",
    node;
    addAttr2Tree(jsonURL);
    changeImgSrc($treeIDNum);
    });
    });
    function changeImgSrc(nodeID){
    var node = $("#tt").tree('find', nodeID);
    if(node){
    $("#tt").tree('select', node.target);
    }
    if (node.attributes) {
    $("#img-box").attr("src", node.attributes.url);
    }
    }
    function addAttr2Tree(URL){
    $("#tt").tree({
    url: URL,
    method: "get",
    animate: true,
    lines: true
    });
    }

       

    起初是想通过一个按钮的点击事件来动态的加载tree的内容就是如上代码,addAttr2Tree 是用来将点击按钮时对应的本地json数据加到html中的ul标签中, changeImgSrc 是对tree节点的一些选中操作以及图片的加载,但是无论怎么调试,总是会出现一条错误 

     关于 jQuery Easyui异步加载tree的问题解析

    无法获取attributes属性!!!我反复确认attributes是完整无缺的放在json文件里的而且总是第一次点击按钮时才会出现这种错误,第二次及其以后,这种错误是没有的

    有道翻译AI助手
    有道翻译AI助手

    有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻

    下载

    后来我就想到,是不是因为json数据动态加载的速度比不上程序代码执行的速度?!

    果然不出我所料!easyui中tree自带了一个方法onLoadSuccess 当数据成功加载时,才会执行一些操作 
    所以

    $(".next-menu:nth-child(1) a").click(function() {
    var $IDstr = $(this).attr("id"),
    $treeIDNum = parseInt($(this).attr("treeID")),
    jsonURL = "json/" + $IDstr + ".json",
    node;
    addAttr2Tree(jsonURL);
    $("#tt").tree({
    onLoadSuccess: function(){
    changeImgSrc($treeIDNum);
    }
    });
    });

       

    代码改成这样就可以了。

    以上所述是小编给大家介绍的jQuery Easyui异步加载tree的问题解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持!

    更多关于 jQuery Easyui异步加载tree的问题解析相关文章请关注PHP中文网!

    相关专题

    更多
    C++ 单元测试与代码质量保障
    C++ 单元测试与代码质量保障

    本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

    3

    2026.01.16

    java数据库连接教程大全
    java数据库连接教程大全

    本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

    26

    2026.01.15

    Java音频处理教程汇总
    Java音频处理教程汇总

    本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

    12

    2026.01.15

    windows查看wifi密码教程大全
    windows查看wifi密码教程大全

    本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

    35

    2026.01.15

    浏览器缓存清理方法汇总
    浏览器缓存清理方法汇总

    本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

    5

    2026.01.15

    ps图片相关教程汇总
    ps图片相关教程汇总

    本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

    8

    2026.01.15

    ppt一键生成相关合集
    ppt一键生成相关合集

    本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

    4

    2026.01.15

    php图片上传教程汇总
    php图片上传教程汇总

    本专题整合了php图片上传相关教程,阅读专题下面的文章了解更多详细教程。

    2

    2026.01.15

    phpstorm相关教程大全
    phpstorm相关教程大全

    本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

    4

    2026.01.15

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    golang和swoole核心底层分析
    golang和swoole核心底层分析

    共3课时 | 0.1万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    第十九期_前端开发
    第十九期_前端开发

    共111课时 | 13.9万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号