1. 程式人生 > >JS中獲取本地json檔案構建zTree

JS中獲取本地json檔案構建zTree

標準的json物件格式為{"key":value,"key2":value2} 有雙引號
$.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;
    }