Question

在以下代码中，当我单击jQXgrid的任何行时（基本上执行了该行$(".clickable").on("rowselect", handleClick);），我在网格click me to display jQXGrid!下面看到了一个文本。当我单击此文本时，只要用户继续单击最新文本，便会再次看到该文本并显示。

但是我想添加此功能：

假设用户单击了jQXgrid的第一行，他将看到click me to display jQXGrid!文本，并且只要用户继续单击最新文本，该过程就会继续。然而当用户单击第二行或任何其他行时，我注意到在最新的文本或div之后添加了文本click me to display jQXGrid!。我不要这一步。

我要寻找的是，用户单击第二行或任何其他行（先前使用的行除外（在我们的示例中为第1行）除外），他应该只看到文本{{1 }}和如果用户决定一次又一次地单击最新文本，则链可以继续。基本上，单击第一行时创建的链会被破坏，用户单击jQXgrid的第二行或任何其他行后，就会立即开始一个新链。

当我尝试在click me to display jQXGrid!函数中使用以下代码行时：

handleClick

我注意到，单击网格后，网格消失了，这是有道理的，因为我使用上述代码删除了包含可点击类的div。如何实现上面解释的功能？

谢谢。

某些jQXGrid相关的指针是否可以帮助某人回答我的问题：

1）jQXGrid具有destroy属性，可以像这样if($(".clickable").length != 0){ $(".clickable").remove(); }

破坏网格。

2）通过将它放在$(".clickable").jqxGrid("destroy");函数中：handleClick

，我可以得到jQXgrid所关心的行的索引值。

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;
}

Answer 1

如果要删除所有新添加的div.clickable元素（最近的元素除外），请尝试以下操作：

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

尝试使用OP的代码段提供答案：

在chat中与@Coder进行了澄清之后，我们能够在http://jsfiddle.net/amo4qLb8/44/中获得实现他/她想要的实现的实现。

如果单击表格/表格的新行，尝试删除div

1 个答案: