Question

我们正在使用我们正在开发的客户端使用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时，看起来内容已被完全删除。

你们有没有想过为什么会这样？是否有某种我们忘记添加的属性？

Answer 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没有冲突导致奇怪。

为什么我的Dojo（1.3.2）数据网格在排序中删除了我的内容？

1 个答案: