Dodawanie obrazu w kolumnie jqgrid

Question

Chcę wyświetlić mały obraz w pierwszej kolumnie jqgrid dla wszystkich danych otrzymanych z DB.

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

Chcę dodać obraz w pierwszym modelu colmodel. próbowałem formattera, ale nie mam pewności co do wartości komórki, obiektu wiersza, opcji. Każda pomoc będzie doceniona.

zrobiłem coś podobnego do obrazu

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

gdzie mam dać src obrazu? jak wspomnieć o formacie obrazu w colmodelu?

Dzięki

Answer 1

Jeśli trzeba ustawić obraz na przykład w pierwszej kolumnie siatki można zdefiniować siatkę

$("#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 
     } 
    ], 
    ... 
}); 

formatter musi tylko zwrócić łańcuch, który jest fragment HTML, które muszą być umieszczone w kolumnie. Ponieważ wszystkie parametry w JavaScript są opcjonalne i nie potrzebujemy wtedy możemy zdefiniować formatter jako funkcję bez parametrów. Właściwość width jest wielkością kolumny w pikselach. W przypadku korzystania z innych opcji jqGrid jak autowidth: true lub określić całą szerokość siatki z tytułu width opcji (a jeśli nie używasz shrinkToFit: false opcji), a następnie jqGrid będzie skala szerokość kolumny na podstawie wartości nieruchomości width kolumny w colModel. Aby nie skalować kolumny z obrazem, dodałem również właściwość fixed: true.

Kilka wspólnych uwag: powinieneś uważać na przypadki nazw w JavaScript. Na przykład pierwszy wiersz kodu, który wysłałeś (jquery("#tableName").jqgrid({), należy zastąpić numerem jQuery("#tableName").jqGrid({.

Answer 2

można przesunąć obraz poprzez XML lub JSON w parametrze url tak:

$image = "<a href='#'><img src='folders/images/arrow.jpg' border='0' valign='middle' title='Edit something'><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>"; 

< że uwaga jest <

Answer 3

Spójrz ten przykład :)

$("#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 } 
]}); 

Ty możliwe, zobacz pełny przykład tutaj: http://jsfiddle.net/tabalinas/ccy9u7pa/16/