DataGrid 上的 Dojo setQuery() - 所有项目都消失了吗？答案

【问题标题】：Dojo setQuery() on DataGrid - all items disappear?DataGrid 上的 Dojo setQuery() - 所有项目都消失了吗？
【发布时间】：2011-11-17 18:39:16
【问题描述】：

我绞尽脑汁进行了大量的研究和测试，但不知道发生了什么。

我有一个用一些 HTML 静态声明的 Dojo 数据网格。使用 GUI，我的用户将向 DataGrid 添加项目，它应该可以正常工作。但是，我希望有一个在某个时间点调用的函数，该函数使用 Dojo 的 setQuery 过滤显示在 DataGrid 中的数据。问题是，一旦我运行 setQuery 命令，网格中的所有数据都会消失，无论它是否与查询匹配！

这里是一些示例代码：

var layoutItems = [[
    {
        field: "id",
        name: "ID",
        width: '5px',
        hidden: true
    },
    {
        field: "color",
        name: "Color",
        width: '80px'
    }
]];

// Create an empty datastore //
var storeData = {
    identifier: 'id',
    label: 'id',
    items: []
}
var store3 = new dojo.data.ItemFileWriteStore( {data : storeData} );

...

<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutItems" queryOptions="{deep:true}" query="{}" rowsPerPage="40"></div>

...

function filterGrid() {
    dijit.byId("grid").setQuery({color:"Red"});
}

....

function addItemToGrid(formdata) {
    var jsonobj = eval("(" + dojo.toJson(formData, true) + ")");

    var myNewItem = {
        id: transactionItemID,
        color: jsonobj.color
    };
    // Insert the new item into the store:
    store3.newItem(myNewItem);
    store3.save({onComplete: savecomplete, onError: saveerror});
}

【问题讨论】：

我想通了，但我无法在另外 6 个小时内回答我自己的问题...我会发布我的答案，以防将来其他人遇到同样的问题...谢谢！

标签： dojo dojox.grid dojox.grid.datagrid

【解决方案1】：

通过在一些 jQuery 的帮助下定期在后台运行网格过滤器而不是 setQuery 来修复它（不确定 setQuery 是否也能正常工作，我真的不知道两者之间的区别filter 和 setQuery，但 filter 正在做我需要它做的事情）.

这是一些示例代码；希望这可以帮助其他遇到此问题的人：

// ADD JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    $(document).ready(function() {
        function filterTheDataGrid() {
            if (dijit.byId("grid") != undefined) {
                dijit.byId("grid").filter({color: "Red"});
            }
        }
    // RUN THE filterTheDataGrid FUNCTION EVERY ONE SECOND (1000 MILLISECONDS) //
    // LOWER '1000' FOR FASTER REFRESHING, MAYBE TO 500 FOR EVERY 0.5 SECOND REFRESHES //
    var refreshDataGrid = setInterval(function() {  filterTheDataGrid();    }, 1000);
    }
</script>

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    // SETUP THE LAYOUT FOR THE DATA //
    var layoutItems = [[
    {
        field: "id",
        name: "ID",
        width: '5px',
        hidden: true
    },
    {
        field: "color",
        name: "Color",
        width: '80px'
    }
]];

// Create an empty datastore //
var storeData = {
    identifier: 'id',
    label: 'id',
    items: []
}
var store3 = new dojo.data.ItemFileWriteStore( {data : storeData} );
</script>

 // PUT THIS IN THE <HTML> OF THE PAGE
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutItems" query="{ type: '*' }" clientSort="true" rowsPerPage="40"></div>

<script type="text/javascript">
function addItemToGrid(formdata) {
    // THIS FUNCTION IS CALLED BY A DIALOG BOX AND GETS FORM DATA PASSED TO IT //
    var jsonobj = eval("(" + dojo.toJson(formData, true) + ")");

    var myNewItem = {
        id: transactionItemID,
        color: jsonobj.color
    };
    // Insert the new item into the store:
    store3.newItem(myNewItem);
    store3.save({onComplete: savecomplete, onError: saveerror});
}
</script>

【讨论】：

为什么必须在dojo之上添加jquery ???你可以通过 dojo.ready(function(){...}) 而不是 $(document).ready(function{...}) 实现同样的目的
@Philippe 你是对的；这也可以正常工作；我实际上将代码添加到我的代码中已经存在的 $(document).ready(function{...}) 中，该代码使用 jQuery 从服务器上的 TXT 文件中提取一些数据并将该数据放在 DIV 上每隔几分钟翻页一次，并在某些文本框上进行一些屏蔽输入。 ...但是，是的，对于其他希望这样做的人，使用 dojo.ready(function(){...}) 效果很好并且可以完成同样的事情。谢谢！
我实际上修改了我的代码并创建了一个替代答案，以便过滤器不会每隔 x 毫秒不必要地运行一次，而是仅在将新项目添加到数据网格后运行。 CLICK HERE

【解决方案2】：

这是我想出的另一个选项，这样过滤器就不会每隔 x 毫秒就不必要地运行一次；这基本上使用 JavaScript 来创建一个新的 setInterval，它在 500 毫秒后运行一次，然后执行 clearInterval 以使其不再运行。看起来只是在添加项目后调用 filterTheDataGrids() 函数是行不通的。我们必须延迟一秒钟然后调用它：

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    // Declare the global variables
    var refreshDataGrid;
    var refreshDataGridInterval = 500;    // Change this as necessary to control how long to wait before refreshing the Data Grids after an item is added or removed.
</script>

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    function filterTheDataGrids() {
         if (dijit.byId("grid") != undefined) {
              dijit.byId("grid").filter({color: "Red"});
         }
         clearInterval (refreshDataGrid);    // Running the filter just once should be fine; if the filter runs too quickly, then make the global refreshDataGridInterval variable larger
    }
</script>

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    // SETUP THE LAYOUT FOR THE DATA //
    var layoutItems = [[
    {
        field: "id",
        name: "ID",
        width: '5px',
        hidden: true
    },
    {
        field: "color",
        name: "Color",
        width: '80px'
    }
]];

// Create an empty datastore //
var storeData = {
    identifier: 'id',
    label: 'id',
    items: []
}
var store3 = new dojo.data.ItemFileWriteStore( {data : storeData} );
</script>

 // PUT THIS IN THE <HTML> OF THE PAGE
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutItems" query="{ type: '*' }" clientSort="true" rowsPerPage="40"></div>

<script type="text/javascript">
function addItemToGrid(formdata) {
    // THIS FUNCTION IS CALLED BY A DIALOG BOX AND GETS FORM DATA PASSED TO IT //
    var jsonobj = eval("(" + dojo.toJson(formData, true) + ")");

    var myNewItem = {
        id: transactionItemID,
        color: jsonobj.color
    };
    // Insert the new item into the store:
    store3.newItem(myNewItem);
    store3.save({onComplete: savecomplete, onError: saveerror});

    // Create setInterval on the filterTheDataGrids function; since simple calling the function won't do; seems to call it too fast or something
    refreshDataGrid = setInterval(function() {  filterTheDataGrids();   }, refreshDataGridInterval);
}
</script>

【讨论】：