/ / wypełnij tabelę B na podstawie wiersza klikniętego na tabeli A - json, spring-mvc, dojo, spring-roo, dojox.grid.datagrid

wypełnij tabelę B na podstawie wiersza klikniętego na tabeli A - json, spring-mvc, dojo, spring-roo, dojox.grid.datagrid

Mam stolik, który jest zrobiony z dojo i ze mnietrzeba wypełnić inną tabela B ponownie za pomocą dojo. Tutaj muszę kliknąć wiersz tabeli A i na podstawie tego rzędu muszę zadzwonić do mojego kontrolera sprężynowego wraz z wysyłam identyfikator wiersza lub pewną wartość wiersza do kontrolera i kontroler, powinien zwrócić jsonowe dane modelu, którego potrzebuję powrócić do dojo, aby był tak jak w tabeli B.

Tutaj poniżej pokażę ci, co mam.

Przycisk do wypełnienia tabeli, którą otrzymałem w wyszukiwarce 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>

Jest to tabela A, która zostanie wypełniona po kliknięciu przycisku

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

Jest to tabela B, która ma być wypełniona po kliknięciu rzędu powyższej tabeli, czyli w Tabeli 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>

Poniżej znajduje się skrypt dojo, którego użyłem

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

W powyższym skrypcie można znaleźć, że niewypełniło tabelę B, ponieważ tutaj jest problem z jej napisaniem. Mam skrypt w Internecie, który wykonuje zapytanie ajax, aby wysyłać i odbierać dane JSON. Ale nie ma wytłumaczenia dla adresu URL. Próbowałem tej samej nazwy, która została zamapowana w żądaniu. Ale nie wywołało to prośby. Przebiorę scenariusz, którego użyłem.

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

Wypróbowałem tę wewnętrzną funkcję populateTableB zamiast pętli for, która znajduje się wewnątrz skryptu, co można zauważyć.

Poniżej podam kontroler sprężyny

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

}

Wiem, że ten kontroler nie jest w pełni ukończony i potrzebuję pomocy w ukończeniu tego kontrolera i konwersji komponentu bean na JSON.

A więc rzeczy, których potrzebuję jest

dojo powinien zadzwonić do tego kontrolera i wysłać dane, np. id z wiersza tabeli A do niego, to powinien odzyskać dane jako JSON i wypełnij tabelę B.

Odpowiedzi:

0 dla odpowiedzi № 1

Aby zwrócić JSON w Spring MVC, upewnij się, że masz biblioteki Jacksona i wykonaj coś takiego:

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

Wiosna będzie widzieć zwracany obiekt, MyBeani automatycznie przerobić go za pomocą Jacksona. Możesz użyć adnotacji Jacksona, aby ułatwić kontrolę nad tym, jak MyBean dostajesz serializację / marszałek, jeśli nie potrzebujesz niczego zbyt wymyślnego. Jeśli potrzebujesz czegoś, co daje większą kontrolę, możesz zrezygnować ze zwrotu MyBean bezpośrednio, a zamiast tego zwróć ciąg i użyj niestandardowego serializera Jacksona. Możesz także ustawić swoje Content-Type oznaczający, że zwracasz JSON.

Po stronie klienta możesz użyć czegoś podobnegojQuery, lub cokolwiek innego, aby wywołać AJAX do twojej usługi i użyć obiektu return bezpośrednio w JavaScript (przeglądarka powinna zamienić JSON w obiekt JavaScript, ponownie "auto-magicznie). To, co z nim zrobisz, zależy od twoja implementacja, ale wydaje się, że chciałbyś zmodyfikować DOM swojego stołu lub coś podobnego. Możesz też pozwać coś w rodzaju wtyczki tabeli, a jeśli tak, będziesz musiał przeczytać dokumentację, aby zobaczyć, jaki format powinien JSON być w i jak robić aktualizacje.