如何更改jqgrid自定義格式化程序中單元格的背景顏色？

我可以在jqGrid的自定義格式做這個改變文字顏色：如何更改jqgrid自定義格式化程序中單元格的背景顏色？

function YNFormatter(cellvalue, options, rowObject) 
{ 
    var color = (cellvalue == "Y") ? "green" : "red"; 
    var cellHtml = "<span style='color:" + color + "' originalValue='" + 
           cellvalue + "'>" + cellvalue + "</span>"; 

    return cellHtml; 
}

，但我想改變現在整個小區（而不是文本顏色）的背景顏色。

這可能嗎？

來源

2010-07-14 leora

檢查更新後的答案。 – simplyharsh 2010-07-14 10:01:37

@harshhh - 我又添加了一條評論 – leora 2010-07-14 10:07:20

你應該用''background-color''來代替'color''並且設置附加樣式''background-image'：'none''來刪除從jQuery UI類'ui-widget-content'。如果你想額外使用標準顏色懸停或/和選定的行，你可以使用我在http://stackoverflow.com/questions/4956949/make-selected-color-highest-level-in-jqgrid/4960622#中描述的技術4960622 – Oleg 2011-02-10 19:28:19

如果你想使用<span>元素的自定義單元格格式化您可以從自定義格式

return '<span class="cellWithoutBackground" style="background-color:' + 
     color + ';">' + cellvalue + '</span>';

的span.cellWithoutBackground的風格，你可以在那裏返回的內部定義如下

span.cellWithoutBackground 
{ 
    display:block; 
    background-image:none; 
    margin-right:-2px; 
    margin-left:-2px; 
    height:14px; 
    padding:4px; 
}

它是如何運作的，你可以看到現場here： enter image description here

更新：答案是舊的。最佳做法是在colModel中使用cellattr回調代替使用自定義格式化程序。更改單元格的背景顏色通常只是將style或class屬性分配給列的單元格（<td>元素）。在colModel列中定義的cellattr回調允許完全做到這一點。仍然可以使用預定義的格式化程序，如formatter: "checkbox",formatter: "currency",formatter: "date"等，但仍然會更改列中的背景顏色。以同樣的方式，可以定義爲jqGrid選項（colModel的特定列之外）的rowattr回調允許分配整行（<tr>元素）的樣式/類。

例如，可以找到關於cellattr的更多信息here和here。 Another answer解釋爲rowattr。

來源

2011-02-12 23:43:12 Oleg

這裏

$("#cell").setCell(Row , Column, Value, { background: '#888888'});

事實上，你甚至不需要自定義格式，如果你只是打算做它設置顏色。你甚至可以從這裏就像設置顏色值，

var color = (Value == "Y") ? "green" : "red"; 
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color});

編碼愉快。

來源

2010-07-14 09:41:08 simplyharsh

@harshh - 你是否說這條線放在我自定義的格式化程序代碼函數中？ – leora 2010-07-14 09:46:21

@harshh - 我實際上想將它作爲自定義格式化程序來執行，因爲我有一些基於其他數據屬性的條件邏輯。另外，你從哪裏獲得行，列和值？ – leora 2010-07-14 10:04:41

@ooo：你不應該使用自定義格式化程序。而不是你可以改變'loadComplete'事件中某些單元格的背景顏色。你可以通過'getDataIDs'方法獲得加載數據的ID，然後用'getCell'在這個循環中獲取單元格數據，並使用''setCell''使用空字符串作爲數據參數改變單元格的樣式（參見http：詳情請參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods）。您也可以另外使用'格式化程序：複選框'。 – Oleg 2010-07-14 10:09:05

這裏是我做過什麼：

jQuery("#grid_id").jqGrid({ 
    ... 
     colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter}, 
      ... 
     ], 
     afterInsertRow: function(rowId, data) 
     { 
      $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX}); 
     } 
... 
});

來源

2011-01-01 19:44:34 ccwasden

如何更改jqgrid自定義格式化程序中單元格的背景顏色？

回答

相關問題