无法填充 jstree table
Not able to populate jstree table
我正在工作或树 table 以显示向下钻取类型或树类型结构。我有 json 并想将其填充到树 table
但是这里我收到错误 TypeError: $(...).jstree is not a function
我是否遗漏了任何插件或任何东西？在我这边，我已经包含了所有插件，但我得到了同样的错误。
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>
<div id="jstree"></div>
我已经编辑了我的代码片段；它几乎可以正常工作，但它没有像我在 json outlet,noofbills,amount.
中那样显示列
您需要包括 jstreegrid.min.js。
以下标记需要添加到您的代码中才能正常工作。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstreegrid/3.9.5/jstreegrid.min.js"></script>
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>
我正在工作或树 table 以显示向下钻取类型或树类型结构。我有 json 并想将其填充到树 table
但是这里我收到错误 TypeError: $(...).jstree is not a function
我是否遗漏了任何插件或任何东西？在我这边，我已经包含了所有插件，但我得到了同样的错误。
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>
<div id="jstree"></div>
我已经编辑了我的代码片段；它几乎可以正常工作，但它没有像我在 json outlet,noofbills,amount.
您需要包括 jstreegrid.min.js。
以下标记需要添加到您的代码中才能正常工作。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstreegrid/3.9.5/jstreegrid.min.js"></script>
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>