Question

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

我的方法是在检查行的复选框后将css类附加到项目。但是这不起作用。 Under是一个小提琴和我的代码。

如果检查行的复选框，我如何设置单元格的样式？ 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附加类和样式化的方法听起来不错。

你可能想要像这样挂钩 dgrid-select 事件：

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

以下是行动中的变化：http://jsfiddle.net/22h5G/15/

顺便说一句，jsfiddle为+1。当一切准备就绪时，我们更容易回答。：）

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

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

此处有更多文档：https://github.com/SitePen/dgrid/wiki/Working-with-Events

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

1 个答案: