你可以有圖像或jQuery網格（jqgrid）單元格中顯示的任何自定義HTML？

我沒有看到文檔中的任何東西，但我試圖轉換HTML表格到jQuery網格呈現的代碼，但一個缺少的一塊是，許多列中有圖像或其他專業的HTML，我會喜歡在網格中顯示你可以有圖像或jQuery網格（jqgrid）單元格中顯示的任何自定義HTML？

2009-12-13 leora

要在網格行顯示的圖像，this post有一個很好的總結：

返回HTML元素作爲網格列的數據。不要使用「或」爲SRC，這將無法正常工作的領域應該是這樣的：

<img src=../images/my_image.jpg>

來源

2009-12-13 23:57:40

+1的正確答案，但您與專家交換的鏈接對我無效。希望我會嘗試一個自定義格式化程序將我的圖像名稱包裝在IMG標記中，並且可以工作。 – 2010-03-17 11:47:16

如果您用\ – 2011-02-10 23:11:28

轉義它們，您可以添加's'您在代碼中確認了這一點？ – 2011-02-11 02:25:51

這可能不是您之後的答案，但DataTables將從HTML表格構建網格。它具有用於服務器端分頁的客戶端分頁，排序，過濾，客戶端編輯和Ajax回調函數。

用表格作爲「源」，你可以在列中找到你想要的東西。

來源

2009-12-13 12:04:44

正如你所說，不解決jqgrid，但這是一個很好的插件，並做我需要 – leora 2009-12-13 13:50:38

我不得不接受另一個答案作爲技術這是問題 – leora 2009-12-14 01:09:10

如果您想將圖像添加到jqGrid的的細胞，你必須使用一個黑客，如果你的數據類型是「客戶」，將工作以及

在一個變量設置圖像
VAR crossImg =「設置你的圖像的HTML SRC」;
設置colmodel像這樣
{名稱： 'delImage'，索引： 'delImage'，對齊： '中心'，寬度：40，編輯：假的，格式化： '整數'，formatoptions：{默認值：crossImg}}

來源

2010-07-09 13:44:26

$("#yourTableID").jqGrid({ 
    url: '<%= ResolveUrl("ModelClass/ModelFunction")%>' 
     , datatype: "json" 
     , mtype: "POST" 
     , postData: { 'idofyourcolumn': $('#idofyourcolumn').val(), 
      'page': $('.pagedisplay').val(), 'rows': $('#rowCount').val() 
     } 
     , colNames: ['YOURHEADER', 'ACTION'] 
     , colModel: [{ name: 'column1', index: 'column1name' }, 
        { name: 'action', index: 'action', width: 10, sortable: false, align: 'center'}] 
     , autoheight: true 
     , autowidth: true 
     , rowNum: 15 
     , rowList: [15, 20, 30, 50] 
     , pager: '#pager' 
     , sortname: 'column1' 
     , viewrecords: true 
     , sortorder: "desc" 
     , caption: "Sample Code" 
     , afterInsertRow: function (rowid, aData) { 
      jQuery('#yourTableID').setCell(rowid, 'action', '<img src="pathofyourimage/image.jpg" />'); 
     } 
     , loadComplete: function() { 
      $('#ResultCount').text($("#yourTableID").getGridParam("records")); 
     } 
}) 

     .navGrid('#pager1' 
      , { search: true, refresh: false, view: false, del: false, add: false, edit: false } 
      , {} // default settings for edit 
      , {} // default settings for add 
      , {} // delete 
      , { closeOnEscape: true 
       , multipleSearch: true 
       , closeAfterSearch: true 
      } // search options 
      , {} 
     );

關鍵是在afterInsertRow：它包含你的列圖像和數據

來源

2013-03-19 02:46:59 sarah

你可以有圖像或jQuery網格（jqgrid）單元格中顯示的任何自定義HTML？

回答

相關問題