Question

我有一个JQGrid。我需要将一些Id带到OnClick函数。在我的场景中，我想让BasicId进入OnClick函数。

mycode的

 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
}

Answer 1

您可以使用onclick='OpenDialog.call(this, event)'代替onclick='OpenDialog()'。您将this内的OpenDialog初始化为点击的<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仍向我们提供有关所点击元素的完整信息。

Answer 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*/)
        }
    })
}

将Id传递给Onclick函数JQGrid

2 个答案: