javascript - Dojo DGrid 将格式应用于单元格内容

Question

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

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

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

HTML

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

JS

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;
}

Answer 1

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

你可能想像这样 Hook 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 事件，如果您有兴趣在取消选择该行后删除该类。

更多文档在这里:https://github.com/SitePen/dgrid/wiki/Working-with-Events