如何在删除项目后刷新dojo 1.9中的datagrid

时间:2013-08-26 06:37:50

标签: dojo dojox.grid.datagrid xmlstore

我正在使用Dojo Toolkit 1.9 Datagrid并且我正在从xmlStore填充数据,但是我面临的一个问题是在从datagrid删除任何项目之后,在我们手动浏览器刷新之前它没有得到刷新。你能不能请任何人建议我怎么办?源代码如下:

<html>
<head>
<title>User Demo</title>
<link rel="stylesheet" href="../dojo-release-1.9.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="../dojo-release-1.9.1/dojox/grid/resources/claroGrid.css">
<script src='../dojo-release-1.9.1/dojo/dojo.js'></script>
<script src='myscript.js'></script>
<body>
    <div id="ObjectGrid"></div>
</body>
</html>
    var globalUserId;
    var appContext = "/" + (window.location.pathname).split("/")[1];
    require(
            [ 'dojo/dom', 'dojo/json', 'dojox/json/schema',
                    'dojox/data/JsonRestStore', 'dojox/grid/DataGrid',
                    'dojox/grid/_CheckBoxSelector', 'dojo/on',
                    'dojo/request/xhr', 'dijit/Dialog', 'dojox/data/XmlStore',
                    'dijit/form/FilteringSelect', 'dijit/Calendar',
                    'dijit/form/Form', 'dijit/form/ValidationTextBox',
                    'dijit/form/TextBox', 'dijit/form/FilteringSelect',
                    'dijit/form/Button', 'dijit/layout/TabContainer',
                    'dijit/layout/ContentPane', 'dojo/domReady!' ],
            function(dom, JSON, schema, JsonRestStore, DataGrid,
                    _CheckBoxSelector, on, xhr) {

                var userDataStore12 = new dojox.data.XmlStore({
                    url : appContext + "/rest/userservice/getusers",
                    rootItem : "user"
                });

                var gridCell = [{field : "userid",name : "User Id",width : '10%'},
                        {field : "name",name : "Name",width : '15%'},
                        {field : "email",name : "Email",width : '15%'},
                        {field : "userName",name : "User Name",width : '10%'},
                        {field : "phone",name : "Phone",width : '10%'},
                        {field : "roleName",name : "Role",width : '10%'},
                        {field : "status",name : "Status",width : '10%'},
                        {name : "Action",field : "action",width : '10%',
                            formatter : function(item) {
                                var link = '<a href="#" title="Edit" onClick="updateUserDialog.show()"><div class="dijitIconEdit"></div></a> <a href="#" id="deleteUser" onClick="deleteUser();" title="Delete"><div class="dijitIconDelete"></div></a>';
                                return link;
                            }
                        }];

                gridLayout = [ {
                    // First, our view using the _CheckBoxSelector custom type
                    type : "dojox.grid._CheckBoxSelector"
                }, gridCell ];

                grid = new DataGrid({
                    store : userDataStore12,
                    structure : gridLayout,
                    selectionMode : "single",
                    autoHeight : true
                }, "ObjectGrid");
                grid.startup();

                on(grid, "RowClick", function showDetail(e) {
                    var gridUserId = grid.store.getValue(grid.getItem(e.rowIndex), "userid");
                    globalUserId = gridUserId;
                });
            });
    function deleteUser() {

        require([ 'dojo/dom', 'dojo/request' ], function(dom, request) {
            //request for delete user           
            request.post(appContext + "/rest/userservice/deleteUser", {
                data : "userId=" + globalUserId,
                timeout : 2000
            }).then(function(response) {
                console.log("request sent successfully!!!!!!!");

            });
        });

    }

1 个答案:

答案 0 :(得分:1)

我设法以这种方式删除了一行Datagrid。我通过复选框选择一行,然后通过网格末尾的按钮调用函数getSelectedItems()来删除所选行。

function getSelectedItems(){
  require(["dijit/registry", "dojo/_base/array", "dojo/domReady!"], function(registry, array){
    var items = registry.byId("GraphGrid").selection.getSelected();
    if (items.length) {
        array.forEach(items, function(selectedItem){
        /* Delete the item from the data store: */
    GraphicStore.deleteItem(selectedItem);
        });
    }
  });
 }

<强>更新

有点晚了,我不确定这个问题是否仍然存在,但我现在为我解决了这个问题。我的问题几乎和你的一样。我有一个Datagrid显示在ContentPane中,并希望delet单行。问题是我删除项目后,网格没有刷新。所以我用

重新加载它
grid.setStore(GraphicStore);

但除了列标题外,ContentPane仍为空。当我对行进行排序时,会出现新的网格。然后我设置一个警报,看看Grid是否仍在注册,并且通过此警报,Grid突然出现! 为了解决这个问题,我设置了一个超时,因此网格可以完全加载(我猜它与加载有关)和新商店的设置。 Gird出现 - 问题解决了。

我是这样做的:

  setTimeout(function(){
    grid.setStore(GraphicStore);
    }, 1000);

此致,Miriam