/ テーブルAをクリックした行に基づいてテーブルBを作成する/ json、spring-mvc、dojo、spring-roo、dojox.grid.datagrid

テーブルAをクリックした行に基づいてテーブルBを作成する - json、spring-mvc、dojo、spring-roo、dojox.grid.datagrid

私はAが道場と私から作られたテーブルを持っています別のものに移入する必要がある 表Bを再度使用してdojoを使用します。ここでは、テーブルAの行をクリックする必要があります その行に基づいて私は私の春のコントローラに電話をする必要があります 一緒に私は行IDまたは行のいくつかの値をコントローラに送信します とコントローラ、それは私が必要なモデルのjsonデータを返す必要があります 表Bのようにドゥージーに戻ります。

ここでは、私が持っているものを示します。

私が取得したテーブルにデータを挿入するためのボタンGoogle検索で。

<button data-dojo-type="dijit/form/Button" type="button" id="goBtn"  disabled="disabled" >GO
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">

populateTable();
</script>

これは、ボタンクリック時に配置されるテーブルAです

<div style="width: 800px; height: 200px;">
<div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableA, idProperty:"tableAid"" data-dojo-id="tableADateStore">
</div>

<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableADateStoreForGrid"
data-dojo-props="objectStore: tableADateStore"></div>

<div id="grid"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:tableADateStoreForGrid,
structure:"layoutGridForTableA",
queryOptions:{deep:true},
query:{},
onRowClick: function(e) {
populateTableB();
},
rowsPerPage:5">
</div>
</div>

これは、上記の表の行クリック、つまり表Aに挿入される表Bです。

<div style="width: 800px; height: 200px;" class="left-div">
<div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableB, idProperty:"tableBid"" data-dojo-id="tableBDateStore">
</div>
<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableBDateStoreForGrid"
data-dojo-props="objectStore: tableBDateStore"></div>

<div id="dateGrid"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:tableBDateStoreForGrid,
structure:"layoutGridForTableB",
queryOptions:{deep:true},
query:{},
rowsPerPage:5">
</div>
</div>

そして、私が使ったdojoのスクリプトは以下の通りです

<script>

require(["dojo/parser", "dijit/form/FilteringSelect", "dijit/form/Button", "dojox/data/HtmlTableStore", "dojox/grid/DataGrid"]);
require(["dojo/store/Memory", "dojo/data/ObjectStore", "dojox/grid/DataGrid", "dojo/_base/lang", "dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore", "dojox/grid/cells/dijit", "dojox/grid/cells/CheckBox", "dojo/dom", "dojo/domReady!"], function () {


layoutGridForTableA = [[
{ field: "nm", name: "Name", width: "auto" },
{ field: "Cod", name: "Code", width: "auto" },
{ field: "startDt", name: "Start Date", width: "auto" },
{ field: "endDt", name: "End Date", width: "auto" }
]];


layoutGridForTableB = [[
{ field: "day", name: "Day", width: "auto" },
{ field: "description", name: "Description", width: "auto" },
{ field: "event", name: "Event", width: "auto" },
{ field: "checkBoxTest", name: "Check Box Test", width: "auto", editable: true, type: dojox.grid.cells.Bool, formatter:formatCell, styles: "text-align: center;" },
{ field: "", name: "", width: "auto", formatter:editButton}

]];

storeDataForTableA = [];
storeDataForTableB = [];

var formatCell = function(){

var checked = val? "checked="checked";" : "<input type="checbox"" +checked+"disabled="disabled"/>";

return checked;

};


function editButton(){
return "<button onclick="" class="editbuttonicon"></button>";

}



});

function populateTableA(){

var addItemToTableA = { name:"Steve", Cod:"007", startDt:"any date", endDt:"any date"};
for (var i=0;i<4;i++)
{
tableADateStoreForGrid.newItem(addItemToTableA );
}
}

function populateTableB(){

var addItemToTableA = { name:"Steve", Cod:"007", startDt:"any date", endDt:"any date"};
for (var i=0;i<4;i++)
{
tableBDateStoreForGrid.newItem(addItemToTableA );
}
}

</script>

上記のスクリプトでは、私はここにはそれを書くための問題があるので、テーブルBに値が設定されます。 JSONデータを送受信するためのajaxリクエストをインターネット上で取得しました。しかし、URLの説明はありません。私はリクエストされたものと同じ名前を試みました。しかし、それは要求を呼び出さなかった。私が使用したスクリプトを通過します。

      dojo.ready(function(){
dojo.xhrGet({
url  : "populateFromSpring",
handleAs: "json",
load: function(Beans) {
//I need to get the Beans object here and populate the Table B
alert("hi");
},
error: function(err) {
alert("err: "+err);
}
});
});

私はforループの代わりにthis関数populateTableBを試しました。これはスクリプト内にあります。

私はあなたに春のコントローラを与える以下

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;


import com.model.TableBBean;
@Controller
@RequestMapping("/populateFromSpring")
public class PopulateFromSpringCtrl {

@RequestMapping(method = RequestMethod.POST)
public @ResponseBody List<TableBBean> tableBmth(@RequestParam String name) {

//            ModelAndView mv = new ModelAndView("loginsuccess");

List<TableBBean> Beans = new ArrayList<TableBBean>();

TableBBean B1 = new TableBBean();

B1.setDay(1);
B1.setDescription("Desc 1");
B1.setEvent("GS");
B1.setCheckBox("0");


TableBBean B2 = new TableBBean();

B2.setDay(2);
B2.setDescription("Desc 2");
B2.setEvent("GS");
B2.setCheckBox("1");


TableBBean B3 = new TableBBean();

B3.setDay(3);
B3.setDescription("Desc 3");
B3.setEvent("GS");
B3.setCheckBox("1");


Beans.add(B1);
Beans.add(B2);
Beans.add(B3);


//mv.addObject("Beans",Beans);
return Beans;
}

}

私はこのコントローラーが完全に完了していないことを知っています。私はこのコントローラーを完成させ、BeanをJSONに変換するのに助けが必要です。

だから私が必要とするものは

dojoはこのコントローラーを呼び出し、いくつかのデータを送信する必要があります。たとえばid テーブルAの行を削除すると、データはJSONとして戻されます。 テーブルBを作成します。

回答:

回答№1は0

Spring MVCでJSONを返すには、Jacksonライブラリがあり、次のようなことをしてください:

@RequestMapping("myHandler")
public @ResponseBody MyBean myHandlerToGetBean() {
// Do some stuff...
return myBean;  // return instance of MyBean
}

Springはオブジェクトが返されるのを見て、 MyBeanジャクソンを使って自動的に変換します。 Jacksonアノテーションを使用すると、 MyBean より管理しやすいものが必要な場合には、 MyBean 代わりにStringを返し、Jacksonのカスタムシリアライザを使用します。あなたはまたあなたの Content-Type あなたがJSONを返すことを示すため。

クライアント側では、次のようなものを使用できますjQueryなどを使用してAJAX呼び出しを行い、JavaScriptで直接returnオブジェクトを使用します(ブラウザはJSONをJavaScriptオブジェクトに変換する必要があります)。あなたの実装では、あなたのテーブルや何かのDOMを変更したいと思うかもしれません。また、何らかの種類のテーブルプラグインを訴えているかもしれません。もしそうなら、ドキュメントを読んで、JSONがどのようにアップデートを行うのか。