Question

我在这里模拟https://codepen.io/anon/pen/WzMpga?editors=0010

我需要帮助将最后一列作为可点击按钮，并且在点击（操作）上，员工的层次结构应该在第一列中展开。

另外，如果您可以指导我如何获得按钮上的那个+/-图标，如果它有父母那么

function createAccordion(oneEmployee) {
  var returnValues = [];
  var accordionButton = document.createElement("button");
  accordionButton.className = "accordion";
  accordionButton.setAttribute("value", oneEmployee.resolverGroups);
  accordionButton.setAttribute("onClick", "populateResolverGroups('"+oneEmployee.resolverGroups+"', '" + oneEmployee.employee + "')");

  watchingRGs[oneEmployee.employee] = oneEmployee.resolverGroups;
  watchResolverGroup("", oneEmployee.employee);

  var accordionTextNode = document.createTextNode(oneEmployee.employee);
  accordionButton.appendChild(accordionTextNode);
  returnValues[0] = accordionButton;
  var accordionDiv = document.createElement("div");
  accordionDiv.className = "panel";
  if (oneEmployee.reports.length > 0) {
    for (var empInd = 0; empInd < oneEmployee.reports.length; empInd++) {
      var thisEmpAcc = createAccordion(oneEmployee.reports[empInd]);
      accordionDiv.appendChild(thisEmpAcc[0]);
      accordionDiv.appendChild(thisEmpAcc[1]).click();
    }
  }
  returnValues[1] = accordionDiv;
  if(oneEmployee.resolverGroups.length > 0 ) {
  accordionButton.click(); 
  }
  return returnValues;
}

function populateResolverGroups(resolverGroups, employeeName) {
  document.getElementById('resolvergroups').innerHTML = "";
  var rgList = resolverGroups.split(',');
  for (var rgInd = 0; rgInd < rgList.length; rgInd++) {
    var cbox = document.createElement('input');
   cbox.setAttribute("onclick", "watchResolverGroup('"+rgList[rgInd]+"', '"+employeeName+"')");
    cbox.type = "checkbox";
    cbox.name = rgList[rgInd]; 
    cbox.value = rgList[rgInd];
    cbox.id = rgList[rgInd];

    //cbox.checked = true;
    //keeps track of the RGs that are checked
    if (watchingRGs[employeeName] !== undefined) {
    if (watchingRGs[employeeName].includes(rgList[rgInd])) {
        cbox.checked = true;
      }
    }   
    var cboxTextNode = document.createTextNode(rgList[rgInd]);
    var linebreak = document.createElement("br");
    document.getElementById('resolvergroups').appendChild(cbox);
    document.getElementById('resolvergroups').appendChild(cboxTextNode);
    document.getElementById('resolvergroups').appendChild(linebreak);

  }
}


function watchResolverGroup(resolverGroupName, employeeName) {
  var selectedRGs = [];
  if (watchingRGs[employeeName] !== undefined) {
    selectedRGs = watchingRGs[employeeName];
  }
  if (resolverGroupName.length > 0) {
    if (selectedRGs.includes(resolverGroupName)) {
      selectedRGs.splice(selectedRGs.indexOf(resolverGroupName), 1);
    } else {
      selectedRGs.push(resolverGroupName);
    }
  }
  watchingRGs[employeeName] = selectedRGs;

  document.getElementById("selected_resolvergroups").innerHTML = "";
  for (var key in watchingRGs) {
    var val = watchingRGs[key];
    for (var rgInd = 0; rgInd < val.length; rgInd++) {
      var tempTextNode = document.createTextNode(val[rgInd] + " -> " + key);
      var linebreak = document.createElement("br");
      document.getElementById("selected_resolvergroups").appendChild(tempTextNode);
      document.getElementById("selected_resolvergroups").appendChild(linebreak);
    }
  }
}

如何处理？

Answer 1

对于Open Close Hiracrhy，这将帮助您

http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html Example

如果你想自己建立一下这个小提琴，它会有所帮助

JS Fiddle

<table id="mytable">
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Item 1</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td><span class="toggle"></span>Item 2</td>
        <td>123</td>
    </tr>
</table>

需要Javascript Dynamic Accordion帮助

1 个答案: