dgrid 0.4 版本迁移指南：核心变更与技术升级详解

2025-06-19 11:27:54作者：滑思眉Philip

前言

dgrid 作为现代Web应用开发中广泛使用的高级数据网格组件，在0.4版本中进行了重大架构调整。本文将从技术实现角度，深入解析从0.3到0.4版本的关键变更，帮助开发者顺利完成迁移工作。

版本兼容性变更

Dojo版本要求

dgrid 0.4版本对底层依赖进行了升级：

最低要求：必须使用Dojo 1.8或更高版本
废弃支持：不再兼容Dojo 1.7及以下版本
技术原因：新版本依赖dstore组件，而dstore需要Dojo 1.8提供的dojo/request模块及改进的Deferred/Promise实现

升级建议：从Dojo 1.7迁移到1.8+通常较为平滑，1.x系列保持良好向后兼容性。

数据存储架构革新

从dojo/store到dstore的转变

0.4版本最大的架构变化是全面采用dstore替代原有的dojo/store：

特性	dojo/store (0.3)	dstore (0.4)
基础API	标准dojo/store API	Collection API
实时更新	Observable包装	Trackable mixin
查询接口	query方法	链式Collection方法
排序实现	sort属性	增强的排序API

实时数据更新实现

0.4版本使用dstore的Trackable mixin实现数据变更监听：

// 创建可跟踪的存储
const TrackableMemory = declare([Memory, Trackable]);
const store = new TrackableMemory({ data: [...] });

// 或转换现有存储
const trackableStore = Trackable.create(existingStore);

重要提示：必须在将store传递给dgrid实例前使其可跟踪，否则监听功能不会生效。

旧版存储适配方案

对于仍需使用dojo/store的项目，可通过适配器过渡：

import StoreAdapter from 'dstore/StoreAdapter';

const dstoreStore = new StoreAdapter({ objectStore: dojoStore });

注意：适配器方案不支持实时更新功能。

核心API变更详解

数据源接口变化

0.3版本实现方式

// 使用store属性
const grid = new OnDemandGrid({
    store: memoryStore,
    query: { category: 'books' },  // 过滤条件
    sort: 'title'                  // 排序规则
});

0.4版本新规范

// 使用collection属性
const grid = new OnDemandGrid({
    collection: memoryStore
        .filter({ category: 'books' })  // 链式过滤
        .sort('title'),                 // 链式排序
    columns: [...]
});

动态过滤实现对比

0.4版本采用更声明式的过滤方式：

// 按钮点击事件处理
on(filterButtons, 'click', function(type) {
    grid.set('collection', 
        store.filter({ itemType: type })
    );
});

排序功能增强

多字段排序语法变更：

// 0.3版本
sort: [
    { attribute: 'name', descending: false },
    { attribute: 'date', descending: true }
]

// 0.4版本
sort: [
    { property: 'name', descending: false },
    { property: 'date', descending: true }
]

功能模块重构

编辑器功能(Editor)

从列插件改为mixin模式：

0.3版本实现

columns: [
    editor({
        field: 'username',
        editor: 'text',
        editOn: 'dblclick'
    }, 'text', 'dblclick')
]

0.4版本实现

const EditorGrid = declare([Grid, Editor]);

new EditorGrid({
    columns: [
        {
            field: 'username',
            editor: 'text',    // 编辑器类型
            editOn: 'dblclick'  // 触发事件
        }
    ]
});

选择器功能(Selector)

选择器实现方式变更：

0.3版本

columns: {
    select: selector({ label: '选择' }, 'radio')
}

0.4版本

const SelectorGrid = declare([Grid, Selector]);

new SelectorGrid({
    columns: {
        select: {
            label: '选择',
            selector: 'radio'  // 或'checkbox'
        }
    }
});

树形结构功能(Tree)

树形网格实现方式优化：

0.3版本

columns: {
    name: tree({ label: '名称' })
}

0.4版本

const TreeGrid = declare([OnDemandGrid, Tree]);

new TreeGrid({
    columns: {
        name: {
            label: '名称',
            renderExpando: true  // 启用展开图标
        }
    },
    treeIndentWidth: 20  // 缩进宽度
});

树形数据存储规范

数据结构要求

dgrid 0.4的树形功能需要数据包含特定元数据：

const treeData = [
    { 
        id: 'root1', 
        name: '根节点',
        parent: null,      // 标记为根节点
        hasChildren: true  // 可能有子节点
    },
    {
        id: 'child1',
        name: '子节点',
        parent: 'root1',   // 指向父节点
        hasChildren: false // 叶节点
    }
];

存储实现方案

基础实现

import { Memory, Tree as TreeStore } from 'dstore';

const store = new (declare([Memory, TreeStore]))({
    data: treeData
});

const grid = new TreeGrid({
    collection: store.getRootCollection()  // 初始只加载根节点
});

自定义实现

如需特殊逻辑，可覆盖默认方法：

const CustomTreeStore = declare([Memory, TreeStore], {
    getChildren: function(parent, options) {
        // 自定义子节点获取逻辑
    },
    mayHaveChildren: function(item) {
        // 自定义子节点存在判断
    }
});