/ / naplniť tabuľku B na základe radu kliknutí na stôl A - json, spring-mvc, dojo, spring-roo, dojox.grid.datagrid

vyplniť stôl B na základe radu kliknutí na stôl A - json, spring-mvc, dojo, spring-roo, dojox.grid.datagrid

Mám stôl, že A je vyrobený z dojo a japotrebujete vyplniť iný tabuľka B znova používa dojo. Tu musím kliknúť na riadok tabuľky A a na základe tohto radu musím zavolať na môj jarný regulátor spolu s budem poslať riadok id alebo nejakú hodnotu riadku do kontrolóra a regulátor, mal by vrátiť json dáta modelu, ktorý potrebujem vrátiť sa do dojo tak, ako to tabuľka B.

Nižšie vám ukážem, že to, čo mám.

Tlačidlo pre naplnenie tabuľky, ktorú som dostal do vyhľadávania 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>

Toto je tabuľka A, ktorá sa nachádza po kliknutí na tlačidlo

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

Táto tabuľka B, ktorá sa má vyplniť kliknutím na riadok vyššie uvedenej tabuľky, tj tabuľkou 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>

A nižšie je to dojo skript, ktorý som použil

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

Vo vyššie uvedenom skripte môžeme zistiť, že som to neurobilobsadili tabuľku B, pretože tu je tu problém napísať ju. Dostal som nejaký skript na internete, vďaka ktorému som požiadal ajax o odoslanie a príjem údajov JSON. Neexistuje však žiadne vysvetlenie pre adresu URL. Skúsil som rovnaké meno, ktoré je mapované v žiadosti. Ale žiadosť nevolala. Prejdem skript, ktorý som použil.

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

Skúsil som túto vnútornú funkciu populateTableB namiesto slučky for, ktorá je v skripte.

Nižšie vám dám regulátor pružiny

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

}

Viem, že tento ovládač nie je úplne dokončený a potrebujem pomoc pri dokončení tohto ovládača a konverziu fazule na JSON.

Takže to, čo potrebujem, je

dojo by mal zavolať tento kontrolór a poslať niektoré dáta, napríklad povedať id z tabuľky A "s riadok k nej, potom by mal dostať späť dáta ako JSON a vyplniť tabuľku B.

odpovede:

0 pre odpoveď č. 1

Ak chcete vrátiť JSON na jarnú MVC, uistite sa, že máte knižnice Jackson a urobíte niečo ako:

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

Jar uvidí objekt, ktorý sa vrátil, MyBean, a auto-magicky previesť ju pomocou Jackson. Môžete použiť anotácie Jackson, aby ste uľahčili určitú kontrolu nad tým, ako MyBean dostanete serializáciu / marshaled, ak nepotrebujete nič príliš fantazijne.Ak potrebujete niečo, čo dáva väčšiu kontrolu, môžete sa vrátiť späť MyBean priamo, a namiesto toho vrátiť reťazec a používať Jackson serializátor. Môžete tiež nastaviť svoj Content-Type aby ste označili návrat JSON.

Na strane klienta môžete použiť niečo podobnéjQuery alebo čokoľvek, aby ste volať službu AJAX a použite objekt vracania priamo v jazyku JavaScript (prehliadač by mal obrátiť JSON na objekt JavaScript, opäť "auto-magicky") .To s ním potom závisí od ale zdá sa, že by ste chceli upraviť DOM vášho stola alebo niečo také.Môžete tiež žalovať nejaký typ tabuľky pluggin, a ak áno, budete musieť prečítať dokumentáciu, aby ste videli, aký formát by JSON byť v a ako robiť aktualizácie.