如何突出显示不可编辑的背景网格单元格？答案

【问题标题】：How to hightlight non editable backgrid cells?如何突出显示不可编辑的背景网格单元格？
【发布时间】：2013-12-25 10:55:14
【问题描述】：

我正在使用主干和背景网格。

我想让一些背景网格单元格不可编辑并突出显示它们。

我正在为这些单元格寻找一个简单的 css 属性。

但不幸的是，backgrid 不会对不可编辑的单元格施加任何特定的类。

这是从 backgrid 网站渲染的一个 backgrid 行：http://backgridjs.com/，我们知道 id 字段在这里不可编辑：

    <tr>
<td class="integer-cell">1</td>
<td class="string-cell">Afghanistan</td>
<td class="integer-cell">25,500,100</td>
<td class="number-cell">0.36</td>
<td class="date-cell">2013-01-01</td>
<td class="uri-cell"><a tabindex="-1" href="http://en.wikipedia.org/wiki/Afghanistan" title="http://en.wikipedia.org/wiki/Afghanistan" target="_blank">http://en.wikipedia.org/wiki/Afghanistan</a></td>
</tr>

现在我如何达到同样的效果？？

【问题讨论】：

投反对票并关闭，不发表任何评论..????!!!!!!
请插入一些代码、示例和...

标签： javascript css backbone.js backgrid

【解决方案1】：

那些你不想编辑的单元格，给它们添加一些类，然后去 backgrid.js 的源代码并找到启用编辑模式的函数，我不知道究竟是哪个函数处理那个，可能是

render: function () {
enterEditMode: function () {

然后检查该单元格的类名，例如

$("#mydiv").hasClass("dont_edit"); OR this.hasClass("dont_edit");

如果是这样，那么只需“返回”，否则允许编辑。您必须通过反复试验来解决它，直到有人帮助您提供准确的代码。到那时最好开始帮助自己。

【讨论】：

【解决方案2】：

Backgrid.Cell#initialize 有如下代码

if (Backgrid.callByNeed(column.editable(), column, model)) $el.addClass("editable");

这意味着所有可编辑的单元格都有“可编辑”的 css 类。而所有不可编辑的单元格都没有这个类。

因此，通过应用如下所示的 CSS 选择器，我可以根据需要设置不可编辑单元格的样式：

backgrid td.renderable:not(.editable) {
   background-color: gray
}

【讨论】：