Как отфильтровать детей в древовидной структуре в табуляторе? - PullRequest
3 голосов
/ 20 марта 2020

Я попытался вызвать функцию setFilter в моей древовидной структуре Табулятора, чтобы отфильтровать элементы. Кажется, это только отфильтровывает лучших родителей. Любая идея, как сделать эту работу для любого уровня (любые дети или родители)? http://tabulator.info/docs/4.1/tree мало что говорит о том, как работает фильтрация.

Функция

table.setFilter('id', '=', 214659) ничего не возвращает ...

Древовидная структура

[
   {
      "level":0,
      "name":"word1",
      "id":125582,
      "_children":[
         {
            "level":1,
            "name":"word6",
            "id":214659
         },
         {
            "level":1,
            "name":"word7",
            "id":214633
         },
         {
            "level":1,
            "name":"word2",
            "id":214263,
            "_children":[
               {
                  "level":2,
                  "name":"word8",
                  "id":131673
               },
               {
                  "level":2,
                  "name":"word9",
                  "id":125579
               },
               {
                  "level":2,
                  "name":"word10",
                  "id":125578
               },
               {
                  "level":2,
                  "name":"word4",
                  "id":172670,
                  "_children":[
                     {
                        "level":3,
                        "name":"word13",
                        "id":172669
                     },
                     {
                        "level":3,
                        "name":"word14",
                        "id":174777
                     },
                     {
                        "level":3,
                        "name":"word5",
                        "id":207661,
                        "_children":[
                           {
                              "level":4,
                              "name":"word15",
                              "id":216529
                           },
                           {
                              "level":4,
                              "name":"word16",
                              "id":223884,
                              "_children":[
                                 {
                                    "level":5,
                                    "name":"word17",
                                    "id":223885,
                                    "_children":[
                                       {
                                          "level":6,
                                          "name":"word18",
                                          "id":229186,
                                          "_children":[
                                             {
                                                "level":7,
                                                "name":"word19",
                                                "id":219062
                                             },
                                             {
                                                "level":7,
                                                "name":"word20",
                                                "id":222243
                                             }
                                          ]
                                       }
                                    ]
                                 }
                              ]
                           }
                        ]
                     }
                  ]
               },
               {
                  "level":2,
                  "name":"word3",
                  "id":214266,
                  "_children":[
                     {
                        "level":3,
                        "name":"word11",
                        "id":216675
                     },
                     {
                        "level":3,
                        "name":"word12",
                        "id":216671
                     }
                  ]
               }
            ]
         }
      ]
   }
]

1 Ответ

2 голосов
/ 06 апреля 2020

После небольшого поиска обнаружил расширение для lodash библиотеки с именем deepdash, которая имеет глубокую фильтрацию и работает довольно хорошо.

У вас будет 2 новые зависимости, но я думаю, что они будут служить вашим цель. Ознакомьтесь с документацией по их установке здесь

Во фрагменте здесь вы можете увидеть в журнале результаты. Я также сделал песочницу здесь

Это список идентификаторов, один или несколько.

Если вам нужно только одно значение, измените условное. return _.indexOf(idList, value.id) !== -1; до return id===value.id;, где id - ваша id переменная

Кроме того, после просмотра документации из Табулятора, у вас будет только один уровень фильтрации, даже если вы напишите свой собственный фильтр, он не будет ' t, потому что он ожидает, что значение bool будет отображать строку или нет. Но только для первого уровня, поэтому, если родитель не то, что вы ищете, ребенок будет игнорироваться. Единственный вариант для вас - отфильтровать данные за пределами табулятора.

const data = [
  {
    level: 0,
    name: "word1",
    id: 125582,
    _children: [
      {
        level: 1,
        name: "word6",
        id: 214659
      },
      {
        level: 1,
        name: "word7",
        id: 214633
      },
      {
        level: 1,
        name: "word2",
        id: 214263,
        _children: [
          {
            level: 2,
            name: "word8",
            id: 131673
          },
          {
            level: 2,
            name: "word9",
            id: 125579
          },
          {
            level: 2,
            name: "word10",
            id: 125578
          },
          {
            level: 2,
            name: "word4",
            id: 172670,
            _children: [
              {
                level: 3,
                name: "word13",
                id: 172669
              },
              {
                level: 3,
                name: "word14",
                id: 174777
              },
              {
                level: 3,
                name: "word5",
                id: 207661,
                _children: [
                  {
                    level: 4,
                    name: "word15",
                    id: 216529
                  },
                  {
                    level: 4,
                    name: "word16",
                    id: 223884,
                    _children: [
                      {
                        level: 5,
                        name: "word17",
                        id: 223885,
                        _children: [
                          {
                            level: 6,
                            name: "word18",
                            id: 229186,
                            _children: [
                              {
                                level: 7,
                                name: "word19",
                                id: 219062
                              },
                              {
                                level: 7,
                                name: "word20",
                                id: 222243
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            level: 2,
            name: "word3",
            id: 214266,
            _children: [
              {
                level: 3,
                name: "word11",
                id: 216675
              },
              {
                level: 3,
                name: "word12",
                id: 216671
              }
            ]
          }
        ]
      }
    ]
  }
];

const idList = [214659];
const found = _.filterDeep(
  data,
  function(value) {
    return _.indexOf(idList, value.id) !== -1;
  },
  { tree: true, childrenPath: '_children' }
);

console.log(found);
<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/deepdash/browser/deepdash.min.js"></script>
<script>
  deepdash(_);
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...