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

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.

这篇关于在jqGrid的行中添加自定义按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！