从特定的第三层嵌套JSON Tabulator属性中过滤整个表

如何解决从特定的第三层嵌套JSON Tabulator属性中过滤整个表

我有一个三层嵌套的JSON对象，最初所有数据都显示在一个Tabulator表中。例如，该医院数据是每个患者病历中每个患者就诊的诊断代码列表。我想按诊断代码过滤，仅显示包含诊断代码的患者病历/帐户，然后在同一表格中重新显示。制表符功能可以做到这一点吗？

基本上，如何显示仅包含“ D55.0” dx_code的“病历>患者账户>诊断代码”的列表。如果我在哪里搜索未附加到任何帐户的诊断代码（如A01.00），则将不会显示任何内容。

var patient_data = [{
  med_rec_num:123,patient_name:"Mickey Mouse",phone:"123456789",age:91,visit_list: [{
      account_num: "A0001",doctor: "Dr. Pepper",location: "Cardiology",diagnosis_list: [{
            num: 1,dx_code: "V95.43XA",visit_type: "Outpatient",poa: 'Y'
          },{
            num: 2,dx_code: "V95.00A",poa: 'N'
            },{
            num: 3,dx_code: "D55.0",poa: 'Y'
          }
        ]
    },{
      account_num: "A0002",doctor: "Dr. Dre",location: "Radiology",dx_code: "K56.60",visit_type: "Inpatient",dx_code: "Z71.89",poa: 'Y'
          }
        ]
    }
  ]
},{
  med_rec_num:456,patient_name:"Jane Smith",phone:"987654321",age:50,visit_list: [{
      account_num: "B0001",doctor: "Dr. Happy",location: "Pharmacology",poa: 'N'
          }
        ]
    }
  ]
}
]

const table = new Tabulator("#example-table",{
    data: patient_data,//height: "311px",layout: "fitColumns",resizableColumns: false,index: "med_rec_num",columns: [
            {formatter: plusIcon,width: 55,hozAlign:"center",tooltip: "Click to expand for Visits info",title:"Visits",headerSort:false,cellClick:function(e,row,formatterParams){
     const id = row.getData().med_rec_num;
    $(".visitTable" + id + "").toggle();}
        },{title:"Medical Record Num",field:"med_rec_num"},{title:"Patient Name",field:"patient_name"},{title:"Phone",field:"phone"},{title:"Age",field:"age"}
    ],rowFormatter: function(row,e) {
    //create and style holder elements
    var holderEl = document.createElement("div");
    var tableEl = document.createElement("div");

    const id = row.getData().med_rec_num;

    holderEl.style.BoxSizing = "border-Box";
    holderEl.style.padding = "10px 10px 10px 10px";
    holderEl.style.borderTop = "1px solid #333";
    holderEl.style.borderBotom = "1px solid #333";
    holderEl.style.background = "#ddd";
    //holderEl.style.display = "none";
    holderEl.setAttribute('class',"visitTable" + id + "");
    

    tableEl.style.border = "1px solid #333";
    //tableEl.style.display = "none";
    tableEl.setAttribute('class',"visitTable" + id + "");
    
    holderEl.appendChild(tableEl);
    row.getElement().appendChild(holderEl);

    var visitTable = new Tabulator(tableEl,{
      layout: "fitColumns",data: row.getData().visit_list,index: "account_num",columns: [
        {formatter: plusIcon,tooltip: "Click to expand for Dx Codes info",title:"Dx Codes",formatterParams){
       const id = row.getData().account_num;
      $(".diagnosisTable" + id + "").toggle();}
      },{title: "Account#",field: "account_num"},{title: "Doctor",field: "doctor"},{title: "Location",field: "location"},],e) {
          //create and style holder elements
          var holderEl = document.createElement("div");
          var tableEl = document.createElement("div");

          const id = row.getData().account_num;

          holderEl.style.BoxSizing = "border-Box";
          holderEl.style.padding = "10px 10px 10px 10px";
          holderEl.style.borderTop = "1px solid #333";
          holderEl.style.borderBotom = "1px solid #333";
          holderEl.style.background = "#ddd";
          //holderEl.style.display = "none";
          holderEl.setAttribute('class',"diagnosisTable" + id + "");


          tableEl.style.border = "1px solid #333";
          //tableEl.style.display = "none";
          tableEl.setAttribute('class',"diagnosisTable" + id + "");

          holderEl.appendChild(tableEl);

          row.getElement().appendChild(holderEl);
          
          //--------------------------------------------------------------- filter here?
          let filterField = document.getElementById("filter-field");
                    
          document.getElementById("filter-trigger").addEventListener("click",function() {
              console.log(filterField.value);           // why is this not working?
              diagnosisTable.setFilter("dx_code","=",filterField.value);
              table.redraw();
          });
          
          document.getElementById("clear-trigger").addEventListener("click",function() {
              console.log(filterField.value);           // why is this not working?
              diagnosisTable.removeFilter("dx_code",filterField.value);
              table.redraw();
          });
          //--------------------------------------------------------------- filter ^here^?

          var diagnosisTable = new Tabulator(tableEl,{
            layout: "fitColumns",data: row.getData().diagnosis_list,index: "id",columns: [
              {title: "Num",field: "num"},{title: "Dx Code",field: "dx_code"},{title: "Type",field: "visit_type"},{title: "P.O.A",field: "poa"}
            ]
         }) // end of diagnosisTable tabulator
      } // end of row formatter that hold diagnosisTable
    }) // end of visitTable tabulator    
  } // end of row formatter that holds visitTable
}); // end of table tabulator

请参阅我的https://jsfiddle.net/zippyzuzka/zo3f5eqs/2/

理想情况下，该表最初显示为折叠的每一层，而不是展开的每一层（我已经编码），并且仍然可以通过第三层属性（我没有编码）进行过滤。 还要注意，整个数据集-Patient_data-是在提交表单后创建的，并通过AJAX发送到表中（如果有帮助的话）。 （但是不在JSfiddle代码中）。

此外，我对任何JavaScript都是新手，所以我的理解还很少。我想这可能需要某种自定义过滤器？我试图添加一个事件单击侦听器，以便能够进行table.setFilter（“ dx_code”，“ =”，filterField.value）;但它不起作用。我不知道如何递归检索父属性。

谢谢！谢谢！