【问题标题】:Adding a CSS class to a column将 CSS 类添加到列
【发布时间】:2012-08-24 05:27:50
【问题描述】:

如何将自己的类添加到 jqgrid 中的列中。正如我看到的 html 输入元素正在获取类“FormElement”。我需要向特定列添加一个类。我找到了这个http://www.trirand.com/blog/?page_id=393/help/cell-tooltip-1/#p21526,但我不确定它是否是实现这一目标的最方便的方法?我的意思是遍历所有行和单元格,然后手动更改类属性 - 对于这种“简单”任务来说,这似乎是一种开销。

更新

我想添加类,因为我想使用这个多选小部件http://quasipartikel.at/multiselect/ 的功能。这个小部件通过定义的类工作。这就是为什么。

【问题讨论】:

    标签: jqgrid


    【解决方案1】:

    有一个classes colmodel 选项可以满足您的需要。来自jqGrid documentation

    字符串

    此选项允许向列添加类。如果将使用多个类,则应设置一个空格。例如,classes:'class1 class2' 将为该列上的每个单元格设置一个 class1 和 class2。

    在网格 css 中有一个预定义的类 ui-ellipsis,它允许将省略号附加到特定的行。这也适用于 FireFox。

    【讨论】:

    • 谢谢贾斯汀,我不知道这个选项。正如我所说,我知道这应该是特别的。
    【解决方案2】:

    可能您需要为相应的列使用classes 属性。

    我不确定它是否是您所需要的,因为您写了关于 form 中存在的 FormElement 类。如果您必须使用表单编辑的beforeShowForm 回调,例如将类添加到编辑表单的相应字段的输入字段中。表单中字段的id与colModel对应列的name属性相同。

    如果您确实需要为一列的单元格添加类属性,您还有一种可能:为colModel 的列定义cellattr 回调。如果您需要为列的所有单元格添加类,这种方法可能是实用的。您可以根据行内容测试一些条件,并仅在条件发生时设置类。例如classes:'ui-state-error-text ui-state-error' 的使用将在列的所有 单元格上设置相应的两个类(ui-state-error-textui-state-error)。另一边的回调函数

    cellattr: function(rowId, val, rawObject) {
        if (parseFloat(val) > 200) {
            return " class='ui-state-error-text ui-state-error'";
        }
    }
    

    仅当单元格值高于 200 时才允许您设置类。我在上述回调中没有使用rawObject,因此可以删除可选参数。我在回调中添加它只是为了提醒您可以使用该参数访问行的 another 列中的值。所以你可以在cellattr中实现更复杂的场景。

    结果可以得到如下图所示的网格:

    更新:如果您需要在编辑表单的输入字段中添加class,您可以另外使用editoptionsdataInit回调。在这种情况下,用法将非常简单。例如,您可以执行以下操作:

    editoptions: {
        dataInit: function (domElem) {
            $(domElem).addClass("ui-state-highlight");
        }
    }
    

    结果你会得到像这样的编辑表单

    你可以找到here的演示。

    【讨论】:

    • 感谢 Oleg 提供如此全面的答案,我认为 beforeShowForm 更适合我的情况,因为我只在表单编辑中需要它。
    • @Anatoliy:不客气! dataInit 的用法可能对您来说更实用:请参阅我的答案的 UPDATED 部分。
    • 是的,它工作正常。它看起来确实是实现这一目标的最短方法。太感谢了!很高兴看到,至少有 3 种方法可以解决问题。
    猜你喜欢
    • 1970-01-01
    • 2011-07-16
    • 2023-03-18
    • 2012-05-19
    • 1970-01-01
    • 2020-10-23
    • 2020-11-04
    • 1970-01-01
    • 2020-01-17
    相关资源
    最近更新 更多