Ich möchte eine einfache Tabelle erstellen, die eine benutzerdefinierte Schaltfläche in einer Reihe enthält. Wenn der Knopf gedrückt wird, möchte ich ein "Alarm" -Feld öffnen. Ich habe einige Posts dazu gelesen, zum Beispiel:dieser Beitrag unddieser andere Beitragund ich verstehe nicht, warum mein Code nicht funktioniert. Die Schaltflächen werden gezeichnet, aber das Drücken hat keine Auswirkung.

Ich habe hier drei Versuche beschrieben.

Version 1. Der Klick auf die Schaltfläche wird niemals ausgelöst:

  $(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 Quelltext:

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

EDIT 8/2/12 - Ich habe seit meinem ursprünglichen Beitrag einige Dinge gelernt und hier beschreibe ich zwei weitere Versuche.

Version 2: Ich benutze onCellSelect. Das funktioniert, aber es würde mir nicht erlauben, mehr als einen Knopf in eine Zelle zu stecken. Außerdem habe ich den Code mit der in einem Kommentar zu diesem Beitrag vorgeschlagenen Formatoption verbessert.

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: Ich habe versucht, die Lösung zu verwendenw4iks BeitragVerwenden Sie ".on" anstelle von ".live". Dadurch wird das Klicken auf die Schaltfläche ausgelöst, aber ich weiß nicht, wie ich die Rowid abrufen kann. w4ik kämpfte auch damit, und er gab bekannt, dass er es ausarbeitete, aber nicht, wie er es tat. Ich kann die letzte Zeile auswählen, dies bezieht sich jedoch immer auf die vorherige Zeile, da die Schaltfläche Priorität hat.

Ich würde diese Lösung vorziehen, wenn ich es zum Laufen bringen könnte.

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>

Zusammenfassend kämpfe ich mit dem Problem, dass mein Knopf gedrückt werden mussZur richtigen Zeit. In Version 1 wird die Zeile ausgewählt und die Schaltfläche wird nie gedrückt. In Version 2 wird die Schaltfläche überhaupt nicht verwendet. Es wird nur der Zellenklick behandelt. Verion 3 erhält den Button-Klick, bevor die Zeile ausgewählt wird (falsche Reihenfolge).

Jede Hilfe wäre dankbar!