Невозможно заполнить таблицу Jstree - PullRequest
0 голосов
/ 12 декабря 2018

Я работаю или в виде древовидной таблицы, чтобы показать тип развертки или древовидную структуру.У меня есть 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.

1 Ответ

0 голосов
/ 13 декабря 2018

Вам необходимо включить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...