DynaTree控件无法在树中加载节点数据

时间:2018-12-11 13:19:50

标签: jquery

在下面的代码中,对Web api方法进行了ajax调用,我以json字符串格式获取数据,但树形视图未显示数据。它只是显示一个具有空值的节点,我的代码有什么问题?

我认为dyna树未以某些数据类型不匹配的正确格式获取json。

function loadDropDownTreeView() {
    var isMultiSelect = true; 
    var tabName = "Allocation_Factor";
    var filterName ="Procurement Team Hierarchy";
    try {

        var dependeeRefresh = false;
        //  var data = JSON.stringify(constructDownloadJSON(pageName, tabName));
       //showAjaxLoadingAnimation();
        $("#dropDownTreeViewID").treeSelect({
            placeholderText: "Select items for " + filterName,
            searchNoResultsText: "No matches found.",
            flexibleWidth: false, // set if dynatree container is fixed-width (width of dropdown) or flexi-width (grows with data node width)
            //maxHeight: 300, // in pixels; if the tree exceeds this height, the panel will render a scroll-bar
            flexibleHeight: false, // set if dynatree container is fixed-height (decided by maxHeight) or flexi-height (grows with data node height)
            isMultiLevel:true, // set if the tree has more than one levels
            dynatree: {
                autoFocus: false, // when a node is expanded, don't scroll to focus on it
                checkbox: true,
                classNames: isMultiSelect ? undefined : { checkbox: "dynatree-radio" },
                selectMode: isMultiSelect ? 3 : 1,  // Cascading multiple select       
                ajaxDefaults: { // used by initAjax and onLazyRead
                    //cache: true, // false: Append random '_' argument to the request url to prevent caching.
                    type: "POST",
                    contentType: "application/json; charset=utf-8", // pass json format to server-side web methods
                    dataType: "json" // Expect json format back from server-side web methods
                },
                initAjax: {
                    //url: "http://localhost:55268/WebService1.asmx/Helloworld",
                    url: "/api/ULSPAPI/GetTreeData",
                    dataType: "json",
                   // data: JSON.stringify({ data })

                },
                onPostInit: function (isReloading, isError) {
                    // actions to execute after tree init
                    // hideAjaxLoadingAnimation();
                },
                persist: true,

                onSelect: function (select, dtnode) {
                    alert('Onselect');
                    dependeeRefresh = false;
                    var selKeys = $.map(dtnode.tree.getSelectedNodes(), function (node) {
                        if (!node.getParent().isSelected() || node.getParent() == dtnode.tree.getRoot()) {
                            var level_and_node_id = node.getLevel() + "_" + node.data.key.split("_")[1];
                            return level_and_node_id;
                        }
                    });

                    var selDesc = $.map(dtnode.tree.getSelectedNodes(), function (node) {
                        if (!node.getParent().isSelected() || node.getParent() == dtnode.tree.getRoot()) {
                            var node_desc = node.data.title;
                            return node_desc;
                        }
                    });
                    var selId = $.map(dtnode.tree.getSelectedNodes(), function (node) {
                        if (!node.getParent().isSelected() || node.getParent() == dtnode.tree.getRoot()) {
                            var node_desc = node.data.key;
                            return node_desc;
                        }
                    });
                    var selectedKey = {};
                    selectedKey["title"] = filterName;
                    selectedKey["selected"] = selKeys.join(",");
                    selectedKey["desc"] = selDesc.join(",");
                    selectedKey["id"] = selId.join(",");

                    if (_filtersData[tabName] == undefined) {
                        _filtersData[tabName] = [];
                    }

                    var existingFilterData = function (title) {
                        if (_filtersData[tabName] !== undefined) {
                            for (var i = 0, len = _filtersData[tabName].length; i < len; i++) {
                                if (_filtersData[tabName][i].title === title)
                                    return _filtersData[tabName][i]; // Return as soon as the object is found
                            }
                        }
                        return null; // The object was not found
                    }

                    if (existingFilterData(filterName) != null) {
                        _filtersData[tabName] = $.grep(_filtersData[tabName], function (el, idx) { return el.title == filterName }, true);
                    }

                    if (selectedKey["selected"] != "") {
                        _filtersData[tabName].push(selectedKey);
                    }
                    else {
                        if ($.isEmptyObject(_filtersData[tabName]))
                            delete _filtersData[tabName];
                        dependeeRefresh = true;
                    }
                    if (delink !== "") {
                        if (existingFilterData(filterName) != null) {
                            if ($("#" + delink + ":checked").length > 0)
                                $("#" + delink).click();
                            $("#" + delink).attr("disabled", true);
                        }
                        else
                            $("#" + delink).attr("disabled", false);
                    }
                }
            },
            onChange: function (tree) {
            //    alert('onChange');
                //here you can access tree.selectedText, tree.selectedNodes, tree.selectedNodeKeys, tree.selectedNodeCaptions
            },
            onClose: function (tree) {
                //alert('onClose');
                //if (_filtersData[tabName] !== undefined) {
                //    for (var i = 0, len = _filtersData[tabName].length; i < len; i++) {
                //        if (_filtersData[tabName][i].title === filterName && dependee != "") {
                //            var dependeeList = dependee.split(',');
                //            for (var index = 0; index < dependeeList.length; index++) {
                //                var dependeeId = "#" + tabName + "_" + dependeeList[index].replace(/\s/g, "_");
                //                var dependeeName = dependeeList[index];
                //                var treeId = $(dependeeId).siblings(".ts-parent").find(".ts-tree");
                //                //if ($(treeId).dynatree("getTree").getSelectedNodes(true).length <= 0)
                //                addFilterData(dependeeId, treeId, pageName, tabName, dependeeName);
                //            }
                //        }
                //    }
                //}
                //if (dependeeRefresh && dependee != "") {
                //    var dependeeList = dependee.split(',');
                //    for (var index = 0; index < dependeeList.length; index++) {
                //        var dependeeId = "#" + tabName + "_" + dependeeList[index].replace(/\s/g, "_");
                //        var dependeeName = dependeeList[index];
                //        var treeId = $(dependeeId).siblings(".ts-parent").find(".ts-tree");
                //        //$(dependeeId).treeSelect("clearAll");
                //        addFilterData(dependeeId, treeId, pageName, tabName, dependeeName);
                //    }
                //}
            }
        });
    }
    catch (ex) {
        alert('Error');
    }
}

