web-dev-qa-db-fra.com

Ajouter un bouton à une ligne dans jqgrid

Je veux ajouter un bouton à chaque ligne de ma grille qui ouvrira une nouvelle fenêtre. Ne voyez pas cette fonctionnalité dans ce contrôle très riche. Doit manquer quelque chose

jqgrid
17
john

Voici un exemple, tiré de la page de démonstration jqGrid:

jQuery("#rowed2").jqGrid({ 
    url:'server.php?q=3', 
    datatype: "json", 
    colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
        {name:'act', index:'act', width:75,sortable:false}, 
        {name:'id',index:'id', width:55}, 
        {name:'invdate',index:'invdate', width:90, editable:true}, 
        {name:'name',index:'name', width:100,editable:true}, 
        {name:'amount',index:'amount', width:80, align:"right",editable:true}, 
        {name:'tax',index:'tax', width:80, align:"right",editable:true}, 
        {name:'total',index:'total', width:80,align:"right",editable:true}, 
        {name:'note',index:'note', width:150, sortable:false,editable:true} 
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    imgpath: gridimgpath, 
    pager: jQuery('#prowed2'), 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    gridComplete: function(){ 
        var ids = jQuery("#rowed2").getDataIDs(); 
        for(var i=0;i<ids.length;i++){ 
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>"; 
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />"; 
            jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce}) 
        } 
    }, 
    editurl: "server.php", 
    caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});

Vous pouvez également le faire avec un formateur personnalisé .

16
Craig Stuntz

la réponse la plus élevée actuelle place le code du bouton personnalisé dans loadComplete. il devrait être gridComplete . L'API a probablement été modifié depuis la réponse à la question.

8
user406905

dans colModel, vous pouvez formater à l'aide du formateur en suivant le code

formatter:function (cellvalue, options, rowObject) {    
    return "<input type='button' value='somevalue' onclick='some_function'\>";
}
6
Kishore Kumar

J'utilise un jqgrid pour afficher une liste de contacts. J'ai une colonne nommée 'Rôle' avec un bouton 'Définir', permettant de cliquer dessus et de redéfinir le rôle de ce contact en tant que principal, secondaire, commercial ou autre.

A l'origine, l'élément button était envoyé à la cellule de la grille via XML, où $ rowid était l'id de la ligne (PHP):

<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>

Cela a bien fonctionné jusqu'à ce que je mette autoencode: true sur la grille. Avec cette option définie sur true, la colonne affichait simplement le code HTML. 

La réponse de Craig affichait un comportement similaire, mais une légère variation de celui-ci a fait l'affaire. Je pensais partager:

gridcomplete: function() {
    var ids = $grid.getDataIDs();

    for (var i=0;i<ids.length;i++){
        var cl = ids[i],
        button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
        if (cl.substr(0,2) !== "jq") {
            $('#'+cl).find('td[aria-describedby="list_role"]').html(button);
        }
    }
}

En d'autres termes, la méthode setRowData n'a pas fonctionné avec autoencode défini sur true, mais le DOM peut être manipulé à volonté dans l'événement gridcomplete.

0
humbolight

Ce exemple pourrait être utile. Voir ceci wiki page et cette réponse de Oleg. 

0
understack