0

我有一个显示一些数据的网格,这些数据是从数据库中检索的。我正在检索数据,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代码::

<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(注释掉)功能,但它不适合我。虽然当我点击一个按钮来获取新数据时,我确实得到了error谷歌浏览器的 javascript 控制台::

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 表示。就像上面有一个 ID 一样"gridDiv"。谢谢。

4

1 回答 1

3

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

我认为,每次从服务器接收到数据时,您都不需要重新创建网格。我建议您将所有网格初始化逻辑(包括结构,但存储分配除外)移动到新方法中,例如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();
  }
于 2012-04-23T14:50:38.157 回答