ajax异步请求数据,用bootstrap中的tree模板实现tree

后台数据格式json数据data:
{"0":[{"id":1,"fatherId":0,"typeName":"测试","typeIndex":0,"typeStatus":"1"}],
"1":[{"id":2,"fatherId":1,"typeName":"测试类别1","typeIndex":1,"typeStatus":"1"},{"id":3,"fatherId":1,"typeName":"测试类别2","typeIndex":2,"typeStatus":"1"},{"id":4,"fatherId":1,"typeName":"测试类别3","typeIndex":3,"typeStatus":"1"}],
"3":[{"id":5,"fatherId":3,"typeName":"测试类别4","typeIndex":4,"typeStatus":"1"},{"id":6,"fatherId":3,"typeName":"测试类别5","typeIndex":5,"typeStatus":"1"}]}
后台将数据按照key-value的形式存入map,key值为父id,value为同一父id的Po组成的List中,传入前台,方便构建类别树,其中data[0]为初始化的根,需要保证返回的数据按照层级的先后顺序。
前台处理:
前台页面添加一个 <ul role="tree" id="typeLiId0"></ul>容器,
执行以下js方法
function listTypeTree(id){
    doPost("/action/type/listTypeTree",{},function(objs){
        if(objs.success){
            var data = objs.data;
            if(null == data){
                showErrorMsg("","类别信息失败!");
                return;
            }
            var obj = $("#" + id + " > div");
            for (var item in data) {
                appendNodeToTree('typeLiId', data[item]);
            }
            bindEvent();
        }else{

        }
    });
}
/**追加节点*/
function appendNodeToTree(id, data){
    for (var i = 0, l = data.length; i < l; i++) {
        $("#" + id + data[i].fatherId).append('<li data-content="'+data[i].id+'"><span><i class="icon-leaf"></i>'+data[i].typeName+'</span><ul id="typeLiId'+data[i].id+'"></ul></li>');
    }
}


/**从bootstrap-tree.js拷贝*/
function bindEvent(){
    $('.tree > ul').attr('role', 'tree').find('ul').attr('role', 'group');
    $('.tree').find('li:has(ul)').addClass('parent_li').attr('role', 'treeitem').find(' > span').attr('title', 'Collapse this branch').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(':visible')) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        }
        else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值