/ / Füllen Sie eine Tabelle B basierend auf der Zeile, die auf Tabelle A geklickt wurde - json, spring-mvc, dojo, spring-roo, dojox.grid.datagrid

füllen Sie eine Tabelle B basierend auf Zeile angeklickt auf Tabelle A - JSON, Spring-Mvc, Dojo, Spring-Roo, dojox.grid.datagrid

Ich habe einen Tisch, an dem A aus Dojo und ich bestehtmüssen einen anderen bevölkern Tabelle B erneut mit Dojo. Hier muss ich auf die Zeile der Tabelle A klicken und basierend auf dieser Reihe muss ich meinen Federregler anrufen zusammen mit werde ich die row id oder einen Wert der Zeile an den Controller senden und der Controller sollte JSON-Daten eines Modells, das ich brauche, zurückgeben zurück zum Dojo, so dass es als Tabelle B

Hier unten zeige ich dir, was ich habe.

Knopf, um eine Tabelle zu füllen, die ich in der Google-Suche bekam.

<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>

Dies ist die Tabelle A, die beim Klicken auf die Schaltfläche ausgefüllt wird

<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>

Dies ist die Tabelle B, die bei einem Zeilenklick der obigen Tabelle gefüllt werden soll, dh Tabelle A

<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>

Und unten ist das Dojo-Skript, das ich verwendet habe

<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>

Im obigen Skript kann man feststellen, dass ich das nicht getan habebevölkerte die Tabelle B, weil hier das Problem ist, es zu schreiben. Ich habe ein Skript im Internet, das eine AJAX-Anfrage zum Senden und Empfangen von JSON-Daten sendet. Aber es gibt keine Erklärung für die URL. Ich habe den gleichen Namen versucht, der in der Anfrage zugeordnet ist. Aber es hat die Anfrage nicht aufgerufen. Ich werde das Skript, das ich benutzt habe, hinter mir lassen.

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

Ich habe diese interne Funktion populateTableB anstelle der for-Schleife ausprobiert, die innerhalb des Skripts zu sehen ist.

Unten gebe ich dir den Federregler

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

}

Ich weiß, dass dieser Controller nicht vollständig abgeschlossen ist und ich brauche Hilfe bei der Fertigstellung dieses Controllers und der Konvertierung der Bean in JSON.

Also die Dinge, die ich brauche ist

Dojo sollte diesen Controller aufrufen und einige Daten senden, zum Beispiel ID der Zeile der Tabelle A, dann sollte es die Daten als JSON und Füllen Sie die Tabelle B.

Antworten:

0 für die Antwort № 1

Um JSON im Spring MVC zurückzugeben, stellen Sie sicher, dass Sie die Jackson-Bibliotheken haben und tun Sie etwas wie:

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

Spring wird sehen, dass das Objekt zurückgegeben wird, MyBeanund es automatisch mit Hilfe von Jackson konvertieren. Sie können die Jackson-Anmerkungen verwenden, um eine gewisse Kontrolle darüber zu ermöglichen, wie MyBean wird serialisiert / gemarshallt, wenn Sie nichts zu ausgefallenes brauchen. Wenn Sie etwas brauchen, das mehr Kontrolle gibt, können Sie auf Ihre Rückkehr verzichten MyBean direkt, und stattdessen einen String zurückgeben und einen benutzerdefinierten Jackson-Serializer verwenden. Sie können auch festlegen, dass Content-Type um anzuzeigen, dass Sie JSON zurückgeben.

Auf Ihrer Client-Seite können Sie etwas wiejQuery oder was auch immer, um einen AJAX-Aufruf an Ihren Dienst zu richten und das returns-Objekt direkt im JavaScript zu verwenden (der Browser sollte den JSON wieder zu einem JavaScript-Objekt machen, wieder "automatisch magisch). Was Sie damit machen, hängt davon ab Ihre Implementierung, aber es scheint, als ob Sie das DOM Ihrer Tabelle oder etwas ändern möchten.Sie können auch eine Art von Tabellen-Plug-Ins verurteilen, und wenn ja, müssen Sie die Dokumentation lesen, um genau zu sehen, welches Format der JSON haben sollte in und wie man die Updates macht.