Попытка удалить div, если нажата новая строка таблицы / таблицы - PullRequest
Новая
       20

Попытка удалить div, если нажата новая строка таблицы / таблицы

0 голосов
/ 02 октября 2018

В следующем коде, когда я щелкаю по любой строке jQXgrid (в основном эта строка $(".clickable").on("rowselect", handleClick); выполняется), я вижу текст под сеткой click me to display jQXGrid!.Когда я нажимаю на этот текст, я снова вижу этот текст, и он отображается, пока пользователь продолжает нажимать на последний текст.

Но я хочу добавить эту функциональность:

Предположим, пользователь имеетщелкнув по первой строке jQXgrid, он увидит текст click me to display jQXGrid!, и процесс будет продолжаться до тех пор, пока пользователь нажимает на последний текст.Однако, когда пользователь нажимает на вторую строку или любую другую строку, я замечаю, что текст click me to display jQXGrid! добавляется после последнего текста или div.Я не хочу этот шаг.

Что я ищу, так это то, что как только пользователь нажимает на вторую строку или любую другую строку (кроме той, которая использовалась ранее (в нашем случае это была строка 1)), он должен видеть только текстclick me to display jQXGrid! и цепочка может продолжиться, если пользователь решит снова и снова нажимать на последний текст.По сути, цепочка, созданная при нажатии на первую строку, разрушается, и новая цепочка запускается, как только пользователь нажимает на вторую строку или любую другую строку jQXgrid.

Когда я попытался использовать следующую строку кода внутри функции handleClick: 

if($(".clickable").length != 0){
                    $(".clickable").remove();
                }

Я заметил, что как только я щелкнул сетку, она исчезла, что имеет смысл, так как я удалилdiv, содержащий интерактивный класс с использованием приведенного выше кода.Как я могу достичь функциональности, которую я объяснил выше?

Спасибо.

Некоторые связанные с jQXGrid указатели, если это поможет кому-то ответить на мой вопрос:

1) У jQXGrid есть свойство destroy для уничтожения сетки, как это $(".clickable").jqxGrid("destroy");

2) Я могуполучить значение индекса строки, насколько это касается jQXgrid, поместив это в handleClick функцию: console.log(e.args.rowindex); 

var source = {
  localdata: [
    ["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
    ["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
    ["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
    ["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
    ["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
    ["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
    ["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
  ],
  datafields: [{
      name: 'link',
      type: 'string',
      map: '0'
    },
    {
      name: 'ContactName',
      type: 'string',
      map: '1'
    },
    {
      name: 'Title',
      type: 'string',
      map: '2'
    },
    {
      name: 'Address',
      type: 'string',
      map: '3'
    },
    {
      name: 'City',
      type: 'string',
      map: '4'
    },
    {
      name: 'Country',
      type: 'string',
      map: '5'
    }
  ],
  datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);


$(".clickable").jqxGrid({
  width: 800,
  height: 270,
  source: dataAdapter,
  columnsresize: true,
  sortable: true,
  columns: [{
      text: 'Link',
      datafield: 'link',
      width: 200
    },
    {
      text: 'Contact Name',
      datafield: 'ContactName',
      width: 150
    },
    {
      text: 'Contact Title',
      datafield: 'Title',
      width: 100
    },
    {
      text: 'Address',
      datafield: 'Address',
      width: 100
    },
    {
      text: 'City',
      datafield: 'City',
      width: 100
    },
    {
      text: 'Country',
      datafield: 'Country'
    }
  ]
});

var id = 1;


$(".clickable").on("rowselect", handleClick);



function handleClick(e) {

  var newEl = $("<div/>", {
    class: "clickable",
    id: "grid" + id,
    style: "margin:100px 10px 20px 200px ",
    text: 'click me to display jQXGrid!'
  }).append($("<div />", {
    id: "button"
  }));


 // console.log("Test Row Index Value");
  //console.log(e.args.rowindex); 
  

  //$("#button").jqxButton({ value: 'Export Grid '});

 

  id++;

  console.log("Value of ID here:" + id);
  // add click Event listener to the newly created div, the same function(here I name irt 'handleClick') is the handler.
  newEl.on('click', handleClick);

  
  $(this).parent().append(newEl);
  // remove click Event from the current clicked div.
  $(this).off('click');



}
.test {
  margin: 100px 10px 20px 200px;
}
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<div class="wrapper">
  <div id="grid" class="clickable" style="margin:100px 10px 20px 200px;"></div>
</div>

1 Ответ

0 голосов
/ 02 октября 2018

Если вы хотите удалить все вновь добавленные div.clickable элементы, кроме самого последнего, попробуйте следующее: 

$('#grid').nextAll('.clickable').slice(0, -1).remove();

Попытка предоставить ответ с использованием фрагмента OP:

После разъяснения с @Coder в chat мы смогли получить реализацию, которая достигает того, что он / она искал, в http://jsfiddle.net/amo4qLb8/44/.

...