在jqGrid的行中添加自定义按钮?

您可以在此处对每一行使用操作格式化程序，并在 formatOptions 中将编辑和删除按钮设置为 false，如下所示:

格式选项:{editbutton:false,delbutton:false}}

并按照这两个演示:

http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm

http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm

并且在这些自定义按钮的点击事件中显示您的警报:

编辑

var getColumnIndexByName = function (grid, columnName) {var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;对于 (i = 0; i < l; i++) {if (cm[i].name === columnName) {返回我；//返回索引}}返回-1；},功能 () {var iCol = getColumnIndexByName(grid, 'act');$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")").每个(函数(){$("
", {标题:自定义"，鼠标悬停:函数(){$(this).addClass('ui-state-hover');},鼠标移出:函数(​​){$(this).removeClass('ui-state-hover');},点击:函数(e){alert("'自定义'按钮在 rowis="+ 中被点击$(e.target).closest("tr.jqgrow").attr("id") +" !");}}).css({"margin-right": "5px", float: "left", cursor: "pointer"}).addClass("ui-pg-div ui-inline-custom").append('<span class="ui-icon ui-icon-document"></span>').prependTo($(this).children("div"));});}

如果您检查此代码，我会尝试通过将列名指定为act"来找出索引值，您可以通过提供不同的列名来获取任何其他列的索引.

var iCol = getColumnIndexByName(grid, 'Demo');其余的代码对你来说都是一样的.//demo 是你要添加自定义按钮的列名

并为此按钮编写您的点击事件.

让我知道这是否适合你.

I want to make a simple table that contains a custom button in a row. When the button is pushed, I want to pop up an 'alert' box. I have read some posts on this, for example: this post and this other post, and I don't understand why my code is not working. The buttons are drawn, but pushing them has no effect.

I have three attempts described here.

Version 1. The button click never fires:

  $(document).ready(function(){
      jQuery("#simpletable").jqGrid({
         datatype: "local",
        colNames:['A','B','Status'],
        colModel:[
        {name:'A',index:'A'},
        {name:'B',index:'B'},
        {name:'status',index:status}
    ],
        data:[ 
        {'A':2,'B':100,'status':"<button  onclick="jQuery('#simpletable').saveRow('1', function(){alert('you are in')});" >in</button>"},
        {'A':1,'B':200,'status':"<button onclick="jQuery('#simpletable').saveRow('2', function(){alert('you are in')});" >in</button>"},
        ],
        caption: "Demo of Custom Clickable Button in Row",
        viewrecords:true,
        editurl:'clientArray',
    });

   });

Html Code:

<table id="simpletable"></table>

EDIT 8/2/12 -- I've learned some things since my original post and here I describe two more attempts.

Version 2: I use onCellSelect. This works, but it would not allow me to put more than one button in a cell. Additionally, I made the code nicer by using the format option suggested by one of the comments to this post.

function status_button_maker_v2(cellvalue, options, rowObject){
    return "<button class="ver2_statusbutton">"+cellvalue+"</button>"
};

jQuery("#simpletablev2").jqGrid({
    datatype: "local",
    colNames:['A','B','Status'],
    colModel:[
    {name:'A',index:'A'},
    {name:'B',index:'B'},
    {name:'status',index:status,editable:true,formatter:status_button_maker_v2}
    ],
        data:[ 
    {'A':2,'B':100,'status':"In"},
    {'A':1,'B':200,'status':"Out"}
        ],

    onCellSelect:function(rowid,icol,cellcontent,e){
    if (icol==2){

        alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
    }else{
        return true;
    }
    },

    caption: "Demo of Custom Clickable Button in Row, ver 2",
    viewrecords:true,
});  //end simpletablev2

Markup:

<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>

Version 3: I tried to use the solution to w4ik's post, using ".on" instead of deprecated ".live". This causes the button click to fire, but I don't know how to retrieve the rowid. w4ik also struggled with this, and he posted that he worked it out, but not how he did it. I can get the last row selected, but this will always refer to the previous row selected because the button is taking priority.

I would prefer this solution if I could get it to work.

jQuery("#simpletablev3").jqGrid({
    datatype: "local",
    colNames:['A','B','Status'],
    colModel:[
    {name:'A',index:'A'},
    {name:'B',index:'B'},
    {name:'status',index:status,editable:true,formatter:status_button_maker_v3}
    ],
        data:[ 
    {'A':2,'B':100,'status':"In"},
    {'A':1,'B':200,'status':"Out"}
        ],
    caption: "Demo of Custom Clickable Button in Row, ver 3",
    viewrecords:true,
    onSelectRow: function(){},
    gridComplete: function(){}
});  //end simpletablev3


$(".ver3_statusbutton").on(
    {
    click: function(){
        //how to get the row id?  the following does not work
        //var rowid = $("#simpletablev3").attr('rowid'); 
        //
        //it also does not work to get the selected row
        //   this is always one click behind:
        //$("#simpletablev3").trigger("reloadGrid");
        rowid = $("#simpletablev3").getGridParam('selrow');
        alert("button pushed! rowid = "+rowid);
    }
    });

Markup:

 <style>.ver3_statusbutton {    color:red;} </style>
 <h3>simple table, ver 3:</h3>
 <table id="simpletablev3"></table>

In summary, I'm struggling with the issue of getting my button to be pushed at the right time. In version 1, the row gets selected and the button never gets pushed. Version 2 does not use the "button" at all -- It just handles the cell click. Verion 3 gets the button click before the row select (wrong order).

Any help would be appreciated!

You can use action formatter here with each row and make edit and delete button as false in formatOptions like this:

formatoptions: {editbutton:false,delbutton:false}}

And follow these two demos:

http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm

http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm

And on click event of these custom buttons show your alert:

EDIT

var getColumnIndexByName = function (grid, columnName) {

                var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;

                for (i = 0; i < l; i++) {

                    if (cm[i].name === columnName) {

                        return i; // return the index

                    }

                }

                return -1;

            },

function () {

                var iCol = getColumnIndexByName(grid, 'act');

                $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")

                    .each(function() {

                        $("<div>", {

                            title: "Custom",

                            mouseover: function() {

                                $(this).addClass('ui-state-hover');

                            },

                            mouseout: function() {

                                $(this).removeClass('ui-state-hover');

                            },

                            click: function(e) {

                                alert("'Custom' button is clicked in the rowis="+

                                    $(e.target).closest("tr.jqgrow").attr("id") +" !");

                            }

                        }

                      ).css({"margin-right": "5px", float: "left", cursor: "pointer"})

                       .addClass("ui-pg-div ui-inline-custom")

                       .append('<span class="ui-icon ui-icon-document"></span>')

                       .prependTo($(this).children("div"));

                });

            }

If you check this code, I'm trying to find out index value by giving column name as 'act', you can get index on any other column by giving a different column name.

var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button

and write your click event for this button.

Let me know if this works for you or not.