Jq自定义的方法绑定树结构

1.先上效果图  (借鉴博客

  

2.这边不做样式的只做结构

function toTreeData(data) {
        var pos = {};
        var tree = [];
        var i = 0;
        while (data.length != 0) {
            if (data[i].pid == 0) {
                tree.push({
                    id: data[i].id,
                    text: data[i].text,
                    children: []
                });
                pos[data[i].id] = [tree.length - 1];
                data.splice(i, 1);
                i--;
            } else {
                var posArr = pos[data[i].pid];
                if (posArr != undefined) {

                    var obj = tree[posArr[0]];
                    for (var j = 1; j < posArr.length; j++) {
                        obj = obj.children[posArr[j]];
                    }

                    obj.children.push({
                        id: data[i].id,
                        text: data[i].text,
                        children: []
                    });
                    pos[data[i].id] = posArr.concat([obj.children.length - 1]);
                    data.splice(i, 1);
                    i--;
                }
            }
            i++;
            if (i > data.length - 1) {
                i = 0;
            }
        }
        return tree;
    }
 var data = [
  {
      "id": "CU201407140001",
      "pid": "0",
      "text": "壳牌中国"
  },
  {
      "id": "CU201407140002",
      "pid": "CU201407140001",
      "text": "壳牌北京分公司"
  },
  {
      "id": "CU201407140003",
      "pid": "CU201407140001",
      "text": "壳牌上海分公司"
  },
  {
      "id": "CU201407140004",
      "pid": "CU201407140001",
      "text": "壳牌广州分公司"
  },
  {
      "id": "CU201407140005",
      "pid": "CU201407140001",
      "text": "壳牌深圳分公司"
  },
  {
      "id": "CU201407140006",
      "pid": "CU201407140001",
      "text": "壳牌武汉分公司"
  },
  {
      "id": "CU201407140007",
      "pid": "CU201407140001",
      "text": "壳牌成都分公司"
  },
  {
      "id": "CU201407140008",
      "pid": "CU201407140001",
      "text": "壳牌海南分公司"
  }
    ];

 

    $(function () {

        $.ajax({
            url:hostAddress+‘/api/Customer/GetCustomerName?customerid=CU201407140001‘,
            type:‘GET‘,
            contentType:‘application/json‘,
            beforeSend: function (request) {
                request.setRequestHeader(‘Authorization‘,token_type+access_token);
            },
            success:function(data){
                var tree = toTreeData(data);
                var orag="";
                $.each(tree, function (key, value) {
                    $(‘#list‘).empty();
                    orag += " <li><span>" + value.text + "</span>";
                     if (value.children!=null)
                     {
                         $.each(value.children, function (k, v) {
                             orag += "<ul> <li><span>" + v.text + "</span></li>";
                             if (v.children!=null)
                             {
                                 $.each(v.children, function (kk, vv) {
                                     orag += "<ul> <li><span>" + vv.text + "</span></li>";
                                 });
                                 orag += "</ul>";
                             }
                         });
                         orag += "</ul>";
                     }
                     orag += "</li>";
                     console.log(orag);
                    $("#list").html(orag);

                })
            }

        });

    })

  

时间: 2024-08-30 11:53:42

Jq自定义的方法绑定树结构的相关文章

cocos2dx 关于lua 绑定的环境配置官方文档翻译与 将自定义的方法绑定到lua的的方法

//网上有好多写怎样讲自定义的方法绑定到lua的文章,其中都只对环境配置做了简单的介绍,看到有的帖子写在绑定中遇到了各种各样的error,大部分是由于环境配置//不正确导致的,以下是官方的文档有标准的说明,所有的开发引擎都会有自己的说明文档.下面就是cocos2dx 官方文档 //怎样使用 bindings-generator How to Use bindings-generator ================== //windows 环境下 On Windows: ----------

jQ新的事件绑定方法on()

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn)events:一个或多个用空格分隔的

自定义一个双向绑定组件

父组件: <k-input v-model="model.username"></k-input> 子组件KInput: <template> <div> <!--实现自定义组件双向绑定 v-model是语法糖,实现自定义组件双绑定需要指定 :value和@input即可--> <input type="text" :value="value" @input="onInp

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

Jquery自定义扩展方法(二)--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende

sublime-text 自定义快捷键方法

最近一直使用sublime进行项目的开发.经常忘记一些常用的快捷键.特别头疼. 有时候还会感觉有些快捷键用着不是很顺手.于是就自己捣鼓着如何来自己定义自己的快捷键.. 其实每个人的习惯都有所不同,所以我不喜欢看网上的那些所谓的快捷键大全什么的..你看一遍,你能记住多少? 首先要说明下在哪里定义我们的快捷键. 打开 sublime text   --> preferences 我们能够看到两个选项. Key  Bindings -Default    //这个表示系统默认的快捷键. Key Bin

Jquery自定义扩展方法

jquery是一款流行的JS框架,自定义JS方法,封装到Jquery中,调用起来也挺方便的,怎么写Jquery扩展方法那,网上翻阅了一部分代码,其实也挺简单的: 方式一: (jQuery.fn.setApDiv=function () { //apDiv浮动层显示位置居中控制 var wheight=$(window).height(); var wwidth=$(window).width(); var apHeight=wheight-$("#apDiv").height(); v

OC设置器与访问器以及自定义初始化方法

1.Person.h #import <Foundation/Foundation.h> @interface Person : NSObject { NSString * _name; NSString * _sex; NSInteger  _age; CGFloat    _weight; CGFloat    _height; } - (void)sayhi; //设置器   专门给一个实例变量赋值的方法 - (void)setName:(NSString *)name; - (void

Jq自定义动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <scr