0

我有一张 A 由 dojo 制成的表，我需要使用 dojo 再次填充另一个表 B。在这里，我需要单击表 A 的行，并根据该行调用我的 spring 控制器，同时将行 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>

下面是我使用的道场脚本

<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 应该调用这个控制器并向它发送一些数据，例如表 A 的行的 id，然后它应该以 JSON 格式取回数据并填充表 B。

4

1 回答 1

0

要在 Spring MVC 中返回 JSON，请确保您拥有 Jackson 库并执行以下操作：

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

Spring 将看到返回的对象MyBean，并使用 Jackson 自动转换它。MyBean如果您不需要任何太花哨的东西，您可以使用 Jackson 注释来帮助控制序列化/编组的方式。如果您需要提供更多控制权的东西，您可以放弃MyBean直接返回您的，而是返回一个 String 并使用 Jackson 自定义序列化程序。您可能还希望将您的设置Content-Type为表示您正在返回 JSON。

在您的客户端，您可以使用 jQuery 之类的东西来对您的服务进行 AJAX 调用，并直接在 JavaScript 中使用返回对象（浏览器应该将 JSON 转换为 JavaScript 对象，再次“自动魔术). 你用它做什么取决于你的实现, 但看起来你想修改你的表的 DOM 或其他东西. 你可能还起诉了某种表格插件, 如果是这样, 你需要阅读文档以准确查看 JSON 应采用的格式以及如何进行更新。

于 2013-09-25T19:45:13.597 回答