无法在 SlickGrid 单元格中放置按钮答案

【问题标题】：Cannot put a button in SlickGrid cell无法在 SlickGrid 单元格中放置按钮
【发布时间】：2013-04-09 02:46:30
【问题描述】：

我试图在其中一列的单元格中放置一个按钮，并在单击它时执行一些操作。

例如，我将这些行添加到 SlickGrid 示例 1 (http://mleibman.github.io/SlickGrid/examples/example1-simple.html)

首先到我添加的列数组：

    {id: "Report", name: "Report", field: "Report", width: 40, sortable: true, formatter:reportFormatter}

然后我补充：

      function reportFormatter(row, cell, value, columnDef, dataContext) {
          return "<input type='button' value='show' id='reportBtn'/>";
      }

      $('#reportBtn').click(function() {
          alert("hello");
      });

按钮出现在单元格中，但未调用单击事件！我一定是做错了什么，但我一辈子都想不通谁能帮忙？谢谢！

【问题讨论】：

您可以尝试将函数作为 onclick 参数传递。我认为问题可能在于执行顺序，也许它试图将点击事件分配给尚未创建的按钮？

标签： javascript slickgrid

【解决方案1】：

slick.formatters.js

...
"btnForm": buttonsFormatter // add Slick.Formatters
..
  function buttonsFormatter(row, cell, value, columnDef, dataContext) {
      return  "<input type='button' value='"+value+"' id='btnForm' value2='"+row+"' value3='"+cell+"' onClick='fnBtnClick(this);'/>";
  }

添加您的 html 脚本

function fnBtnClick( objBtn ){
 alert( "row::[" + objBtn.value2 + "]\n\ncell::[" + objBtn.value3 + "]" );      
}

【讨论】：

【解决方案2】：

你应该使用网格事件而不是像下面这样的按钮事件，

会调用网格的onclick事件，
检查单击的字段是否是您的按钮之一

做你的事情

grid.onClick.subscribe(function (e, args) {
  //check if your button was clicked  
  if ($(e.target).hasClass("btn")) {
        var item = dataView.getItem(args.row);
        ///do your action
    }

});

【讨论】：

【解决方案3】：

使用预编译的模板光滑网格示例。添加属性，例如。 ImageTrial，并在数据结构中用动态输入按钮填充属性。

<script type=" " id="testtemplate">
<div class="test">
    <b><%=ImageTrial%></b>
     <b><%=ImageTrial2%></b>
</div>

dataForCell["ImageTrial"] = "<button type=\"button\" onclick=\"alert('a " + 1 + "')\">s</button>";

dataForCell["ImageTrial2"] = "<button type=\"button\" onclick=\"alert('b " + 2 + "')\">b</button>";

祝你好运

【讨论】：