Question

routingController.routing1 = [{
  "id": "1",
  "flow": "Product",
  "businessUnit": "EPOS",
  "reprocessFromSourceEjbJNDI": "ReprocessFromSourceEPOSService",
  "child": [{
    "id": "1-1",
    "name": "mappingProductExtractQueue",
    "description": "description",
    "child": [{
      "id": "1-2",
      "name": "endPointEPOSQueue",
      "description": "end point description",
      "child": [{
        "id": "1-3",
        "name": "test",
        "description": "test description",
        "child": [{
          "id": "1-4",
          "name": "test",
          "description": "test description check"
        }]
      }]
    }],
  }]
}, {
  "id": "2",
  "flow": "Product",
  "businessUnit": "EPOS",
  "reprocessFromSourceEjbJNDI": "ReprocessFromSourceEPOSService",
  "child": [{
    "id": "2-1",
    "name": "mappingProductExtractQueue",
    "description": "description",
    "child": [{
      "id": "2-2",
      "name": "endPointEPOSQueue",
      "description": "end point description",
      "child": [{
        "id": "2-3",
        "name": "test",
        "description": "test description"
      }]
    }],
  }]
}]

Answer 1

$(document).ready(function(){
var data=[{
  "id": "1",
  "text": "Product",
  'state' : {
           'opened' : true,
           'selected' : true
   },
  "businessUnit": "EPOS",
  "reprocessFromSourceEjbJNDI": "ReprocessFromSourceEPOSService",
  "children": [{
    "id": "1-1",
    "text": "mappingProductExtractQueue",
     'state' : {
           'opened' : true         
    },
    "description": "description",
    "children": [{
      "id": "1-2",
      "text": "endPointEPOSQueue",
      'state' : {
           'opened' : true         
      },
      "description": "end point description",
      "child": [{
        "id": "1-3",
        "text": "test",
        "description": "test description",
        "children": [{
          "id": "1-4",
          "text": "test",
          "description": "test description check"
        }]
      }]
    }],
  }]
}, {
  "id": "2",
  "text": "Product",
  'state' : {
           'opened' : true         
    },
  "businessUnit": "EPOS",
  "reprocessFromSourceEjbJNDI": "ReprocessFromSourceEPOSService",
  "children": [{
    "id": "2-1",
    "text": "mappingProductExtractQueue",
    "description": "description",
    "child": [{
      "id": "2-2",
      "name": "endPointEPOSQueue",
      "description": "end point description",
      "children": [{
        "id": "2-3",
        "text": "test",
        "description": "test description"
      }]
    }],
  }]
}];
  
  $('#using_json').jstree({ 'core' : {
    'data' : data
} });
});

<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<div id="using_json"></div>
</body>
</html>

要与Angular集成jstree，请遵循以下步骤。

npm install --save jquery jstree

npm install --save-dev @types/jquery @types/jstree

然后updated src/app/app.component.html

<div id="foo">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

并将src/app/app.component.ts更新为

import { Component, OnInit } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    $('#foo').jstree();
  }
}

希望这会有所帮助！

使用切换功能将嵌套的JSON作为列表动态显示为树

1 个答案: