orgchart. js Создание вложенной таблицы под каждым узлом (javascript версия) - PullRequest
0 голосов
/ 09 февраля 2020

Здравствуйте, я пытаюсь добавить таблицу для каждого узла, я решил воспользоваться преимуществом createNode свойства плагина, похоже, он работает правильно на консоли, но он продолжал выдавать ошибку

orgchart.js:1461 Failed to creat node TypeError: Cannot read property '0' of undefined

at Object.createNode (customOrgchart.js:50)

at orgchart.js:1423

at new Promise (<anonymous>)

at OrgChart._createNode (orgchart.js:1339)

at OrgChart.buildHierarchy (orgchart.js:1442)

at orgchart.js:1537

at Array.forEach (<anonymous>)

at OrgChart.buildHierarchy (orgchart.js:1527)

at new OrgChart (orgchart.js:41)

at HTMLDocument.<anonymous> (customOrgchart.js:40)

javascript file (customOrgchart. js):

import OrgChart from '../js/orgchart.js';
document.addEventListener('DOMContentLoaded' , function () {

let datascource = {
  'name': 'Lao Lao',
  'title': 'general manager',
  'Resp':[{"Description":'item1',"price":'10$',"warranty":"1y","parts":"available"},{"Description":'item2',"price":'15$',"warranty":"1y","parts":"available"},{"Description":'item3',"price":'18$',"warranty":"1y","parts":"available" }],// that's the only part i've added 
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager' },
    { 'name': 'Su Miao', 'title': 'department manager',
      'children': [
        { 'name': 'Tie Hua', 'title': 'senior engineer' },
        { 'name': 'Hei Hei', 'title': 'senior engineer',
          'children': [
            { 'name': 'Pang Pang', 'title': 'engineer' },
            { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
          ]
        }
      ]
    },
    { 'name': 'Yu Jie', 'title': 'department manager' },
    { 'name': 'Yu Li', 'title': 'department manager' },
    { 'name': 'Hong Miao', 'title': 'department manager' },
    { 'name': 'Yu Wei', 'title': 'department manager' },
    { 'name': 'Chun Miao', 'title': 'department manager' },
    { 'name': 'Yu Tie', 'title': 'department manager' }
  ]
},
orgchart = new OrgChart({
'chartContainer': '#chart-container',
'data' : datascource,
'nodeContent': 'title',
'draggable': true,
'toggleSiblingsResp': false,
'createNode': function(node, data) {

  /// what i've added
let secondMenuIcon = document.createElement('i'),
  table = document.createElement('table');
  console.log(Object.keys(data.Resp[0])); //  data.Resp[0] looks correct in the console but also generats the error I've mentioned.

function generateTableHead(node, dataHr2) {
let thead = table.createTHead();
let row = thead.insertRow();
for (let key of dataHr2) {
  let th = document.createElement("th");
  let text = document.createTextNode(key);
  th.appendChild(text);
  row.appendChild(th);
  }
}

function generateTable(node, data) {

for (let element of data) {
  let row = table.insertRow();
  for (let key in element) {
    let cell = row.insertCell();
    let text = document.createTextNode(element[key]);
    cell.appendChild(text);
    table.appendChild(secondMenuIcon);
    table.appendChild(cell);

      }
    }
  } 

generateTableHead(node, Object.keys(data.Resp[0]));
generateTable(table, data.Resp);
console.log('table = ',table); // I can see the Table in the console 
},// end of what I've added

'dropCriteria': function(draggedNode, dragZone, dropZone) {
  if(draggedNode.querySelector(':scope > .content').textContent.includes('manager') &&
    dropZone.querySelector(':scope > .content').textContent.includes('engineer')) {
    return false;
  }
  return true;
}
});

});

все журналы выглядят правильно в консоли, в самой библиотеке есть что-то, чего я не делаю понимать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...