Thêm hình ảnh vào cột jqgrid

Question

Tôi muốn hiển thị hình ảnh nhỏ trong cột đầu tiên của jqgrid cho tất cả dữ liệu tôi nhận được từ DB.

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

Tôi muốn thêm hình ảnh vào cột màu đầu tiên. tôi đã cố gắng định dạng, nhưng không chắc chắn về cellvalue, đối tượng hàng, tùy chọn. Bất kỳ trợ giúp sẽ được đánh giá cao.

tôi đã làm một cái gì đó như thế này cho hình ảnh

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

đâu nên tôi cung cấp cho các src hình ảnh? làm thế nào để đề cập đến các imageformat trong colmodel?

Cảm ơn

Answer 1

Nếu bạn cần phải thiết lập hình ảnh trong ví dụ cột đầu tiên của lưới điện, bạn có thể xác định lưới

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

Các formatter cần chỉ trả về một chuỗi đó là HTML đoạn mà cần thiết được đặt trong cột. Bởi vì tất cả các tham số trong JavaScript là tùy chọn và chúng ta không cần thì chúng ta có thể định nghĩa formatter làm hàm không có tham số. Thuộc tính width là kích thước của cột tính bằng pixel. Nếu bạn sử dụng tùy chọn jqGrid khác như autowidth: true hoặc chỉ định toàn bộ chiều rộng của lưới đối với width tùy chọn với (và nếu bạn không sử dụng shrinkToFit: false tùy chọn) sau đó jqGrid sẽ quy mô độ rộng cột dựa trên giá trị của tài sản width của cột trong colModel. Để không có tỷ lệ cột với hình ảnh tôi đã bao gồm thêm fixed: true thuộc tính.

Một số nhận xét chung: bạn nên cẩn thận với trường hợp tên trong JavaScript. Ví dụ: dòng mã đầu tiên bạn đăng (jquery("#tableName").jqgrid({) phải được thay thế bằng jQuery("#tableName").jqGrid({.

Answer 2

Bạn có thể di chuyển hình ảnh qua xml hoặc json theo tham số url của bạn như thế này:

$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>"; 

lưu ý rằng < là <

Answer 3

Nhìn ví dụ này :)

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

Bạn có thể xem ví dụ hoàn chỉnh tại đây: http://jsfiddle.net/tabalinas/ccy9u7pa/16/