为什么我的 Dojo (1.3.2) 数据网格会在排序时擦除我的内容？答案

【问题标题】：Why is my Dojo (1.3.2) Data Grid erasing my content on sort?为什么我的 Dojo (1.3.2) 数据网格会在排序时擦除我的内容？
【发布时间】：2016-10-02 21:12:07
【问题描述】：

我们正在处理的客户端上使用 Dojo 1.3.2，因此我们没有太多运气找到如何使用它的好例子。我们的数据网格代码正确初始化了内容，但是当我们尝试单击标题对其进行排序时，它会完全删除数据元素的容器，而无需重新填充数据网格。

我们的代码如下：

function initializeGridData(){
        dojo.require("dojo._base.lang");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");

        /*set up data store*/
        var data = {
          identifier: "id",
          items: []
        };
        var data_list = [
          { col1: "05/04/2016", col2: 'Catherine', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Pending'},
          { col1: "05/04/2016", col2: 'Heathcliff', col3: 'Dr. Linton', col4: 45.00, col5: 15.00, col6: 'Medical', col7: 'Pending'},
          { col1: "05/05/2016", col2: 'Catherine', col3: 'Quest Diag.', col4: 45.00, col5: 95.00, col6: 'Dental', col7: 'Completed'},
          { col1: "05/04/2016", col2: 'Catherine', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Pending'},
          { col1: "05/04/2016", col2: 'Catherine', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Pending'},
          { col1: "05/03/2016", col2: 'Catherine', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Completed'},
          { col1: "05/04/2016", col2: 'Edgar', col3: 'Dr. Linton', col4: 45.00, col5: 15.00, col6: 'Medical', col7: 'Pending'},
          { col1: "05/04/2016", col2: 'Heathcliff', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Dental', col7: 'Pending'},
          { col1: "05/09/2016", col2: 'Heathcliff', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Pending'},
          { col1: "05/04/2016", col2: 'Catherine', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Completed'},
          { col1: "05/04/2016", col2: 'Catherine', col3: 'Dr. Smith', col4: 45.00, col5: 'TBD', col6: 'Prescription', col7: 'Pending'},
          { col1: "05/10/2016", col2: 'Catherine', col3: 'Dr. Linton', col4: 45.00, col5: 'TBD', col6: 'Medical', col7: 'Pending'}
        ];
        var rows = 60;
        for(var i = 0, l = data_list.length; i < rows; i++){
            data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
        }
        var store = new dojo.data.ItemFileWriteStore({data: data});

        /*set up layout*/
        var layout = [[
          {'name': 'Date of Service', 'field': 'col1', 'width': '100px'},
          {'name': 'Member', 'field': 'col2', 'width': '100px'},
          {'name': 'Provider', 'field': 'col3', 'width': '200px'},
          {'name': 'Total Cost', 'field': 'col4', 'width': '150px'},
          {'name': 'You Pay', 'field': 'col5', 'width': '150px'},
          {'name': 'Type', 'field': 'col6', 'width': '150px'},
          {'name': 'Status', 'field': 'col7', 'width': '150px'}
        ]];

        /*create a new grid*/
        var grid = new dojox.grid.DataGrid({
            store: store,
            rowSelector: '20px',
            structure: layout,
            canSort: function(col){ return Math.abs(col) === 2 || Math.abs(col) === 1 || Math.abs(col) === 3; }
        }, document.createElement('div'));


            /*append the new grid to the div*/
        grid.placeAt("gridDiv");

        /*Call startup() to render the grid*/
        grid.startup();
    }

这会产生以下结果：

单击标题时，会发生这种情况：

并检查 DOM，看起来内容已被完全删除。

你们中有人知道为什么会这样吗？是否有某种我们忘记添加的属性？

【问题讨论】：

标签： javascript sorting datagrid dojo

【解决方案1】：

这里的代码

    http://jsfiddle.net/bradyhouse/bnqkodup/

看起来奇怪的相似，这可能是为了增强网格，不确定。可能是在 dom 中移动网格或编写自定义排序函数的细微差别。

对 DataGrid 的引用（1.6 参考 - 我可以很快找到最旧的，但大多数属性应该在 1.3.x 中可用）：

    https://dojotoolkit.org/reference-guide/1.6/dojox/grid/DataGrid.html

这里有一些用于简单 DataGrid API 的简化 jsfiddles。第一种方法与您目前使用的方法类似，但有一些小例外。

    http://jsfiddle.net/vijayagrawal/NNQpn/
    http://jsfiddle.net/bc7yt/11/

试试这些，看看你有没有运气。与其尝试调试 dojo，不如从不同的角度来处理它，不要纠结于细节。

祝你好运。希望没有其他 JS 发生冲突导致奇怪。

【讨论】：