Hinzufügen einer benutzerdefinierten Schaltfläche in der Zeile in jqGrid?

Ich möchte eine einfache Tabelle mit einer benutzerdefinierten Schaltfläche in einer Zeile. Wenn die Taste gedrückt wird, so möchte ich, um pop-up eine "alert" - box. Ich habe einige Beiträge, zum Beispiel:
dieser Beitrag
und
dieser andere post, und ich verstehe nicht, warum mein code nicht funktioniert. Die Schaltflächen gezeichnet werden, aber drängen Ihnen keine Wirkung hat.

Habe ich drei versuche werden hier beschrieben.

Version 1. Klicken Sie auf die Schaltfläche nie 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-Code:

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

BEARBEITEN 8/2/12 -- ich habe gelernt, einige Dinge, die seit meinem ursprünglichen post und hier beschreibe ich zwei versuche mehr.

Version 2: ich benutze onCellSelect. Das funktioniert auch, aber es würde mir nicht erlauben, mehr als eine Schaltfläche in einer Zelle. Zusätzlich habe ich den code schöner mit der option format vorgeschlagen, von einer der Kommentare zu diesem 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: ich habe versucht, die Lösung zu w4ik post mit ".auf" statt veraltet ".live". Dies bewirkt, dass die Schaltfläche klicken Sie auf zu Schießen, aber ich weiß nicht, wie das abrufen der rowid. w4ik kämpfte auch mit dieser, und er gepostet, dass er arbeitete, aber nicht, wie er es Tat. Ich kann die Letzte Zeile selektiert, aber diese beziehen sich immer auf die Vorherige Zeile ausgewählt, weil die Taste Vorrang.

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

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 der Zusammenfassung, ich werde kämpfen mit dem Problem der immer meine Taste gedrückt werden zur richtigen Zeit. In der version 1, die Zeile wird ausgewählt und der button nie gedrückt. Version 2 benutzt nicht den "Knopf" an alle-Es ist nur Griffe die Zelle klicken. Version 3 wird die Schaltfläche klicken, bevor Sie die Zeile select (falsche Reihenfolge).

Jede mögliche Hilfe würde geschätzt!

  • besser zu verwenden, klicken Sie auf () - Ereignis von jquery in einem solchen Fall gemacht, jsfiddle, und ich werde Ihnen zeigen, wie
  • Sie müssen nicht fügen Sie markup, um Ihre Daten, Sie können stattdessen eine customFormatter für die Spalte zu generieren, die den Knopf mit dem status-Wert. trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
InformationsquelleAutor jpl | 2012-07-31
Schreibe einen Kommentar