Блог

У меня есть объект JSON с тройным вложением, где изначально все данные отображаются в одной таблице табулятора. Например, эти данные больницы представляют собой список кодов диагностики для каждого посещения пациента в медицинской карте каждого пациента. Я хочу фильтровать по коду диагноза и отображать только те медицинские записи / учетные записи пациентов, которые содержат код диагноза и повторно отображаются в одной таблице. Возможно ли это сделать с помощью функций табуляции?

В принципе, как я могу отобразить список только тех «медицинских записей> учетных записей пациентов> кодов диагностики», которые содержат dx_code ‘D55.0’. Если я найду, где искать по коду диагностики, который не привязан ни к одной учетной записи, например, 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",
            visit_type: "Outpatient",
            poa: 'N'
            },
          {
            num: 3,
            dx_code: "D55.0",
            visit_type: "Outpatient",
            poa: 'Y'
          }
        ]
    },
    {
      account_num: "A0002",
      doctor: "Dr. Dre",
      location: "Radiology",
      diagnosis_list: [{
            num: 1,
            dx_code: "K56.60",
            visit_type: "Inpatient",
            poa: 'Y'
          },
          {
            num: 2,
            dx_code: "Z71.89",
            visit_type: "Inpatient",
            poa: 'Y'
          }
        ]
    }
  ]
},
{
  med_rec_num:456,
  patient_name:"Jane Smith",
  phone:"987654321",
  age:50,
  visit_list: [{
      account_num: "B0001",
      doctor: "Dr. Happy",
      location: "Pharmacology",
      diagnosis_list: [{
            num: 1,
            dx_code: "Z71.89",
            visit_type: "Inpatient",
            poa: 'Y'
          },
          {
            num: 2,
            dx_code: "D55.0",
            visit_type: "Outpatient",
            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, width: 55, hozAlign:"center", tooltip: "Click to expand for Dx Codes info", title:"Dx Codes", headerSort:false, cellClick:function(e, row, formatterParams){
       const id = row.getData().account_num;
      $(".diagnosisTable"   id   "").toggle();}
      },
        {title: "Account#",field: "account_num"},
        {title: "Doctor",field: "doctor"},
        {title: "Location", field: "location"},
      ],
      
      rowFormatter: function(row, 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 /

В идеале, таблица изначально отображалась бы с каждым свернутым уровнем вместо каждого развернутого уровня (который я закодировал) и все еще могла бы фильтроваться через свойство 3-го уровня (которое я не закодировал).). Также обратите внимание, что весь набор данных — patient_data — создается после отправки формы и отправляется в таблицу через AJAX, если это что-то помогает. (однако не в коде JSFiddle).

Кроме того, я новичок во всем, что касается JavaScript, поэтому мое понимание довольно мало. Я бы предположил, что для этого потребуется, возможно, какой-то пользовательский фильтр? Я попытался добавить прослушиватель событий, чтобы иметь возможность использовать table.setFilter(«dx_code», «=», filterField.value); но это не работает. Я не знаю, как рекурсивно получить родительские свойства.

Спасибо! Спасибо!