Получение контрольного списка для отображения всех выбранных элементов (а не того, который выбран первым) - PullRequest
Новая
       14

Получение контрольного списка для отображения всех выбранных элементов (а не того, который выбран первым)

0 голосов
/ 28 января 2019

У меня есть таблица данных с флажками, которые соответствуют каждой строке.В идеале, когда вы нажимаете на флажок, он добавляет содержимое этой строки в «Список избранного».Но то, что происходит, это то, что какой-либо флажок, который я нажимаю, является единственным, который отображается в списке.

Я получаю , почему отображается только первый элемент (favesArr[0]), но я хочу знать, что how to get the List to show all of the items that are selected. Я пропустил файл HTML в этом вопросе, так что если выХотелось бы увидеть его, затем дайте мне знать.

Вот скриншот , который показывает мой браузер.

Пример JS: 

import JSONfile from '../../../public/JSONfile.json';

loadTableData() {
    $.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {

      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name,
        "Categories": obj.ResourceType.results.map(function(val) {
          return val.Label;
        }).join(";"),
        // "Blank": ''
        }

      });

$('#km-table-id').DataTable( {
      columns: [
        { data: "Titles" }, // populates col-2 column with docs
        { data: "Categories" } // hidden col-3 categories
      ],
      columnDefs: [
        {
          data: "Path",
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: 0
        },
        { searchable: true, targets: [1], visible: false },
      ],
      data: tableRes,
      language: { searchPlaceholder: "Search All Documents" },
      responsive: true,
        scrollCollapse: true,
        scrollX: true,
        scrollY: 600,
      select: {
        selector: "td:first-child",
        style: "os"
      },
      stateSave: true
    });

    ($("#km-table-id tbody tr")).append($("<input />", {"type": "checkbox"}).addClass("checkbox-class"));

    const $table = $("#km-table-id")

    let table = $table.DataTable();
    let favesArr = [];

    $table.on("click", ".checkbox-class", function(e) {
      let data = table.row(this.parentNode).data(),
      checked = $(this).is(":checked"),
      dataIndex = favesArr.indexOf(data);
      if (checked) {
        if (dataIndex === -1) {
          favesArr.push(data); // add item
        }
      } else {
        if (dataIndex > -1) {
          favesArr.splice(dataIndex, 1); // remove item
        }
      }     

      // let arrOfTitles = favesArr;
      // let uniqueTitles = [];
      // $.each(arrOfTitles, function(e, el) {
      //   if ($.inArray(el, uniqueTitles) === -1) uniqueTitles.push(el);
      // });

      $(".populate-faves").append(JSON.stringify(favesArr[0].Titles) + '<br/>'); /////// This is the line that's bugging me


      console.log(favesArr); ///// does show whichever document (obj) is selected
    });


  } // ------------------ loadTableData

1 Ответ

0 голосов
/ 28 января 2019

Чтобы получить одну строку для каждой записи в favesArr, вы можете сначала удалить все предыдущие записи ($(".populate-faves").empty();), а затем добавить одну запись для каждого фаворита, например: 

for (var i=0;i<favesArr.length;i++) {
    $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/>');
}

Конечно, есть много способов сделать это более элегантно, но это был бы самый интуитивный способ, если бы вы были сейчас, я думаю.

...