刷新DojoGrid

Question

我有这个网格显示从数据库中检索的一些数据。我正在以JSON string的形式检索数据，其形式为::

[{"ActID":16,"Assigned To":"Anand","Activity Type":"fdsf","Status":"New","Assigned Date":"2012-04-20 00:00:00","Assigned Time":"1899-12-30 17:44:00","Email":"rakesh.shukla@gmail.com"},{"ActID":17,"Assigned To":"Anand","Activity Type":"fdsf","Status":"New","Assigned Date":"2012-04-20 00:00:00","Assigned Time":"1899-12-30 17:44:00","Email":"rakesh.shukla@gmail.com"}]

让我把我的代码放在第一位::

<script type="text/javascript">
function getInfoFromServer(){
        $.get("http://anandkr08:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) {
        success:postToPage(result),
        alert('Load was performed.');
            },"json");
    }


    function postToPage(data){
    alert(data);    
    var storedata = {
        identifier:"ActID",
        items: data
        };
    alert(storedata);

    var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
    var gridStructure =[[

                          { field: "ActID",
                                name: "Activity ID",
                                classes:"firstName"

                          },
                          {
                              field: "Assigned To",
                              name: "Assigned To",
                              classes: "firstName"

                          },
                          { field: "Activity Type",
                                name: "Activity Type",
                                classes:"firstName"

                          },
                          {
                              field: "Status",
                              name: "Status",
                              classes: "firstName"

                          },
                          {
                              field: "Assigned Date",
                              name: "Assigned Date",
                              classes: "firstName"

                          },
                          {
                              field: "Assigned Time",
                              name: "Assigned Time",
                              classes: "firstName"

                          },
                          {
                              field: "Email",
                              name: "SendMail",
                              formatter: sendmail,
                              classes: "firstName"

                          },
                          {
                              field: "ActID",
                              name: "Delete",
                              formatter: deleteact,
                              classes: "firstName"
                          }

                    ]
              ];
    //var grid = dijit.byId("gridDiv");
    //grid.setStore(store1);

    var grid = new dojox.grid.DataGrid({

        store: store1,
        structure: gridStructure,
        rowSelector: '30px',
        selectionMode: "single",
        autoHeight:true,
        columnReordering:true

        },'gridDiv');

    grid.startup();
    dojo.connect(grid, "onRowClick", grid, function(){
                var items = grid.selection.getSelected();
                dojo.forEach(items, function(item){

                    var v = grid.store.getValue(item, "ActID");
                    getdetailsfordialog(v);
                    function showDialog(){
                        dojo.require('dijit.Tooltip');
                        dijit.byId("terms").show();
                    }

                    showDialog();
                    }, grid);

            });
}
</script>

HTML code ::

<button id="pendingbutton" type="button" style="height: 50px; width: 100px;" onclick="getInfoFromServer()" value="Get Activities">Get Activities</button></center><br><br><br>
<center><div id="gridDiv"  title="Simple Grid">
</div></center>

现在在上面的代码$.get中点击一个按钮（上面给出的HTML代码），从数据库中检索数据，第一次在页面上显示网格而不刷新页面（因为它使用$ .get调用。现在我想要的是当我再次点击按钮时。检索到一个新数据（工作正常，已从alert(data)检查过），但网格本身并未刷新。我想刷新网格而不刷新页面。我尝试过使用setstore（注释掉）功能，但它不适合我。虽然当我点击按钮获取新数据时，我确实在谷歌浏览器的javascript控制台中获得了error ::

Tried to register widget with id==gridDiv but that id is already registered

我认为每次点击按钮时都需要分配一个新ID。请帮我解决这个问题。谢谢。

编辑部分::

function initGrid(){
    var gridStructure =[[

                          { field: "ActID",
                                name: "Activity ID",
                                classes:"firstName"

                          },
                          {
                              field: "Assigned To",
                              name: "Assigned To",
                              classes: "firstName"

                          },
                          { field: "Activity Type",
                                name: "Activity Type",
                                classes:"firstName"

                          },
                          {
                              field: "Status",
                              name: "Status",
                              classes: "firstName"

                          },
                          {
                              field: "Assigned Date",
                              name: "Assigned Date",
                              classes: "firstName"

                          },
                          {
                              field: "Assigned Time",
                              name: "Assigned Time",
                              classes: "firstName"

                          },
                          {
                              field: "Email",
                              name: "SendMail",
                              formatter: sendmail,
                              classes: "firstName"

                          },
                          {
                              field: "ActID",
                              name: "Delete",
                              formatter: deleteact,
                              classes: "firstName"
                          }

                    ]
              ];

dojo.ready(function(){
    initGrid();
  });

我的postToPage函数::

function postToPage(data){
    alert(data);    
    var storedata = {
        identifier:"ActID",
        items: data
        };
    alert(storedata);

    var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
        grid = dijit.registry.byId("gridDiv");
        grid.set("store", store1);
        grid.filter();
        dojo.connect(grid, "onRowClick", grid, function(){
                var items = grid.selection.getSelected();
                dojo.forEach(items, function(item){

                    var v = grid.store.getValue(item, "ActID");
                    getdetailsfordialog(v);
                    function showDialog(){
                        dojo.require('dijit.Tooltip');
                        dijit.byId("terms").show();
                    }

                    showDialog();
                    }, grid);

            });
}

我在这里得到error ::

Cannot call method 'set' of undefined.

我想我还没有将我的网格定义为dojogrid.像这样::

var grid = new dojox.grid.DataGrid

请你详细说明我需要在我的initgrid()函数中写下什么。我是否需要对HTML代码进行任何更改。我已定义结构但未分配结构。还有一个我在同一页面上有多个dojogrid。但我的initgrid函数只有一个，只包含一个结构。我需要做出哪些改变，以便我能够显示其他网格？我的其他网格具有不同的结构，每个网格都由<div>元素中的ID表示。如上所述，身份证"gridDiv"。谢谢。

Answer 1

您收到此错误，因为您每次单击按钮时都尝试创建新的网格窗口小部件。有两种可能的解决方案：手动销毁现有小部件，或仅创建一个网格小部件实例并重复使用它。

我认为，每次从服务器收到数据时，您都不需要重新创建网格。我建议你将所有网格初始化逻辑（包括结构，但除了存储分配）移动到像initGrid这样的新方法，这将创建空网格。称之为一页加载：

  dojo.ready(function() {
    initGrid();
  });

然后，当从服务器收到数据时，您可以初始化数据存储和更新网格（调整postToPage功能）：

  function postToPage(data){
    var storedata = {
      identifier:"ActID",
      items: data
    };
    var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
    var grid = dijit.registry.byId("gridDiv");
    grid.set("store", store1);
    grid.filter();
  }

这应该有效。另外，我建议您不要使用内联CSS样式和center标记。

<强>更新

每次更新数据时都不需要连接到onRowClick事件，因此也应该在initGrid中完成。

您的initGrid方法应如下所示：

  function initGrid() {
    var gridStructure =[[
    // declare your structure here
    ]];

    var grid = new dojox.grid.DataGrid({
      structure: gridStructure,
      rowSelector: '30px',
      selectionMode: "single",
      autoHeight:true,
      columnReordering:true
    },'gridDiv');


    dojo.connect(grid, "onRowClick", grid, function(){
      // onRowClick handler
    });

    grid.startup();
  }