您的位置:首页 > Web前端 > javascript > 正文

JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用

更多 时间:2016-9-21 类别:Web前端 浏览量:2360

JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用

JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用

一、AJAX获取的Json数据

 

  •  
  • JScript 代码   复制
  • 
    /// 部门信息
    var departRows = [{
        parentDepartId: 'root',
        departId: 'DC',
        departName: '集团'
    }, {
        parentDepartId: 'DC',
        departId: '01',
        departName: '上海总部'
    }, {
        parentDepartId: 'DC',
        departId: '02',
        departName: '苏州分部'
    }, {
        parentDepartId: '02',
        departId: '0200',
        departName: '苏州分部部门A'
    }, {
        parentDepartId: '02',
        departId: '0201',
        departName: '苏州分部部门B'
    }, {
        parentDepartId: '0201',
        departId: '020100',
        departName: '苏州分部部门B小组A'
    }, {
        parentDepartId: '0201',
        departId: '020101',
        departName: '苏州分部部门B小组B'
    }, {
        parentDepartId: '0201',
        departId: '020102',
        departName: '苏州分部部门B小组C'
    }, {
        parentDepartId: '0201',
        departId: '020103',
        departName: '苏州分部部门B小组D'
    }];
    
    		
  •  

    二、通常tree插件是无法直接解析上边这种数据源的,转化方法

     

  •  
  • JScript 代码   复制
  • 
    /// </summary>
    /// <param name="rows">行结构数据</param> 
    /// <param name="attributes">属性信息</param> 
    function convertTreeData(rows, attributes) {
        var keyNodes = {}, parentKeyNodes = {};
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            row.id = row[attributes.keyField];
            row.parentId = row[attributes.parentKeyField];
            row.text = row[attributes.textField];
            row.children = [];
    
            keyNodes[row.id] = row;
    
            if (parentKeyNodes[row.parentId]) { parentKeyNodes[row.parentId].push(row); }
            else { parentKeyNodes[row.parentId] = [row]; }
    
            var children = parentKeyNodes[row.id];
            if (children) { row.children = children; }
    
            var pNode = keyNodes[row.parentId];
            if (pNode) { pNode.children.push(row); }
        }
        return parentKeyNodes[attributes.rootParentId];
    }
    
    		
  •  

    三、将转化的数据作为tree插件的数据源

     

  •  
  • JScript 代码   复制
  • 
    /// 属性配置信息
    var attributes = {
        // 标识字段名
        keyField: 'departId',
        // 上级标识字段名
        parentKeyField: 'parentDepartId',
        // 文本字段名
        textField: 'departName',
        // 根节点标识
        rootKey: 'root'
    }
    
    /// treeData即为转化后的树形结构数据
    var treeData = convertTreeData(departRows, attributes);
    
    /// 可提供给easyui等插件直接使用
    $('#testTree').tree({
        data: treeData
    });
    
    		
  •  

    标签:javascript
    您可能感兴趣