javascript - 无法填充 jstree 表
问题描述
我正在工作或树表以显示向下钻取类型或树型结构。我有 json 并希望将其填充到树表中
但在这里我收到错误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>
推荐阅读
- r - 基于用户 url 输入的 R 闪亮应用程序中的 Read_html
- python - 将python脚本的参数作为参数传递给它的函数
- python - 检查输入时出错:预期 embedding_1_input 的形状为 (50,) 但数组的形状为 (1,)
- java - 无法转换 getSingleResult() 的结果
- android - 带有 GPS 信息的 Android 10 ACTION_GET_CONTENT 图像?
- excel - 导出为 PDF 宏缺少形状
- python - Pandas 减慢元组的 multiIndex 分配
- django - 运行 Django 服务器的 docker 命令是什么?
- mongodb - 如何将对象值移动到 MongoDB 中的数组?
- r - 满足条件的矩阵索引