javascript - さわやかな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コード::

<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コードに変更を加える必要がありますか？構造を定義しましたが、構造を割り当てていません。もう1つ、同じページに複数のdojogridがあります。しかし、私のinitgrid関数は1つだけで、構造は1つだけです。他のグリッドも表示できるようにするには、どのような変更を加える必要がありますか？私の他のグリッドは異なる構造を持っており、それぞれが要素内のIDで表され<div>ます。上記のようにIDを持っています"gridDiv"。ありがとう。

Answer 1

ボタンがクリックされるたびに新しいグリッドウィジェットを作成しようとしているため、このエラーが発生します。考えられる解決策は2つあります。既存のウィジェットを手動で破棄するか、グリッドウィジェットのインスタンスを1つだけ作成して再利用します。

サーバーからデータを受信するたびにグリッドを再作成する必要はないと思います。すべてのグリッド初期化ロジック（構造を含むが、ストアの割り当てを除く）をinitGrid、のような新しいメソッドに移動することをお勧めします。これにより、空のグリッドが作成されます。そしてそれを1ページのロードと呼びます：

  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();
  }

これは機能するはずです。centerまた、インラインCSSスタイルとタグを使用しないことをお勧めします。

アップデート：

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();
  }