下面是我传递给dynatree的json字符串

[
  {
    "title": "Chemicals",
    "key": "Product Network_2",
    "children": [
      {
        "title": "Fine Chemicals -Global",
        "key": "Procurement Team_38",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Fragrances and Flavours - Global",
        "key": "Procurement Team_4",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Inorganics - Global",
        "key": "Procurement Team_19",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Oleochemicals - Global",
        "key": "Procurement Team_26",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Petrochemicals - Global",
        "key": "Procurement Team_27",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Unallocated Chems -Global",
        "key": "Procurement Team_25",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  },
  {
    "title": "Commodities",
    "key": "Product Network_3",
    "children": [
      {
        "title": "Liquid Oils - Global",
        "key": "Procurement Team_18",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Soft Commodities - Cocoa and Chocolate - Global",
        "key": "Procurement Team_50",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Soft Commodities - Dairy - Global",
        "key": "Procurement Team_51",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Soft Commodities - Sugar and Starch - Global",
        "key": "Procurement Team_52",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Tropical Oils - Global",
        "key": "Procurement Team_30",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  },
  {
    "title": "Finished Products",
    "key": "Product Network_5",
    "children": [
      {
        "title": "Finished Products -Market",
        "key": "Procurement Team_15",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  },
  {
    "title": "Food Ingredients",
    "key": "Product Network_6",
    "children": [
      {
        "title": "Farmed Ingredients -Global",
        "key": "Procurement Team_2",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Ingredients - Market",
        "key": "Procurement Team_43",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Processed Ingredients - Global",
        "key": "Procurement Team_40",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  },
  {
    "title": "Packaging",
    "key": "Product Network_1",
    "children": [
      {
        "title": "Bottles",
        "key": "Procurement Team_5",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Caps",
        "key": "Procurement Team_35",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Closures",
        "key": "Procurement Team_46",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Contact Flexibles",
        "key": "Procurement Team_8",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Customer Packaging",
        "key": "Procurement Team_29",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Decoration",
        "key": "Procurement Team_6",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Feedstock Rigid Plastic",
        "key": "Procurement Team_44",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Flexible Packaging",
        "key": "Procurement Team_45",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Folding Cartons, Aseptic Packaging and IC Pots",
        "key": "Procurement Team_39",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Market Packaging",
        "key": "Procurement Team_33",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "MBS Display",
        "key": "Procurement Team_20",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Metal Packaging",
        "key": "Procurement Team_42",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Plastic Assemblies",
        "key": "Procurement Team_41",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Tea Packaging",
        "key": "Procurement Team_13",
        "children": [],
        "icon": false,
        "isLazy": false
      },
      {
        "title": "Tubs and Lids",
        "key": "Procurement Team_34",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  },
  {
    "title": "Tea",
    "key": "Product Network_4",
    "children": [
      {
        "title": "Tea and Coffee",
        "key": "Procurement Team_3",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  },
  {
    "title": "Unknown",
    "key": "Product Network_7",
    "children": [
      {
        "title": "Unknown",
        "key": "Procurement Team_7",
        "children": [],
        "icon": false,
        "isLazy": false
      }
    ],
    "icon": false,
    "isLazy": false
  }
]

0 个答案:

没有答案