jQuery 树 table 和 JSON 数据

Question

我正在研究树 table，我必须根据 JSON 数据制作一棵树 table，我搜索 google 并找到 jQuery Treetable 具有此功能，因此我从后端创建了 json。现在我面临如何将它们渲染成 jQuery 树 table 的问题，因为我对 JavaScript.

有非常基本的了解

JSON

[{"data":{"totalAmount":"1638852","itemcode":"11086"},"children":[{"data":{"totalAmount":"1146570","itemcode":"8053"},"children":[{"data":{"totalAmount":"518212","itemcode":"3861"},"children":[{"data":{"totalAmount":"135116","itemcode":"390"},"text":"South Indian-1-Flr"},{"data":{"totalAmount":"133350","itemcode":"181"},"text":"South Indian-2-Flr"},{"data":{"totalAmount":"89092","itemcode":"859"},"text":"Take-away counter 1"},{"data":{"totalAmount":"61661","itemcode":"1889"},"text":"Coffee Counter"},{"data":{"totalAmount":"80568","itemcode":"449"},"text":"Trade Pos1"},{"data":{"totalAmount":"18425","itemcode":"93"},"text":"Trade Pos 2"}],"text":"2018-08-04"},{"data":{"totalAmount":"628358","itemcode":"4192"},"children":[{"data":{"totalAmount":"149692","itemcode":"370"},"text":"South Indian-1-Flr"},{"data":{"totalAmount":"165440","itemcode":"194"},"text":"South Indian-2-Flr"},{"data":{"totalAmount":"127689","itemcode":"1043"},"text":"Take-away counter 1"},{"data":{"totalAmount":"67865","itemcode":"1926"},"text":"Coffee Counter"},{"data":{"totalAmount":"84965","itemcode":"480"},"text":"Trade Pos1"},{"data":{"totalAmount":"32707","itemcode":"179"},"text":"Trade Pos 2"}],"text":"2018-08-05"}],"text":"JAYANAGAR"},{"data":{"totalAmount":"220024","itemcode":"2212"},"children":[{"data":{"totalAmount":"104801","itemcode":"1067"},"children":[{"data":{"totalAmount":"64091","itemcode":"267"},"text":"Restaurant"},{"data":{"totalAmount":"16234","itemcode":"608"},"text":"Coffee Counter"},{"data":{"totalAmount":"6233","itemcode":"38"},"text":"Takeaway"},{"data":{"totalAmount":"18243","itemcode":"154"},"text":"Trade POS"}],"text":"2018-08-04"},{"data":{"totalAmount":"115223","itemcode":"1145"},"children":[{"data":{"totalAmount":"73066","itemcode":"270"},"text":"Restaurant"},{"data":{"totalAmount":"16472","itemcode":"671"},"text":"Coffee Counter"},{"data":{"totalAmount":"9651","itemcode":"48"},"text":"Takeaway"},{"data":{"totalAmount":"16034","itemcode":"156"},"text":"Trade POS"}],"text":"2018-08-05"}],"text":"MALLESHWARAM"},{"data":{"totalAmount":"272258","itemcode":"821"},"children":[{"data":{"totalAmount":"138151","itemcode":"395"},"children":[{"data":{"totalAmount":"136273","itemcode":"380"},"text":"Restaurant"},{"data":{"totalAmount":"1878","itemcode":"15"},"text":"Trade POS"}],"text":"2018-08-04"},{"data":{"totalAmount":"134107","itemcode":"426"},"children":[{"data":{"totalAmount":"131881","itemcode":"409"},"text":"Restaurant"},{"data":{"totalAmount":"2226","itemcode":"17"},"text":"Trade POS"}],"text":"2018-08-05"}],"text":"KOLAR"}],"text":""}]

我从 Java 结尾创建了那个 JSON。

This is the link like what I want to create the tree table

树table的插件，我只提供了一个我知道的

Answer 1

我正在使用 jstree 和 jstreegrid

我用你的 json 试了一下，结果正确

