jqgrid:如何在生成时设置特定于单元格的css类 [英] jqgrid: How to set cell specific css class at generation time

问题描述

我正在构建一个jqgrid，它需要特定单元格具有不同的背景(或一般而言，不同的CSS类)值.我知道哪些单元格需要在将数据发送到jqgrid的生成时应用该类.我想要的是能够在jqgrid行结构中为每个特定单元格指示一个类:

I am building a jqgrid that needs different background (or in general, a different css class) value for specific cells. I know which cells need the class applied at generation time of the data being sent down to jqgrid. What I would like is to be able to indicate a class within the jqgrid rows structure for each specific cell:

<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>

我知道我可以在向下发送数据之后进行这种格式化，但是我希望看到使用适当格式绘制的网格，而不是事实之后.

I know I can do this formatting after the data is sent down, but I would like to see the grid drawn with the formatting in place rather than after the fact.

通过使用单元格中的标签进行设置，我已经实现了想要的东西:

I've achieved something like what I want by setting using a tag within the cell:

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

但是它并没有为整个单元格设置类，只是为其中的数据设置了高度，只突出显示了文本，而不是整个单元格.

But it does not set the class for the entire cell, just data within, with only the text highlighted and not the entire cell.

推荐答案

我使您的问题有趣，因此我将演示.

I ind your question interesting so I made the demo for you.

如果要在网格单元(<td>元素)上设置一些自定义属性，例如class，title，colspan，style 此处设置如何设置背景颜色在单元格上的值). cellattr接近自定义格式化程序功能，但允许定义单元格的属性，而不定义单元格包含的属性.

If you want to set some custom attributes on the grid cells (<td> elements) like class, title, colspan, style the cellattr is the best way to do this (see here for details). cellattr are close to custom formatter feature, but allows to define attributes of the cell and not the cell contain.

在该演示中，我使用了以下XML输入:

In the demo I used the following XML input:

<?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 + "'": "";
}

在第二个(':eq(1)')单元格的'class'属性将用于格式设置的情况下.

In the case the 'class' attribute of the second (':eq(1)') cell will be used for the formatting.

从设计的角度来看，我建议您不要将类名直接用作属性.诸如format="error"的替代属性将转换为class='ui-state-error'具有一些优点.它可以将格式提示之类的信息与直接HTML指令分开.

From the design point of view I would recommend you don't use the class names directly as the attributes. An alternate attribute like format="error" which will be converted as class='ui-state-error' have some advantages. It could make separation of information like formatting tips from direct HTML instruction.

这篇关于jqgrid:如何在生成时设置特定于单元格的css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！