JqG​​rid - 我需要用没有填充的背景颜色填充我的tablecells

Question

在我的JqGrid中，背景颜色没有填充细胞;

如何清除白色间隙？ 从ie开发人员工具中，Appears Satisfactory单元定义如下

<td title="Appears Satisfactory" role="gridcell" aria-describedby="grid_Recommendation" >
	<span class="ui-jqgrid-cell-wrapper">
		<div class="pass">Appears Satisfactory</div>
	</span>
</td> 

其中“pass”类定义为

.pass {
    background-color: #C0FF97;
    text-align: center;
    width:100%;
}

在javascript中我的JqGrid定义如下;

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["No", "Company", "Trade", "Recommendation", ""],
        colModel: [
            { name: "AssessmentNo", label: "AssessmentNo", width:80, align:"center" },
            { name: "Company", label: "Company", width:400, searchoptions: { sopt: ["cn"] } },
            { name: "Trade", label: "Trade", width: 220, searchoptions: { sopt: ["cn"] } },
            { name: "Recommendation", label: "Recommendation", width: 150 },
            { name: "Links", label: "Links", search: false, align: "center" }
        ],
        cmTemplate: { width: 100, autoResizable: true },
        loadonce: true,
        forceClientSorting: true,
        rowNum: 20,
        pager: "#pager",
        gridview: true,
        ignoreCase: true,
        shrinkToFit: false,
        rownumbers: true,
        sortname: "AssessmentNo",
        viewrecords: true,
        sortorder: "asc",
        height: "100%"
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
}

Answer 1

您的代码不包含设置类"pass"的最重要部分。我猜你是以错误的方式设置的。

您似乎想要的是在某些条件下在单元格（<td>元素）上设置class属性。 cellattr中的colModel回调是完成此操作的确切方法。如果类的选择取决于单元格的内容，那么您可以执行以下操作

{
    name: "Recommendation", label: "Recommendation", width: 150,
    cellattr: function (rowId, cellValue) {
        if (cellValue === "Appears Satisfactory") {
            return " class='pass'";
        } else if (cellValue === "Expired") {
            return " class='not-pass'";
        }
    }
}

如果您需要测试输入数据的其他一些属性，那么您可以使用

{
    name: "Recommendation", label: "Recommendation", width: 150,
    cellattr: function (rowId, cellValue, rawObject, cm, item) {
        // item.AssessmentNo, item.Company and other are filled here
        if (item.Recommendation === "Appears Satisfactory") {
            return " class='pass'";
        } else if (item.cellValue === "Expired") {
            return " class='not-pass'";
        }
    }
}

其中item包含带有输入数据的已解析（读取）对象，rawObject包含带有输入数据的原始对象。 rawObject可以是字符串数组或XML节点，而不是item，它包含始终命名的属性行列名。

如果您使用cellattr，那么您将获得类似

的HTML片段

<td class="pass" title="Appears Satisfactory" role="gridcell" aria-describedby="grid_Recommendation">
    <span class="ui-jqgrid-cell-wrapper">Appears Satisfactory</span>
</td> 

最后我要注意你使用的免费jqGrid可以简化你当前的代码。首先，只有使用远程 loadonce: true（“json”，“jsonp”或“xml”）时，forceClientSorting: true和datatype选项才有意义。您将使用datatype: "local"忽略它。以同样的方式，您可以删除 gridview: true, ignoreCase: true, sortorder: "asc", height: "100%"选项，这些选项在免费的jqGrid中是默认的。您可以删除<div id="pager"></div>，只使用pager: true代替pager: "#pager"。代码越小，读取和维护就越容易。