var data;
 data = [
   {
     "data": {
       "totalAmount": "1394334",
       "itemcode": "10598"
     },
     "children": [
       {
         "data": {
           "totalAmount": "987579",
           "itemcode": "7545"
         },
         "children": [
           {
             "data": {
               "totalAmount": "476426",
               "itemcode": "3747"
             },
             "children": [
               {
                 "data": {
                   "totalAmount": "49644",
                   "itemcode": "29"
                 },
                 "text": "North Indian"
               },
               {
                 "data": {
                   "totalAmount": "194495",
                   "itemcode": "474"
                 },
                 "text": "South Indian-1-Flr"
               },
               {
                 "data": {
                   "totalAmount": "80768",
                   "itemcode": "842"
                 },
                 "text": "Take-away counter 1"
               },
               {
                 "data": {
                   "totalAmount": "60878",
                   "itemcode": "1918"
                 },
                 "text": "Coffee Counter"
               },
               {
                 "data": {
                   "totalAmount": "81999",
                   "itemcode": "434"
                 },
                 "text": "Trade Pos1"
               },
               {
                 "data": {
                   "totalAmount": "8642",
                   "itemcode": "50"
                 },
                 "text": "Trade Pos 2"
               }
             ],
             "text": "2018-09-01"
           },
           {
             "data": {
               "totalAmount": "511153",
               "itemcode": "3798"
             },
             "children": [
               {
                 "data": {
                   "totalAmount": "39",
                   "itemcode": "1"
                 },
                 "text": "North Indian"
               },
               {
                 "data": {
                   "totalAmount": "118647",
                   "itemcode": "334"
                 },
                 "text": "South Indian-1-Flr"
               },
               {
                 "data": {
                   "totalAmount": "119871",
                   "itemcode": "137"
                 },
                 "text": "South Indian-2-Flr"
               },
               {
                 "data": {
                   "totalAmount": "109527",
                   "itemcode": "901"
                 },
                 "text": "Take-away counter 1"
               },
               {
                 "data": {
                   "totalAmount": "64771",
                   "itemcode": "1896"
                 },
                 "text": "Coffee Counter"
               },
               {
                 "data": {
                   "totalAmount": "78037",
                   "itemcode": "464"
                 },
                 "text": "Trade Pos1"
               },
               {
                 "data": {
                   "totalAmount": "20261",
                   "itemcode": "65"
                 },
                 "text": "Trade Pos 2"
               }
             ],
             "text": "2018-09-02"
           }
         ],
         "text": "JAYANAGAR"
       },
       {
         "data": {
           "totalAmount": "207845",
           "itemcode": "2299"
         },
         "children": [
           {
             "data": {
               "totalAmount": "92141",
               "itemcode": "1066"
             },
             "children": [
               {
                 "data": {
                   "totalAmount": "53822",
                   "itemcode": "242"
                 },
                 "text": "Restaurant"
               },
               {
                 "data": {
                   "totalAmount": "15339",
                   "itemcode": "660"
                 },
                 "text": "Coffee Counter"
               },
               {
                 "data": {
                   "totalAmount": "7548",
                   "itemcode": "33"
                 },
                 "text": "Takeaway"
               },
               {
                 "data": {
                   "totalAmount": "15432",
                   "itemcode": "131"
                 },
                 "text": "Trade POS"
               }
             ],
             "text": "2018-09-01"
           },
           {
             "data": {
               "totalAmount": "115704",
               "itemcode": "1233"
             },
             "children": [
               {
                 "data": {
                   "totalAmount": "69946",
                   "itemcode": "278"
                 },
                 "text": "Restaurant"
               },
               {
                 "data": {
                   "totalAmount": "18197",
                   "itemcode": "743"
                 },
                 "text": "Coffee Counter"
               },
               {
                 "data": {
                   "totalAmount": "8741",
                   "itemcode": "42"
                 },
                 "text": "Takeaway"
               },
               {
                 "data": {
                   "totalAmount": "18820",
                   "itemcode": "170"
                 },
                 "text": "Trade POS"
               }
             ],
             "text": "2018-09-02"
           }
         ],
         "text": "MALLESHWARAM"
       },
       {
         "data": {
           "totalAmount": "198910",
           "itemcode": "754"
         },
         "children": [
           {
             "data": {
               "totalAmount": "115313",
               "itemcode": "397"
             },
             "children": [
               {
                 "data": {
                   "totalAmount": "107602",
                   "itemcode": "355"
                 },
                 "text": "Restaurant"
               },
               {
                 "data": {
                   "totalAmount": "7711",
                   "itemcode": "42"
                 },
                 "text": "Trade POS"
               }
             ],
             "text": "2018-09-01"
           },
           {
             "data": {
               "totalAmount": "83597",
               "itemcode": "357"
             },
             "children": [
               {
                 "data": {
                   "totalAmount": "78537",
                   "itemcode": "319"
                 },
                 "text": "Restaurant"
               },
               {
                 "data": {
                   "totalAmount": "5060",
                   "itemcode": "38"
                 },
                 "text": "Trade POS"
               }
             ],
             "text": "2018-09-02"
           }
         ],
         "text": "KOLAR"
       }
     ],
     "text": ""
   }
 ]

 // load jstree
 $("#jstree").jstree({
   plugins: ["grid","dnd","contextmenu","sort"],
   core: {
     data: data
   }, 
   // configure tree table
   grid: {
           columns: [
             {width: 'auto', header: "Outlet"},
             
             {width: 'auto', value: "itemcode", header: "NoOfBills", cellClass: "aright"},
        
             {width: 'auto', value: "totalAmount", header: "Amount", cellClass: "aright"}
             
           ],
     resizable: true,
     
 
  
   }
 });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstreegrid/3.9.5/jstreegrid.min.js"></script>
<div id="jstree"></div>

jQuery 树 table 和 JSON 数据

jQuery tree table with JSON Data

javascript

jquery

json

treegrid

treetable