jQuery技术

salesforce 零基础学习(七十)使用jquery tree实现树形结构模式

字号+ 作者:H5之家 来源:H5之家 2017-04-15 17:02 我要评论( )

项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到。实现树形结构在此使用的是jquery的dynatree.js

项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到。

实现树形结构在此使用的是jquery的dynatree.js。关于dynatree的使用可以参考:

对于树形结构,这里不做太多介绍,树一般需要一个根节点,根节点下面可以有很多子节点或者叶子节点,子结点也可以包含叶子结点或者子节点。我们在设计表结构的时候可以考虑自连接操作,实现节点之间的关联,表结构如下:

我们想要实现的数据结构如下。

对应的数据如下:

在设计树形结构的前台展示时,应该有如下信息:

 对于程序设计,主要分成两个步骤:

  • 递归将数据存储到自定义结构中;
  • 对结构进行json处理,json串应该满足相关的结构,即类似JSONObject{JSONArray[...]}相关模式,可以查看上方链接了解详情。
  • 代码如下:

    1.TreeUtil:实现递归对节点关系获取以及json转换;

    1 public without sharing class TreeUtil { Map <Id, Tree__c> treeMap; Map <Id, List<Tree__c>> parentNodeToChildNodeMap; List<NodeWrapper> nodes{get;set;} JSONGenerator gen {get; set;} Tree__c rootNode{get;set;} { 17 initTreeDatas(); 18 } initTreeDatas() { 21 treeMap = new Map<Id,Tree__c>([SELECT IsLeafNode__c, ParentNode__c, Id, Name FROM Tree__c order by ParentNode__c]); 22 parentNodeToChildNodeMap = new Map<Id,List<Tree__c>>(); 23 for(Tree__c tree : treeMap.values()) { 24 List<Tree__c> tempList; 25 if(parentNodeToChildNodeMap.containsKey(tree.ParentNode__c)) { 26 tempList = parentNodeToChildNodeMap.get(tree.ParentNode__c); 27 tempList.add(tree); 28 parentNodeToChildNodeMap.put(tree.ParentNode__c,tempList); 29 } else { 30 tempList = new List<Tree__c>(); 31 tempList.add(tree); 32 if(tree.ParentNode__c != null) { 33 parentNodeToChildNodeMap.put(tree.ParentNode__c,tempList); 34 } else { 35 rootNode = tree; 36 } 37 } 38 } 39 } convertNodeToJSON(NodeWrapper nw){ 43 gen.writeStartObject(); 44 if(!nw.isLeafNode) { 45 gen.writeStringField('title', nw.nodeName); 46 gen.writeStringField('key', nw.nodeId); 47 gen.writeBooleanField('unselectable', false); 48 gen.writeBooleanField('expand', true); 49 gen.writeBooleanField('isFolder', true); 50 if (nw.hasChildNodes) { 51 gen.writeFieldName('children'); 52 gen.writeStartArray(); 53 for (NodeWrapper r : nw.childNodes) { 54 convertNodeToJSON(r); 55 } 56 gen.writeEndArray(); 57 } 58 } else { 59 gen.writeStringField('title', nw.nodeName); 60 gen.writeStringField('key', nw.nodeId); 61 } 62 gen.writeEndObject(); 63 } NodeWrapper createNode(Tree__c tree) { 66 NodeWrapper n = new NodeWrapper(); 67 n.nodeName = tree.Name; 68 n.nodeId = tree.Id; 69 n.parentNodeId = tree.ParentNode__c; (tree.IsLeafNode__c) { 72 n.isLeafNode = true; 73 n.hasChildNodes = false; 74 } else { 75 List<NodeWrapper> nwList = new List<NodeWrapper>(); 76 if(parentNodeToChildNodeMap.get(tree.Id) != null) { 77 n.hasChildNodes = true; 78 n.isLeafNode = false; 79 for(Tree__c tempTree : parentNodeToChildNodeMap.get(tree.Id)) { 80 nwList.add(createNode(tempTree)); 81 } 82 n.childNodes = nwList; 83 } 84 85 } 86 return n; 87 } String getTreeAndSubTrees() { 91 gen = JSON.createGenerator(true); 92 NodeWrapper node = createNode(rootNode); 93 gen.writeStartArray(); 94 convertNodeToJSON(node); 95 gen.writeEndArray(); 96 return gen.getAsString(); 97 } NodeWrapper { String nodeName{get;set;} String nodeId{get;set;} String parentNodeId{get;set;} Boolean hasChildNodes{get;set;} Boolean isLeafNode{get;set;} List<NodeWrapper> childNodes{get;set;} NodeWrapper() { 122 hasChildNodes = false; 123 } 124 } 125 126 }

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • JavaScript的jQuery库中ready方法的学习教程【站长博客网】

      JavaScript的jQuery库中ready方法的学习教程【站长博客网】

      2017-04-15 12:02

    • 阮一峰:jQuery官方基础教程笔记

      阮一峰:jQuery官方基础教程笔记

      2017-04-13 15:02

    • [译稿]微软将 jQuery IntelliSense整合到Visual Studio

      [译稿]微软将 jQuery IntelliSense整合到Visual Studio

      2017-04-12 17:03

    • jquery 滚动条高度|jquery 获取页面和滚动条的高度

      jquery 滚动条高度|jquery 获取页面和滚动条的高度

      2017-04-12 17:00

    网友点评
    .