Question

在我的使用Web服务且该Web服务方法返回的JSON字符串的应用程序中，

[
   {
      "No":"21",
      "Area":"Default",
      "Branches":[
         {
            "No":"1108",
            "Area":"Davie",
            "IsValid":"False"
         },
         {
            "No":"1107",
            "Area":"Ab region109",
            "IsValid":"False"
         },
         {
            "No":"1105",
            "Area":"Hollywood",
            "IsValid":"False"
         }
      ]
   },
   {
      "No":"17",
      "Area":"East",
      "Branches":[
         {
            "No":"212",
            "Area":"region109",
            "IsValid":"False"
         },
         {
            "No":"219",
            "Area":"region116",
            "IsValid":"False"
         }
      ]
   },
   {
      "No":"24",
      "Area":"East11",
      "Branches":[
         {
            "No":"211",
            "Area":"region108",
            "IsValid":"False"
         },
         {
            "No":"218",
            "Area":"region109",
            "IsValid":"False"
         },
         {
            "No":"1102",
            "Area":"region999",
            "IsValid":"False"
         }
      ]
   },
   {
      "No":"25",
      "Area":"N25",
      "Branches":[
         {
            "No":"213",
            "Area":"region110",
            "IsValid":"False"
         },
         {
            "No":"220",
            "Area":"region999",
            "IsValid":"False"
         }
      ]
   }
]

我将此JSON与kendo treeview一起使用。这在PC设备上正常工作。但是有了庞大的JSON集（JSON以上是庞大集的一部分）kendo treeview，选项卡和移动设备就出现了滞后问题。当前使用此JSON，我直接与kendo treeview绑定。但是为了减少滞后问题并提高效率，我需要在过滤后将JSON字符串绑定到kendo treeview。然后，我不需要绑定所有这些巨大的JSON，而只需绑定相关的JSON。我认为要实现这一点，我需要创建另一个函数来搜索/过滤此巨大的JSON结果。例如，当search key = Hollywood时，我需要返回以下JSON（仅相关分支详细信息，并删除其他部分“ No”：“ 1108”和“ No”：“ 1107” ）< / p>

[
   {
      "No":"21",
      "Area":"Default",
      "Branches":[
         {
            "No":"1105",
            "Area":"Hollywood",
            "IsValid":"False"
         }
      ]
   }
]

例如：2 search key = East时，我需要返回以下JSON结果。这意味着我需要同时在Root级和Branch级中搜索Area值

[
   {
      "No":"17",
      "Area":"East",
      "Branches":[
         {
            "No":"212",
            "Area":"region109",
            "IsValid":"False"
         },
         {
            "No":"219",
            "Area":"region116",
            "IsValid":"False"
         }
      ]
   }
]

如何使用JQuery函数或另一种正确的方法来实现此目的。

Answer 1

我建议准备一个剑道数据源。 1）使用transport

将数据读入数据源

2）kendo数据源支持filter operation

3）将数据源绑定到树视图

<div id="treeview"></div>
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  filter: { field: "ProductName", operator: "startswith", value: "Cha" }
});

  dataSource.fetch(function(){
  var view = dataSource.view();
   $("#treeview").kendoTreeView({
  dataSource: view,
  dataTextField: "ProductName"
});
});

Answer 2

这应该可以完成工作

function FilterTree(arr, searchField, searchValue, subSearchField,  results, parentArr){
    for (var i=0 ; i < arr.length ; i++) {
        if (arr[i][searchField] == searchValue) {
            if(parentArr === undefined) results.push(arr[i]);
            else parentArr[subSearchField].push(arr[i]);

        }else if(arr[i][subSearchField] !== undefined){
            var par = JSON.parse(JSON.stringify(arr[i]))
                par[subSearchField] = []

            FilterTree(arr[i][subSearchField], searchField, searchValue, subSearchField,  results, par)
        }
    }       

    if(parentArr !== undefined && parentArr[subSearchField].length) results.push(parentArr)
    return results
    }

这将A）遍历顶层。如果找到匹配项，它将被添加到结果树中

B）如果顶层具有指定的子级，则将以子级为顶层并将父级（OP）添加到另一个数组中来再次调用该函数。然后，如果在子级中找到匹配项，则将其添加到OP中，然后在循环结束时将OP添加到结果树中

示例调用：

FilterTree(tree, "Area", "Hollywood", "Branches", [])

“树”是您的原始JSON对象

如何使用JQuery搜索JSON字符串

2 个答案: