SitePen/dgrid与dojox/grid功能对比与迁移指南

前言

在现代Web应用开发中，数据表格组件是不可或缺的UI元素。SitePen/dgrid作为新一代数据网格解决方案，相比传统的dojox/grid在架构设计和功能实现上有着显著差异。本文将深入对比两者的使用方式，帮助开发者理解dgrid的设计理念并顺利完成技术迁移。

基础用法对比

编程式创建表格

dojox/grid传统方式：

require([
    'dojox/grid/DataGrid',
    'dojo/store/Memory',
    'dojo/data/ObjectStore'
], function (DataGrid, Memory, ObjectStore) {
    var memoryStore = new Memory({ data: [...] });
    var objectStore = new ObjectStore({ objectStore: memoryStore });

    var grid = new DataGrid({
        structure: [
            { field: 'id', name: 'ID', width: '10%' },
            { field: 'name', name: 'Name', width: '20%' },
            { field: 'description', name: 'Description', width: '70%' }
        ],
        store: objectStore
    }, 'grid');
    grid.startup();
});

dgrid现代方式：

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dstore/Memory'
], function (declare, OnDemandGrid, Keyboard, Selection, Memory) {
    var memoryStore = new Memory({ data: [...] });

    var grid = new declare([ OnDemandGrid, Keyboard, Selection ])({
        columns: {
            id: 'ID',
            name: 'Name',
            description: 'Description'
        },
        collection: memoryStore
    }, 'grid');
});

关键差异分析：

1. 样式分离：dgrid倡导样式与逻辑分离，宽度等样式属性通过CSS控制
2. 数据存储：dgrid直接使用dstore/dojo.store API，无需数据适配层
3. 模块化设计：键盘支持、选择功能等通过mixins方式按需引入
4. 简洁API：dgrid的columns定义更为简洁，支持对象字面量语法

高级功能对比

多行布局实现

dojox/grid实现：

var grid = new DataGrid({
    structure: [
        [
            { field: 'id', name: 'ID', width: '10%' },
            { field: 'name', name: 'Name', width: '20%' }
        ],
        [
            { field: 'description', name: 'Description', width: '70%', colSpan: 2 }
        ]
    ],
    store: objectStore
}, 'grid');

dgrid实现：

var grid = new declare([ OnDemandGrid, Keyboard, Selection ])({
    subRows: [
        [
            { field: 'id', label: 'ID' },
            { field: 'name', label: 'Name' }
        ],
        [
            { field: 'description', label: 'Description', colSpan: 2 }
        ]
    ],
    collection: memoryStore
}, 'grid');

技术要点：

• dgrid使用subRows属性替代structure
• 每行定义为一个数组，包含列配置对象
• 必须显式指定field属性，无法通过对象键名推断

多视图(ColumnSet)实现

dojox/grid多视图：

var grid = new DataGrid({
    structure: [
        { // 第一视图
            width: '10%',
            cells: [
                { field: 'id', name: 'ID', width: 'auto' }
            ]
        },
        [ // 第二视图
            [
                { field: 'name', name: 'Name', width: '20%' },
                { field: 'description', name: 'Description', width: '80%' }
            ]
        ]
    ],
    store: objectStore
}, 'grid');

dgrid ColumnSet实现：

var grid = new declare([ OnDemandGrid, ColumnSet, Keyboard, Selection ])({
    columnSets: [
        [ // 第一列集
            [
                { field: 'id', label: 'ID' }
            ]
        ],
        [ // 第二列集
            [
                { field: 'name', label: 'Name' },
                { field: 'description', label: 'Description' }
            ]
        ]
    ],
    collection: memoryStore
}, 'grid');

架构优势：

• 模块化设计：ColumnSet作为可选功能通过mixin引入
• 样式控制：视图宽度通过CSS类控制，实现关注点分离
• 灵活组合：可根据需求自由组合各种功能mixins

声明式创建对比

基础表格声明

dojox/grid方式：

<table id="grid" data-dojo-type="dojox/grid/DataGrid"
    data-dojo-props="store: objectStore">
    <thead>
        <tr>
            <th field="id" width="10%">ID</th>
            <th field="name" width="20%">Name</th>
            <th field="description" width="70%">Description</th>
        </tr>
    </thead>
</table>

dgrid方式：

<table id="grid" data-dojo-type="dgrid/GridFromHtml"
    data-dojo-mixins="dgrid/OnDemandList, dgrid/Keyboard, dgrid/Selection"
    data-dojo-props="collection: memoryStore">
    <thead>
        <tr>
            <th data-dgrid-column='{ "field": "id" }'>ID</th>
            <th data-dgrid-column='{ "field": "name" }'>Name</th>
            <th data-dgrid-column='{ "field": "description" }'>Description</th>
        </tr>
    </thead>
</table>

设计理念差异：

1. 配置方式：dgrid使用标准data-*属性，符合HTML5规范
2. 功能扩展：通过data-dojo-mixins属性实现功能组合
3. 列定义：采用JSON格式的data-dgrid-column属性，灵活性更高

事件处理机制对比

行点击事件示例

dojox/grid事件处理：

grid.connect(grid, "onRowClick", function(evt){
    var item = grid.getItem(evt.rowIndex);
    console.log("Clicked item with name: " +
        grid.store.getValue(item, "name"));
});

dgrid事件处理：

grid.on('.dgrid-row:click', function (event) {
    var item = grid.row(event).data;
    console.log('Clicked item with name: ' + item.name);
});

现代化改进：

1. 事件委托：dgrid使用事件委托提高性能
2. 直接数据访问：无需通过store.getValue方法
3. 简洁API：row()方法直接返回行相关数据
4. CSS选择器：支持标准DOM事件处理模式

总结与迁移建议

1. 架构升级：从dojo.data迁移到dojo.store/dstore体系
2. 样式分离：将样式定义从JavaScript迁移到CSS
3. 模块化思维：按需引入功能mixins而非使用全功能组件
4. 事件处理：采用现代事件监听模式替代传统connect方式
5. 渐进迁移：复杂表格可考虑分阶段迁移

dgrid通过模块化设计、清晰的关注点分离和现代API设计，为开发者提供了更灵活、更高效的数据网格解决方案。理解这些设计差异将帮助您更好地从传统网格组件迁移到dgrid，并充分利用其现代化架构优势。