JS中獲取本地json檔案構建zTree
阿新 • • 發佈:2019-01-23
標準的json物件格式為{"key":value,"key2":value2} 有雙引號
$.getJSON("json/layer.json?"+timestamp, function (data){}能夠獲取本地json檔案資料
$.getJSON("json/layer.json?"+timestamp, function (data){}能夠獲取本地json檔案資料
$.ajax也能夠獲取本地json檔案資料
示例:獲取本地json檔案資料作為zTree格式資料(兩種)
//初始化樹方法 function initTree(earthObj) { var setting = { check: { enable: true, //是否顯示checkbox或radio chkStyle: "checkbox" //顯示型別,可設定(checbox,radio) }, view: { showIcon: false, //不顯示節點圖示 showLine: true, // 不顯示 連線 expandFlag: true, //是否展開節點 dblClickExpand: false, //雙擊節點時,是否自動展開父節點的標識 expandSpeed: "", //節點展開、摺疊時的動畫速度, 可設定("","slow", "normal", or "fast") selectedMulti: false //設定是否允許同時選中多個節點 }, callback: { onDblClick: function (event, treeId, node) { //雙擊圖層 layerTreeDbClick(earthObj, node); }, onCheck: function (event, treeId, node) { //點選checkbox事件 layerTreeCheck(earthObj, node); }, onRightClick: function (event, treeId, node) { //右鍵事件 $('#mm').menu('show', { hideOnUnhover: false, fit: false, itemHeight: 30, left: event.pageX, top: event.pageY }); }, onCollapse: function (event, treeId, node) { //節點摺疊事件 $("#layerTreeDiv").jScrollPane({ showArrows: true }); }, onExpand: function (event, treeId, node) { //節點摺疊事件 $("#layerTreeDiv").jScrollPane({ showArrows: true }); } } }; //時間戳 var timestamp = Date.parse(new Date()); //樹資料 var zNodes = null; //var tree = null; //$.getJSON("json/layer.json?"+timestamp, function (data){ //alert(data); //alert(defaultData); //console.log(data); //console.log(defaultData); //zNodes = data; //alert(zNodes); //成功獲取json資料,可樹出不來是由於下面兩行要放在這裡,放在下面data還未獲取到 (getJSON是預設非同步重新整理,不等執行完再執行下邊) //var tree = $.fn.zTree.init($("#layerTree"), setting, zNodes); //tree.expandAll(true); //}); $.ajax({ type: "GET", url: "./Geojson/layer.json", dataType: "json", async: false, success: function(data){ alert(data); console.log(data); zNodes = data; } }); //var zNodes = defaultData; var tree = $.fn.zTree.init($("#layerTree"), setting, zNodes); tree.expandAll(true); $("#layerTreeDiv").jScrollPane({ showArrows: true }); return tree; }