jqgrid：如何在生成時設置單元格特定的CSS類

我正在構建一個jqgrid，需要特定單元格的不同背景（或通常不同的css類）值。我知道哪些單元格需要在生成時應用的類將數據發送到jqgrid。我想是能夠指示jqGrid的行結構中的類爲每個特定的細胞：jqgrid：如何在生成時設置單元格特定的CSS類

<rows> 
    <page> </page> 
    <total> </total> 
    <records> </records> 
    <row> 
     <cell>1.00</cell> 
     <cell class='errorClass'>15.00</cell> 
     <cell class='warningClass'>9.00</cell> 
     … 
    </row> 
    <row> 
     <cell>1.00</cell> 
     <cell>2.00</cell> 
     <cell>1.15</cell> 
     … 
    </row> 
     … 
</rows>

我知道數據被髮送下來後，我能做到這一點的格式，但我希望看到的使用格式而不是事後繪製的網格。

我已經取得了一些像什麼，我想利用細胞內的標籤設置：

<cell><span class='warningClass'>3.00</span></cell>

但它並沒有爲整個小區的類，在短短的數據，只有突出顯示的文本而不是整個細胞。

來源

2011-11-05 Bill Pfeiffer

爲什麼要做到這一點，而數據被渲染而不是事後？不幸的是，我不認爲jqGrid有什麼內置的功能可以在設置樣式的時候生成，至少在我的體驗中不是這樣。事實之後，我總是這樣做。 –

如果我想更改jqgrid的添加/編輯窗體的CSS，該怎麼辦？ –

我對你的問題感興趣，所以我給你做了the demo。

enter image description here

如果你想設置的網格單元（<td>元素）像class，title，colspan，style的cellattr是做到這一點的最好辦法了一些自定義屬性（見here瞭解詳細信息）。 cellattr接近custom formatter功能，但允許定義單元格的屬性而不是單元格包含。

在the demo我用下面的XML輸入：

<?xml version='1.0' encoding='utf-8'?> 
<rows> 
<page>1</page><total>1</total><records>2</records> 
    <row id='13'> 
     <cell>1.00</cell> 
     <cell class='ui-state-error'>15.00</cell> 
     <cell>9.00</cell> 
    </row> 
    <row id='12'> 
     <cell>1.00</cell> 
     <cell>2.00</cell> 
     <cell class='ui-state-highlight'>1.15</cell> 
    </row> 
</rows>

和cellattr像下面

cellattr: function() { 
    var c = $('cell:eq(1)', arguments[2]).attr('class'); 
    return c ? " class='" + c + "'": ""; 
}

在這種情況下，第二（'的 '類' 屬性：當量（1 ）'）單元格將用於格式化。

從設計角度來看，我建議你不要直接使用類名作爲屬性。像format="error"這樣的替代屬性將被轉換爲class='ui-state-error'具有一些優點。它可以將HTML格式的提示與HTML指令分開。

來源

2011-11-05 19:56:11 Oleg

感謝您的回答。我的問題涉及到一個動態創建的列模型，所以我必須想出一種方法將cellattr函數附加到json列模型。您的解決方案構成我的情況的真正問題是如何確定使用哪個列號來返回類。我結束了比較釐米。name參數與col模型項目的json列表進行比較，並使用找到的列表索引來確定'cell：eq（n）'的值。哦，我不得不升級到jqgrid 4.x.這也爲我犧牲了一段時間。 –

@BillPfeiffer：好的，我明白了。我修改了演示：請參閱[here]（http://www.ok-soft-gmbh.com/jqGrid/XmlCellAttr1.htm）。你應該小心使用你發佈的'findColModelInList'。每個循環都沒有''。你應該至少使用'for（var modelItem in modelList）'。還有一個建議：如果它真的需要，你不應該使用'for-in' JavaScript循環。使用簡單的'for'循環枚舉數組更有效。 – Oleg

@Oleg很好！您可以擴展它以添加單元格突出顯示的功能。無論如何，我們可以爲焦點指定單元格的高亮顏色（或者可能是整個顏色）？ – Deb

使用Oleg的答案，我放在一起測試使用動態創建colModel（寇）我的情況如下：

for each (var colModelItem in colM) 
{ 
    colModelItem.cellattr = function (rowId, val, rawObject, cm, rdata){ 
     var pos = findColModelInList(cm, colM); 
     var srchText = 'cell:eq(' + pos + ')'; 
     var c = jQuery(srchText, arguments[2]).attr('class'); 
     return c ? " class='" + c + "'": ""; 
    }; 
}

其中

function findColModelInList(colModel, modelList) 
{ 
    var index = 0; 
    var retval = -1; 
    for each (var modelItem in modelList) 
    { 
     if (modelItem.name == colModel.name) 
     { 
      retval = index; 
     } 
     index++; 
    } 
    return retval; 
}

來源

2011-11-06 16:18:37

如果我想更改jqgrid的添加/編輯窗體的CSS，該怎麼辦？ –

jqgrid：如何在生成時設置單元格特定的CSS類

回答

相關問題