js ajax生成树的思路

最近在研究tree grid ,对tree有些了解,所以写了一些想法。

首先ajax请求加载,这个时候只取出第一层root层的数据,js根据规则渲染生成dom,输出。这样在特定的表格或者div中出现了树的结构,而且每层树的前面要有打开或者关闭的图片,这个在生成的时候已经判断完,如果是新ajax请求,这时候应该是关闭的,等待用户去点击。

当用户点击这个打开/关闭的图片的时候,触发事件。此时需要首先判断打开还是关闭。如果是打开则执行关闭,关闭依据:将此行的id和下一行到最后的id进行比较 indexOf()方法 返回值 0 , -1,如果存在相等的字符串,证明是子集,然后执行关闭,将display设置为none;如果是关闭则执行打开,

打开依据:首先判断下一行为不为空 nextnode !=null(此时说明下一行有数据) or nextnode==null (此时说明下一行没有数据,也就是表格的最后一行)

if(nextnode !=null){//下一行有数据

  //不需要执行ajax,直接将dom遍历(在id中存在一样的情况下,也就是当前的子集) 展开

}else{//下一行没有数据 最后一行

 if(indexOf==0){

  //下一行是否相等 之前取出过之后关闭的子集

  //不需要ajax请求

 }else{

  //此时下一行元素不是当前行的子集

  //ajax请求

 }

}

时间: 2024-11-05 12:26:05

js ajax生成树的思路的相关文章

将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)

前天刚写了篇文章使用Bootstrap为你的博客园自定义轮播图片(今天将图片加载的顺序调整了下,不在访问的时候直接加载,而是页面加载最后在脚本里面动态添加dom元素),虽说技术含量不怎么高,但是大家还算感兴趣.其实对博主来说最关键是博客的积分在涨.所以趁热打铁,再来一篇使用wcf+js ajax跨域请求数据同步空间说说的帖子. 因为是请求qq说说的数据,所以要登陆我的qq,这个很麻烦,总不能让每个访客都登陆的qq,然后把数据取出来吧,而且qq也没有相关的接口提供,登陆的时候还要处理验证码.所以这

JavaScript学习总结【12】、JS AJAX应用

1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的

简单的前端js+ajax 购物车框架(入门篇)

其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { A

js Ajax的几种操作方法

具体网址:http://blog.sina.com.cn/s/blog_bfa00a970101c5ns.html 第一种: $.ajax({                type: "POST",                url: "VIPManager/VipHandler.ashx",                data: "Method=LogOut",                async: false, //是否异步 

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON w

Node.js源码解析----自己实现一个Node.js的难点与思路

前言: 最近在看Node.js,看了一段时间后便想着自己实现一个Node.js现在已经实现了个大概(绝大部分是模仿人家,不过自己实现一遍基本上就理解Node.js的原理了)下面便说说这个过程中的坑,以及一些需要注意的地方: Node.js需要一定C++基础,建议看完C++Primer再看,否则V8的好多表达方式,指针,引用,模板之类的会看不懂: 代码已上传GitHub地址:   https://github.com/sven36/cNode 编译:我用的win10的环境,具体编译请参考Node.

js ajax 传送xml dom对象到服务器

客户端代码 1 <script> 2 var isie = true; 3 var xmlhttp = null; 4 function createXMLHTTP() {//创建XMLXMLHttpRequest对象 5 if (xmlhttp == null) { 6 if (window.XMLHttpRequest) { 7 xmlhttp = new XMLHttpRequest(); 8 } 9 else { 10 xmlhttp = new ActiveXObject("

Stripes视图框架Java对象属性验证和prototype.js Ajax的测试

Stripes视图框架Java对象属性验证,它允许对字段设置是否必须填写,对数字大小进行限制等.我用prototype.js Ajax 将验证后的数据及时地展示出来,下面来看程序. 1.编写User实体类 此用户共三个属性: name.email.age. package com.boonya.stripes.entity;      public class User {              private String name;              private String

JS+ajax制作新浪微博文字效果

JS+ajax制作新浪微博文字效果,新浪微博效果,文字淡入效果.JS代码 下载地址:http://www.huiyi8.com/sc/6426.html(转载请注明此处)