tree

JavaScript tree library

Browser Support

| | | |
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

1. Install

yarn install
# OR
npm install

2. Run

npm start

3. Open http://localhost:8891 in your browser

사용방법

var treeItem = [];
treeItem.push({ id: 0, pid: '', text: 'My example tree1', url: "detail('2')" });
treeItem.push({ id: 1, pid: 0, text: 'pub 1', url: "detail('2')" });
treeItem.push({ id: 3, pid: 1, text: 'pub 1.1', url: "detail('2')" });
treeItem.push({ id: 5, pid: 3, text: '5Node 1.1.1', url: "detail('2')", state: { checked: true } });
treeItem.push({ id: 6, pid: 5, text: '6Node 1.1.1.1', url: "detail('2')" });
treeItem.push({ id: 14, pid: 3, text: '14Node 1.1.1', url: "detail('2')" });
treeItem.push({ id: 15, pid: 14, text: '15Node 1.1.1', url: "detail('2')" });
treeItem.push({ id: 16, pid: 14, text: '16Node 1.1.1', url: "detail('2')", childCnt: 1000 });
treeItem.push({ id: 4, pid: 0, text: '4Node 3', url: "detail('2')" });
treeItem.push({ id: 2, pid: 0, text: '2Node 2', url: "detail('2')" });
treeItem.push({ id: 7, pid: 0, text: '7Node 4', url: "detail('2')" });
treeItem.push({ id: 41, pid: 0, text: '4Node 3', url: "detail('2')" });
treeItem.push({ id: 21, pid: 0, text: '2Node 2', url: "detail('2')" });
treeItem.push({ id: 712, pid: 0, text: '7Node 4', url: "detail('2')" });
treeItem.push({ id: 9, pid: 0, text: '9My Pictures', url: "detail('2')", img: 'img/cd.gif', childCnt: 10 });

const example1 = Daracl.tree.create("#treeDiv", {
   items: treeItem
   , style: {
      height: '200px'
   }
   , rootNode: {
      id: 0
      , text: 'root node'
   }
   , enableRootNode1: true
   , enableIcon: true
   , openDepth: -1
   , plugins: {
      checkbox: {}
      , edit: {
         before: function (item) {
         console.log(item)
         //return false;
         }
         , after: function (item) {
         console.log(item)
         //return 'asdfawef';
         }
      }
      , dnd: {
         drop: function (item) {
         console.log('item ', item);
         }
      }
      , request1: {
         searchNode: function (node) {

         fetch('/data/tree-node.json?id=${node.id}&pid=' + node.pid, {
            method: 'get', data: node
         })
            .then(function (response) {
               return response.json();
            })
            .then(function (data) {

               const nodeData = [];


               for (let idx in data) {
               var item = data[idx];

               if (item.pid == node.id) {
                  if (item.state) {
                     item.state.folder = true;
                  } else {
                     item.state = { folder: true }
                  }
                  nodeData.push(item);
               }
               }
               treeObj.addNode(nodeData)
            })
            .catch(function (error) {
               console.log(error)
            });

         }
         , removeNode: function (node) {
         console.log('removeNode ', node)

         }
         , modifyNode: function (node) {
         console.log('modifyNode ', node)
         }
         , createNode: function (node) {
         treeObj.getNodeInfo(node.id).setEdit();
         console.log(node);
         //console.log('createNode ', node)
         }
      }
   }
   , click: function (nodeInfo) {
      console.log('click', nodeInfo.id)
   }
   , dblclick: function (nodeInfo) {
      console.log('dblclick', nodeInfo.id)
      //return false;
   }
   , selectNode: function (nodeInfo) {
      console.log('selectNode', nodeInfo.id)
   }

   });

옵션

License

Darainfo is under MIT License.