jsTree - 요청 시 Ajax를 통해 하위 노드 로드

jsTree - 요청 시 Ajax를 통해 하위 노드 로드

서브노드의 온디맨드 로딩에 대응하는 jsTree를 취득하려고 합니다.코드는 다음과 같습니다.

jQuery('#introspection_tree').jstree의"json_data" : {"접속" : {url : "syspection : //localhost / syspection / product"}},"plugins" : ["sublic", "json_data", "ui"]});

콜에서 반환된 json은

[{"data": "Kit 1","attr": {'id' : '1'},"자녀" : [[{"data": "하드웨어","attr": {'id' : '2'},"자녀" : [
]}],[{"data": "소프트웨어","attr": {'id' : '3'},"자녀" : [
]}]]}.....]

각 요소에는 많은 아이가 있을 수 있습니다. 트리는 커집니다.현재 트리 전체를 한 번에 로드하고 있어 시간이 걸릴 수 있습니다.사용자가 자녀 노드를 열었을 때 자녀 노드의 온디맨드 로드를 구현하려면 어떻게 해야 합니까?

잘 부탁드립니다.

아이리쉬카는 나를 올바른 방향으로 인도했지만, 내 문제를 완전히 해결하지는 못했다.나는 그녀의 대답을 만지작거리다가 이것을 생각해냈다.2개의 다른 서버 기능을 사용하는 것은 알기 쉽게 하기 위해서입니다.첫 번째는 모든 제품을 최상위 레벨로 나열하고 두 번째는 특정 productid의 모든 자녀를 나열합니다.

jQuery("#introspection_tree").jstree({
    "plugins" : ["themes", "json_data", "ui"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                var nodeId = "";
                var url = ""
                if (node == -1)
                {
                    url = "http://localhost/introspection/introspection/product/";
                }
                else
                {
                    nodeId = node.attr('id');
                    url = "http://localhost/introspection/introspection/children/" + nodeId;
                }

                return url;
            },
            "success": function (new_data) {
                return new_data;
            }
        }
    }
});

함수에서 반환되는 json 데이터는 다음과 같습니다(각 노드에서 state=closed).

[{"data": "Kit 1","attr": {'id' : '1'},"상태" : "닫힘"},{"data": "KPCM 049","attr": {'id' : '4'},"상태" : "닫힘"},{"data": "Linux BSP","attr": {'id' : '8'},"상태" : "닫힘"}]

정적 데이터는 필요하지 않습니다. 트리는 이제 각 레벨에서 완전히 역동적입니다.

디폴트로는 1레벨 노드를 표시하면 자녀는 온 디맨드로 로드됩니다.이 경우 수정해야 할 것은 다음과 같이 추가하는 것뿐입니다."state" : "closed"필요에 따라 로드되는 하위 노드를 가진 노드로 이동합니다.

코드를 수정하기 위해 노드의 ID를 ajax 호출로 전송할 수 있습니다.

"json_data": {
    //root elements to be displayed by default on the first load
    "data": [
        {
            "data": 'Kit 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        },
        {
            "data": 'Another node of level 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        }
    ],
    "ajax": {
        url: "http://localhost/introspection/introspection/product",
        data: function (n) {
            return {
                "nodeid": $.trim(n.attr('id'))
            }
        }
    }
}

JSTree 문서에서

메모: 데이터와 Ajax가 모두 설정되어 있는 경우 첫 번째 트리는 데이터 문자열에서 렌더링됩니다.로드된 자녀가 없는 닫힌 노드를 열면 AJAX 요청이 생성됩니다.

페이지 로드 시 루트 요소를 트리 데이터로 설정해야 합니다. 그러면 Ajax 요청으로 자식들을 검색할 수 있습니다.

$("#introspection_tree").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "json_data": {
        //root elements
        "data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) {
                var nodeId = node.attr('id'); //id="kit1"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}]
                return new_data;
            }
        }
    }
});

상세한 것에 대하여는, 이쪽(이전 부분)에서 같은 질문에 대한 회답을 참조해 주세요.

나는 이 문제에 몇 시간을 허비했다.결국 그렇게 됐어

$("#resourceTree").jstree({
    "types": {
      "default": {
        "icon": "fa fa-folder-open treeFolderIcon",
      }
    },
    "plugins": ["json_data", "types", "wholerow", "search"],
    "core": {
      "multiple": false,
      "data": {
        "url" : function(node){
          var url = "rootTree.json";
          if(node.id === "specialChildSubTree")
            url = "specialChildSubTree.json";
          return url;
        },
        "data" : function(node){
          return {"id" : node.id};
        }
      }
    },
  });

rootTree.json:

[
  {
    "text": "Opened root folder",
    "state": {
      "opened": true
    },
    "children": [
      {
        "id" : "specialChildSubTree",
        "state": "closed",
        "children":true
      }
    ]
  }
]

special Child SubTree.json:

[
  "Child 1",
  {
    "text": "Child 2",
    "children": [
      "One more"
    ]
  }
]

따라서 핵심 설정에서 감시하는 ID를 사용하여 Ajax 로딩된 서브트리의 부모가 되는 노드를 표시합니다.

메모: 이 노드에는 "state" : "closed" 파라미터와 "children" : true" 파라미터가 필요합니다.

버전 3.3.3에서 jsTree.js를 사용하고 있습니다.

위의 해결방법은 모두 괜찮습니다.여기에서는 Ajax call vakata를 사용하여 노드를 느리게 로드하기 위한 유사한 작동 솔루션도 제공합니다.API가 다음과 같이 동작하는 경우

https://www.jstree.com/fiddle/ ® lazy

자노드를 취득하기 위해

https://www.jstree.com/fiddle/?http & id = 2

설명 및 완전한 솔루션에 대해서는, https://everyething.com/Example-of-jsTree-with-lazy-loading-and-AJAX-call 를 참조해 주세요.

<script type="text/javascript">
        $(function () {
            $('#SimpleJSTree').jstree({
                'core' : {
                    'data' : {
                        'url' : "https://www.jstree.com/fiddle/?lazy", 
                        'data' : function (node) { 
                            return { 'id' : node.id }; 
                        } 
                    } 
                } 
            });
        });
    </script>

언급URL : https://stackoverflow.com/questions/8078534/jstree-loading-subnodes-via-ajax-on-demand