Dojo DGrid 将格式应用于单元格内容答案

【问题标题】：Dojo DGrid applying formatting to cell contentsDojo DGrid 将格式应用于单元格内容
【发布时间】：2014-03-22 21:35:07
【问题描述】：

我有一个 dgrid，当为该行选择复选框时，我试图通过在单元格中的文本下划线来设置单元格样式。

我的方法是在选中该行的复选框后将一个 CSS 类附加到该项目。但是，这不起作用。下面是一个小提琴和我的代码。

一旦选中该行的复选框，我如何设置单元格样式？ JSFIDDLE style cells for selected row

HTML

<div id="grid" class="grid"></div>

require([

    "dijit/form/CheckBox",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form",

]);

require([
    "dojox/validate/us",
    "dojox/validate/web",
    "dojox/layout/TableContainer",
    "dojox/layout/GridContainer",
    "dojox/widget/Wizard",
    "dojox/widget/WizardPane",
    "dojox/grid/_CheckBoxSelector"

]);

require([
    "dojo/parser",
    "dojo/_base/declare",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",
    "dgrid/ColumnSet",
    "dgrid/Selection",
    "dgrid/selector",
    "dgrid/Keyboard",
    "dgrid/extensions/DijitRegistry",
    "dgrid/editor",
    "dgrid/extensions/ColumnHider",


    "dojo/domReady!"

], function (parser, declare, MemoryStore, OnDemandGrid, ColumnSet, Selection, selector, Keyboard, DijitRegistry, editor, ColumnHider) {
    parser.parse();


    var data = [{
        id: "1",
        idType: "Passport",
        idNumber: "12121545WWW"
    }, {
        id: "2",
        idType: "Drivers Permit",
        idNumber: "11212154515 FF"
    }, {
        id: "3",
        idType: "Electoral Identification",
        idNumber: "425123123121"
    }];
    var store = new MemoryStore({
        data: data
    });


    var CustomGrid = declare([OnDemandGrid, selector, Selection, Keyboard, editor, DijitRegistry]);

    var grid = new CustomGrid({
        store: store,
        columns: {
            col1: {
                label: "Id",
                field: "Id",
                hidden: true
            },

            completed: selector({}),

            col3: {
                label: "ID Type",
                field: "idType",
                formatter: function(item){
                return "<div" + (item.completed ? ' class="completed"' : "") +
                            ">" + item + "</div>";
                }
            },

            col4: {
                label: "ID Number",
                field: "idNumber"
            }

        },
        SelectionMode: "none",
        allowSelectAll: true
    }, "grid");




    grid.renderArray(data);
});

CSS

#grid .completed {
    text-decoration: line-through;
    font-style: italic;
}

【问题讨论】：

标签： javascript jquery dojo dgrid

【解决方案1】：

您使用 CSS 附加类并为其设置样式的方法对我来说听起来不错。

您可能想像这样挂接 dgrid-select 事件：

grid.on('dgrid-select', function (event){
    event.rows[0].element.style.color = 'red';
});

以下是实际变化：http://jsfiddle.net/22h5G/15/

顺便说一句，jsfiddle +1。一切准备就绪后，我们更容易回答。 :)

显然，如果一次选择多行，则事件的 rows 属性有多个项目。

还有 dgrid-deselect 事件，如果您有兴趣在取消选择行后删除该类。

【讨论】：

如果我选中标题复选框（全选），只有第一行被更改
您不需要实现标题选择事件。我猜你没有注意到我关于“显然，如果你一次选择多行，事件的 rows 属性有多个项目。”的评论。我的意思是，您需要遍历处理每一行的 rows 数组中的每个项目，因为 dgrid-select 事件可能会引用同一事件中的多行。
这是真的，我想我错过了，但再次感谢。
您也可以考虑简单地添加样式以应用于.dgrid-selected 类，而不需要添加您自己的类。