JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="tree"></div>

JavaScript

var defaultData = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];

$('#tree').treeview({
    color: "#428bca",
    //backColor: "black",背景色
    //borderColor:'green',
    
		expandIcon: 'far fa-plus-square',
    collapseIcon: "far fa-minus-square",//可收縮的節點圖標
    checkedIcon : "far fa-check-square",//多選框節點圖標
    uncheckedIcon : "far fa-square",//多選框節點圖標
    nodeIcon: "",
    //emptyIcon: "glyphicon glyphicon-ban-circle",//設置列表樹中沒有子節點的節點的圖標
    //expandIcon: "glyphicon glyphicon-plus",  //設置列表上中有子節點的圖標
    highlightSearchResults:true,//是否高亮搜索結果 默認true
    highlightSelected:true,     //是否選中高亮顯示
    onhoverColor: "#f5f5f5",    //鼠標滑過的顏色
    selectedIcon: 'far fa-check-square',
   // selectedBackColor: 'black',  //設置被選中的節點背景顏色
    //selectedColor : 'red',      //設置被選擇節點的字體、圖標顏色
    showBorder:true,                //是否顯示邊框
    showCheckbox:true,              //是否顯示多選框
    //uncheckedIcon:'',             //設置未選擇節點的圖標
    data:defaultData,
    showTags:true,//顯示徽章
    template : {
      list: '<ul class="list-group"></ul>',
      item: '<li class="list-group-item test">B<strong>D</strong>A</li>',
      indent: '<span class="indent"></span>',
      icon: '<span class="icon"></span>',
      link: '<a href="#" style="color:inherit;"></a>',
      badge: '<span class="badge"></span>'
    }
})