将CSS类添加到列中

Ana*_*liy 13 jqgrid

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

UPDATE

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

Ole*_*leg 23

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

我不确定这是你需要的,因为你写了关于表格中FormElement存在的类.在这种情况下,您必须使用表单编辑的beforeShowForm回调,例如将类添加到编辑表单的相应字段的输入字段中.表单中字段的id 与相应列的属性相同.namecolModel

如果您确实需要将class属性添加到一列的单元格中,则还有一种可能性:cellattr为列定义回调colModel.如果您需要不为列的所有单元格添加类,则该方法可能是实用.您可以根据行内容测试某些条件,并仅在条件发生时设置类.例如,使用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'";
    }
}
Run Code Online (Sandbox Code Playgroud)

允许您仅在单元​​格值高于200时设置类.我没有rawObject在上面的回调中使用,因此可以删除可选参数.我在回调中添加它只是为了提醒您可以使用该参数来访问该行的另一列中的值.因此,您可以实现更复杂的方案cellattr.

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

在此输入图像描述

更新:如果您需要添加class编辑版的输入字段,您还可以使用editoptions的dataInit回调.在这种情况下使用将非常简单.您可以执行以下操作:

editoptions: {
    dataInit: function (domElem) {
        $(domElem).addClass("ui-state-highlight");
    }
}
Run Code Online (Sandbox Code Playgroud)

结果你会得到编辑表格

在此输入图像描述

你可以在这里找到演示.


Jus*_*ier 8

有一个classescolmodel选项可以满足您的需求.从jqGrid文档:

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

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