将 Id 传递给 Onclick 函数 JQGrid答案

【问题标题】：Pass Id to a Onclick Function JQGrid将 Id 传递给 Onclick 函数 JQGrid
【发布时间】：2015-04-27 05:46:29
【问题描述】：

我有一个 JQGrid。我需要为 OnClick 函数获取一些 Id。在我的场景中，我想将 BasicId 获取到 OnClick 函数。

我的代码

 function grid() {
    //JqGrid
    $('#griddata').html('<table class="table" id="jqgrid"></table>')
    $('#jqgrid').jqGrid({

        url: '/Admin/GetBasicData/',

        datatype: 'json',
        mtype: 'GET',
        //columns names
        colNames: ['BasicId','Images'],
        //columns model
        colModel: [

                    { name: 'BasicId', index: 'BasicId', resizable: false },


                     {
                         name: 'Images',
                         width: 120,

                         formatter: function () {
                             return "<button class='btn btn-warning btn-xs' onclick='OpenDialog()' style='margin-left:30%'>View</button>";
                         }
                     },

//Some Code here

打开对话框功能

function OpenDialog(BasicId)
{
//Some code here
}

【问题讨论】：

@Oleg 请查看您的答案评论部分

标签： javascript jquery asp.net jqgrid

【解决方案1】：

您可以使用onclick='OpenDialog.call(this, event)' 代替onclick='OpenDialog()'。您将在OpenDialog 内将this 初始化为单击的<button> 和event.target。因此您的代码可能如下所示

function OpenDialog (e) {
    var rowid = $(this).closest("tr.jqgrow").attr("id"),
        $grid = $(this).closest(".ui-jqgrid-btable"),
        basicId = $grid.jqGrid("getCell", rowid, "BasicId");

    // ...

    e.stopPropagation();
}

另外一个选项更好：您不需要指定任何onclick。取而代之的是，您可以使用 jqGrid 的beforeSelectRow callback：

beforeSelectRow (rowid, e) {
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]),
        colModel = $(this).jqGrid("getGridParam", "colModel"),
        basicId = $(this).jqGrid("getCell", rowid, "BasicId");
    if (colModel[iCol].name === "Images") { // click in the column "Images"
        // one can make additional test for 
        //   if (e.target.nodeName.toUpperCase() === "button")
        // to be sure that it was click to the button
        // and not the click on another part of the column
        OpenDialog(rowid);
        return false; // don't select the row - optional
    }
}

最后一种方法的主要优点：不需要进行任何额外的绑定（每个绑定都会获取内存资源并且需要时间）。网格中已经存在click 处理程序，可以使用它。由于事件冒泡，只需单击一次处理程序就足够了。 e.target 为我们提供了关于被点击元素的完整信息。

【讨论】：

我能知道如何在这段代码中获取 QuestionnaireId 而不是 row id var rowid = $(this).closest("tr.jqgrow").attr("id");
@UDP：您的意思可能是BasicId 列的内容？拥有rowid 后，您可以使用var basicId = $(this).jqGrid("getCell", rowid, "BasicId");。一般来说，如果列的值是唯一的，您应该考虑将key: true 属性添加到BasicId 列的定义中。它将通知 jqGrid 使用列中的值作为行的id 属性（rowid）。所以你会有BasicId === rowid。
对不起，我有一个疑问。我使用下面的代码来获取 BasicId.. 但它显示了false 代码：var rowid = $(this).closest("tr.jqgrow" ).attr("id"); var basicId = $(this).jqGrid("getCell", rowid, "BasicId");
@UDP：你使用什么解决方案？使用onclick='OpenDialog()' 还是使用beforeSelectRow？我为这两种情况插入了代码片段。如果您使用onclick='OpenDialog()'，那么this 是点击按钮，$(this).closest("tr.jqgrow").attr("id"); 是正确的，但$(this).jqGrid("getCell", rowid, "BasicId") 不正确，因为您只能与网格一起使用，而不能与按钮一起使用。我在上面展示了您可以使用$grid = $(this).closest(".ui-jqgrid-btable") 找到按钮所在的网格，然后使用basicId = $grid.jqGrid("getCell", rowid, "BasicId")。
@UDP: 如果你要在BasicId 列中添加key: true（只有在每一行都有不同的值时才能使用它），那么rowid 将已经是"BasicId" 而你不需要这样做。

【解决方案2】：

在按钮 html 中编写 js 事件不是一个好主意，它违反了“不显眼的 javasript”原则。您可以改为在 render 函数中在整个网格上添加单击事件，并在回调中根据是否单击按钮进行过滤。

//不确定jqgrid的语法，但大致：

render: function(){
    $('#jqgrid').unbind('click').on('click', function(){
        if($(e.target).hasClass('btn-warning')){
            var tr = $(e.target).parent('tr');
            //retrieve the basicId from 'tr'
            OpenDialog(/*pass the basicId*/)
        }
    })
}

【讨论】：