热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug,下面小编给大家解答下

想要实现从本地中加载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节点的一些选中操作以及图片的加载,但是无论怎么调试,总是会出现一条错误

     

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

    后来我就想到,是不是因为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的问题解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


    推荐阅读
    • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
    • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
    • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
    • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
    • 本文详细介绍了如何使用jQuery防止事件冒泡,确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释,帮助开发者更好地理解和应用这一技术。 ... [详细]
    • 在网页开发中,页面加载速度是一个关键的用户体验因素。为了提升加载效率,避免在PageLoad事件中进行大量数据绑定操作,可以采用异步加载和特定控件来优化页面加载过程。 ... [详细]
    • 深入解析JMeter中的JSON提取器及其应用
      本文详细介绍了如何在JMeter中使用JSON提取器来获取和处理API响应中的数据。特别是在需要将一个接口返回的数据作为下一个接口的输入时,JSON提取器是一个非常有用的工具。 ... [详细]
    • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
    • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
    • jQuery HooRay:一款自创的实用 jQuery 工具插件
      这款插件主要由作者在工作中积累的常用功能开发而成,旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件,确保其稳定性和高效性。 ... [详细]
    • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
    • 在网站制作中随时可用的10个 HTML5 代码片段
      HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
    • 基于JQuery实现的评分插件
      本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
    • 本文探讨了如何利用jQuery在客户端实现页面跳转,并详细介绍了如何确保页面在浏览器的顶层窗口中打开,而不是局限于当前框架内。 ... [详细]
    • 深入理解Vue.js:从入门到精通
      本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
    author-avatar
    高阳毛巾批零店_103
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有