Ajout d'image dans la colonne de jqgrid

Je veux afficher une petite image dans la première colonne de jqgrid pour toutes les données que je reçois de DB. 

jquery("#tableName").jqgrid({
.....
colNames : ['', ''],
colModel : [{
    width : '25%',
    },{
    name : 'someValue',
    index : 'somevalue',
    widht : '75%',
    sorttype: 'text'
}]
});

Je veux ajouter une image dans la première colmodel. j'ai essayé de formatage, mais vous ne savez pas à propos de cellvalue, ligne d'objet, options. Toute aide serait appréciée.

J'ai fait quelque chose comme ça pour l'image 

function imageFormat( cellvalue, options, rowObject ){
        return '<img src="'+cellvalue+'" />';
    }

Où dois-je donner à l'image src ? comment parler de la imageformat dans le colmodel ?

Grâce

  • Avez-vous besoin d'ajouter des images différentes dans des lignes différentes? Lorsque vous tenez l'URL de l'image? Ce que tu veux dire sous "imageformat"?
  • Je n'ai pas besoin d'images différentes. J'ai juste besoin d'une image pour l'afficher dans toutes les lignes. J'ai eu cette fonction à partir de l'une des pages. donc, juste essayé.
InformationsquelleAutor sahana | 2013-06-05
  1. 10

    Si vous avez besoin de définir l'image, par exemple, dans la première colonne de la grille, vous pouvez définir la grille

    $("#tableName").jqGrid({
    .....
    colNames: ['', ''],
    colModel: [
        {
            name: 'someUniqueColumnName',
            width: 25,
            fixed: true,
            formatter: function () {
                return "<img src='http://myserver/path/i.jpg' alt='my image' />";
            }
        },
        {
            name: 'someValue',
            width: 123 //width of column in pixel
        }
    ],
    ...
});

    La formatter avez juste besoin de retourner une chaîne de caractères qui est un fragment HTML qui doivent être placées dans la colonne. Car tous les paramètres sont en JavaScript facultatif et nous n'avons pas besoin alors on peut définir formatter que la fonction sans paramètres. La propriété width est la taille de la colonne en pixels. Si vous utilisez d'autres jqGrid, comme les options de autowidth: true ou spécifier toute la largeur de la grille à l'égard de width option (et si vous n'utilisez pas shrinkToFit: false option) jqGrid sera échelle la largeur de la colonne en fonction de la valeur de width propriété de la colonne dans colModel. Ne pas avoir de mise à l'échelle de la colonne avec l'image que j'ai inclus fixed: true propriété de plus.

    Certaines communes remarque: vous devez être prudent avec le cas des noms en JavaScript. Par exemple, la première ligne de code que vous avez posté (jquery("#tableName").jqgrid({) doit être remplacé par jQuery("#tableName").jqGrid({.

    • Merci beaucoup !!! J'ai compris et sa fonctionne bien 🙂
    • Vous êtes les bienvenus!
    • Comment puis-je l'image de lier du contenu dynamique, par exemple: la collecte de l'image dans le dossier
    • href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter" >mise en forme personnalisée évaluer à l'information complète de la ligne de données par le 3-d de paramètre (rowObject). Elle permet d'étendre les informations retournées par le serveur pour chaque ligne supplémentaire dynamique de l'information, par exemple, l'URL de l'image, l'info-bulle (la valeur de title attribut) et ainsi de suite.
    • merci Eu...
    • Vous êtes les bienvenus!

    InformationsquelleAutor Oleg
  2. 0

    Vous pouvez déplacer l'image dans le format xml ou json dans votre paramètre de l'url comme ceci:

    $image = "&lt;a href='#'>&lt;img src='folders/images/arrow.jpg' border='0' valign='middle' title='Edit something'>&lt;a>";



echo "<?xml version='1.0' encoding='iso-8859-1'?$et\n"; 
echo "<rows>"; echo "<page>".$page."</page>"; 
echo "<total>".$total_pages."</total>"; 
echo "<records>".$count."</records>"; //be sure to put text data in CDATA 

    echo "<row id='". $id."'>"; 
    echo "<cell>". $image."</cell>"; 
    echo "</row>"; 
    } 
 echo "</rows>";

    noter que < est &lt;

    InformationsquelleAutor Sici
  3. 0

    Regardez cet exemple 🙂

    $("#jsgrid").jsGrid({
autoload: true,
width: 350,
filtering: true,
inserting: true,
controller: {
loadData: function(filter) {
return !filter.Name 
? data
: $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });
//use ajax request to load data from the server
/*
return $.ajax({
method: "GET",
url: "/YourUrlToAddItemFilteringScript",
data: filter
});
*/
},
insertItem: function(insertingItem) {
var formData = new FormData();
formData.append("Name", insertingItem.Name);
formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);
return $.ajax({
method: "post",
type: "POST",
url: "/YourUrlToAddItemAndSaveImage",
data: formData,
contentType: false,
processData: false
});
}        
},
fields: [
{
name: "Img",
itemTemplate: function(val, item) {
return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
$("#imagePreview").attr("src", item.Img);
$("#dialog").dialog("open");
});
},
insertTemplate: function() {
var insertControl = this.insertControl = $("<input>").prop("type", "file");
return insertControl;
},
insertValue: function() {
return this.insertControl[0].files[0]; 
},
align: "center",
width: 120
},
{ type: "text", name: "Name" },
{ type: "control", editButton: false }
]});

    Vous pouvez voir l'exemple complet ici:
    http://jsfiddle.net/tabalinas/ccy9u7pa/16/

    InformationsquelleAutor Robert LUgo