根据在表A上单击的行填充表B [英] populate a table B based on row clicked on table A
问题描述
我有一个表，它是由dojo制成的，我需要填充另一个 表B再次使用dojo.在这里，我需要单击表A的行 根据该行，我需要打电话给我的弹簧控制器 与我一起将行ID或行的某些值发送到控制器 和控制器，它应该返回我需要的模型的json数据 返回到表B的dojo.
I have a table that A is made from dojo and I need to populate another table B again using dojo. Here I need to click the row of the table A and based on that row I need to make a call to my spring controller along with I will send the row id or some value of row to controller and the controller, it should return json data of a model that i need to return to dojo to so it as table B.
在下面，我向您展示我所拥有的.
Here below I show you that what I have.
按钮填充我在Google搜索中获得的表格.
Button to populate a table that which I got In google search.
<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
This is the table A that going to populated on button click
<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
This the table B that is to be populated on row click of above table, that is Table 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脚本
And below is the dojo script i used
<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，因为这是编写表B的问题.我在Internet上有一些脚本，该脚本执行ajax请求来发送和接收JSON数据.但是没有URL的解释.我尝试了与请求映射中的名称相同的名称.但是它没有调用请求.我将过去使用的脚本结束.
In the above script one can find that I did not populated the table B because here is the problem there to write it. I got some script in internet that do ajax request to send and receive JSON data. But there is no explanation for URL. I tried same name that which is in request mapped. But it did not call the request. I will past the script that I used.
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循环，该循环在脚本中可以注意到它.
I tried this inside function populateTableB instead of the for loop , which is inside the script one can notice it.
下面我给你弹簧控制器
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时需要帮助.
I know this controller is not fully completed and I need help in completing this controller and converting the bean to JSON.
所以我需要的是
So the things what I need is
dojo应该调用此控制器并发送一些数据，例如id 到表A的行，那么它应该以JSON的形式取回数据， 填充表B.
dojo should call this controller and send some data say for example id of table A's row to it, then it should get back the data as JSON and populate the table B.
推荐答案
要在Spring MVC中返回JSON，请确保您具有Jackson库并执行以下操作:
To return JSON in Spring MVC, make sure you have the Jackson libraries and do something like:
@RequestMapping("myHandler")
public @ResponseBody MyBean myHandlerToGetBean() {
// Do some stuff...
return myBean; // return instance of MyBean
}
Spring将看到返回的对象，MyBean，并使用Jackson对其进行自动魔术转换.如果您不需要太高级的内容，则可以使用Jackson注释来方便地控制MyBean的序列化/封送处理方式.如果您需要提供更多控制权的内容，则可以放弃直接返回MyBean，而返回String并使用Jackson自定义序列化器.您可能还需要设置Content-Type，以表示您正在返回JSON.
Spring will see the object being returned, MyBean, and auto-magically convert it using Jackson. You can use the Jackson annotations to facilitate some control over how the MyBean gets serialized/marshaled if you don't need anything too fancy. If you need something that gives more control, you can forgo returning your MyBean directly, and instead return a String and use a Jackson custom serializer. You may also want to set your Content-Type to signify you are returning JSON.
在客户端，您可以使用jQuery之类的东西来对服务进行AJAX调用，并直接在JavaScript中使用return对象(浏览器应将JSON转换为JavaScript对象，再次然后，您对它的处理方式取决于您的实现，但似乎您想修改表的DOM或其他内容.您还可能在起诉某种表插件，如果这样做，您将需要阅读文档以确切了解JSON应该采用的格式以及如何进行更新.
On your client side, you can use something like jQuery, or whatever, to make an AJAX call to your service, and use the returns object directly in the JavaScript (the browser should turn the JSON into a JavaScript object, again "auto-magically). What you do with it then depends on your implementation, but it would seem like you would want to modify the DOM of your table or something. You may also be suing some sort of table pluggin, and if so you will need to read the documentation to see exactly what format the JSON should be in and how to do the updates.
这篇关于根据在表A上单击的行填充表B的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
