JSFiddle - React, Tailwind, and code Playground

by zhouyulong

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
<table width="100%" cellspacing="0" id="treeTable"></table>

JavaScript

var data = [{
            id: 1,
            name: "one",
            pid: 0,
            level: 0,
            children: [{
                    id: 2,
                    name: "two",
                    pid: 1,
                    level: 1,
                    children: [{
                            id: 3,
                            name: "five",
                            pid: 2,
                            level: 2,
                            children: []
                        },
                        {
                            id: 4,
                            name: "six",
                            pid: 2,
                            level: 2,
                            children: []
                        }
                    ]
                },
                {
                    id: 5,
                    name: "three",
                    pid: 1,
                    level: 0,
                    children: []
                },
                {
                    id: 6,
                    name: "four",
                    pid: 1,
                    level: 0,
                    children: [{
                        id: 7,
                        name: "seven",
                        pid: 6,
                        level: 1,
                        children: []
                    }]
                }
            ]

        }];

var icon = new Array('│ ', '├─ ', '└─ ');


$(function () {
            var str = "";
            var n = [];

            for (var t = 0; t < data.length; t++) {
                var array = data[t].children;
                unique(array);
            }
          
            var ichild = unique(array);
            var lastchild = ichild[ichild.length-1];
    
                for (var i = 0; i < data.length; i++) {
                    if (data[i].level == 0) { 
                        str += "<tr data-tt-id='" + data[i].id + "'>";
                        str += '<td><input type="checkbox" value="' +...