我有一个表是A是由dojo制作的，我需要填充另一个 表B再次使用dojo。在这里，我需要单击表A的行 基于那一行，我需要打电话给我的弹簧控制器 我会将行id或行的某些值发送给控制器 和控制器，它应该返回我需要的模型的json数据 返回dojo，如表B所示。
下面我向您展示我拥有的东西。
按钮填充我在谷歌搜索中获得的表格。
<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>
这是在上表的行点击中填充的表B，即表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>
以下是我使用的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，因为这里有写它的问题。我在互联网上有一些脚本执行ajax请求来发送和接收JSON数据。但是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);
}
});
});
我在函数populateTableB中尝试了这个而不是for循环，这是脚本可以注意到的。
下面我给你一个弹簧控制器
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.
答案 0 :(得分：0)
要在Spring MVC中返回JSON，请确保拥有Jackson库并执行以下操作：
@RequestMapping("myHandler")
public @ResponseBody MyBean myHandlerToGetBean() {
// Do some stuff...
return myBean; // return instance of MyBean
}
Spring将看到返回的对象MyBean，并使用Jackson自动神奇地转换它。如果您不需要任何太过花哨的东西，可以使用Jackson注释来帮助控制MyBean如何序列化/编组。如果你需要能够提供更多控制权的东西，你可以放弃直接返回MyBean，而是返回一个字符串并使用Jackson自定义序列化程序。您可能还想将Content-Type设置为表示您正在返回JSON。
在您的客户端，您可以使用类似jQuery或类似的东西来对您的服务进行AJAX调用，并直接在JavaScript中使用returns对象（浏览器应该再次将JSON转换为JavaScript对象）你用它做什么然后取决于你的实现，但看起来你想要修改你的表的DOM或者某些东西。你也可能起诉某种表插件，如果是这样的话，你会需要阅读文档以确切了解JSON应该采用何种格式以及如何进行更新。