Leere itemliste erstellen ohne fehler

  • JavaScript

    Leere itemliste erstellen ohne fehler

    Hallo zusammen

    Ich habe unten einen langen Script hineingetan. Überall wo es ​item: [ null ] steht, soll eine leere item-Liste angefügt werden. Ich habe den Code aus einem Tutorial, aber dieser hatte Beispielelemente drin. Wie kann ich dieses anstellen, sodass es wieder mein kanban-board anzeigt?
    Spoiler anzeigen
    ​

    HTML-Quellcode

    1. ​<!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta name="viewport" content="width=device-width, initial-scale=1" />
    7. <title>Title</title>
    8. <link rel="stylesheet" href="../dist/jkanban.min.css" />
    9. <link rel="stylesheet" href="../dist/jkanban.min.js" />
    10. <link
    11. href="https://fonts.googleapis.com/css?family=Lato"
    12. rel="stylesheet"
    13. />
    15. <style>
    16. body {
    17. font-family: "Lato";
    18. margin: 0;
    19. padding: 0;
    20. }
    22. #myKanban {
    23. overflow-x: auto;
    24. padding: 20px 0;
    25. }
    27. .success {
    28. background: #00b961;
    29. }
    31. .info {
    32. background: #2a92bf;
    33. }
    35. .warning {
    36. background: #f4ce46;
    37. }
    39. .error {
    40. background: #fb7d44;
    41. }
    43. .custom-button {
    44. background-color: #4CAF50;
    45. border: none;
    46. color: white;
    47. padding: 7px 15px;
    48. margin: 10px;
    49. text-align: center;
    50. text-decoration: none;
    51. display: inline-block;
    52. font-size: 16px;
    53. }
    54. </style>
    55. </head>
    56. <body>
    57. <div id="myKanban"></div>
    58. <button id="addDefault">Add "Default" board</button>
    59. <br />
    60. <button id="addToDo">Add element in "To Do" Board</button>
    61. <br />
    62. <button id="removeBoard">Remove "Done" Board</button>
    63. <br />
    64. <button id="removeElement">Remove "My Task Test"</button>
    66. <script src="../dist/jkanban.js"></script>
    67. <script>
    68. var KanbanTest = new jKanban({
    69. element: "#myKanban",
    70. gutter: "10px",
    71. widthBoard: "450px",
    72. itemHandleOptions:{
    73. enabled: true,
    74. },
    75. click: function(el) {
    76. console.log("Trigger on all items click!");
    77. },
    78. dropEl: function(el, target, source, sibling){
    79. console.log(target.parentElement.getAttribute('data-id'));
    80. console.log(el, target, source, sibling)
    81. },
    82. buttonClick: function(el, boardId) {
    83. console.log(el);
    84. console.log(boardId);
    85. // create a form to enter element
    86. var formItem = document.createElement("form");
    87. formItem.setAttribute("class", "itemform");
    88. formItem.innerHTML =
    89. '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs pull-right">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>';
    91. KanbanTest.addForm(boardId, formItem);
    92. formItem.addEventListener("submit", function(e) {
    93. e.preventDefault();
    94. var text = e.target[0].value;
    95. KanbanTest.addElement(boardId, {
    96. title: text
    97. });
    98. formItem.parentNode.removeChild(formItem);
    99. });
    100. document.getElementById("CancelBtn").onclick = function() {
    101. formItem.parentNode.removeChild(formItem);
    102. };
    103. },
    104. itemAddOptions: {
    105. enabled: true,
    106. content: '+ Add New Card',
    107. class: 'custom-button',
    108. footer: true
    109. },
    110. boards: [
    111. {
    112. id: "_todo",
    113. title: "To Do",
    114. class: "info,good",
    115. dragTo: ["_working"],
    116. item: [ null ]
    117. },
    118. {
    119. id: "_working",
    120. title: "Working",
    121. class: "warning",
    122. item: [ null ]
    123. },
    124. {
    125. id: "_done",
    126. title: "Done",
    127. class: "success",
    128. dragTo: ["_working"],
    129. item: [ null ]
    130. }
    131. ]
    132. });
    134. var toDoButton = document.getElementById("addToDo");
    135. toDoButton.addEventListener("click", function() {
    136. KanbanTest.addElement("_todo", {
    137. title: "Test Add"
    138. });
    139. });
    141. var addBoardDefault = document.getElementById("addDefault");
    142. addBoardDefault.addEventListener("click", function() {
    143. KanbanTest.addBoards([
    144. {
    145. id: "_default",
    146. title: "Kanban Default",
    147. item: [
    148. {
    149. title: "Default Item"
    150. },
    151. {
    152. title: "Default Item 2"
    153. },
    154. {
    155. title: "Default Item 3"
    156. }
    157. ]
    158. }
    159. ]);
    160. });
    162. var removeBoard = document.getElementById("removeBoard");
    163. removeBoard.addEventListener("click", function() {
    164. KanbanTest.removeBoard("_done");
    165. });
    167. var removeElement = document.getElementById("removeElement");
    168. removeElement.addEventListener("click", function() {
    169. KanbanTest.removeElement("_test_delete");
    170. });
    172. var allEle = KanbanTest.getBoardElements("_todo");
    173. allEle.forEach(function(item, index) {
    174. //console.log(item);
    175. });
    176. </script>
    177. </body>
    178. </html>