заполнить таблицу B по строке, нажатой на таблицу A

Question

У меня есть таблица, в которой A сделан из додзё, и мне нужно заполнить другую таблицу снова, используя додзё. Здесь мне нужно щелкнуть строку таблицы A и на основе этой строки мне нужно позвонить на контроллер весны , а я отправлю идентификатор строки или некоторое значение строки в контроллер и контроллер, он должен возвращать JSon данные модели, которые мне нужно , чтобы вернуться в додзё так как таблицы B.

Здесь ниже я покажу вам, что у меня есть.

Кнопка для заполнения таблицы, которую я получил В поиске 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> 

Это таблица А, будет заселена на кнопку мыши

<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, которая должна быть заполнена на строки нажатием приведенной выше таблицы, то есть таблица А

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

} 

Я знаю, что этот контроллер не полностью завершен, и мне нужна помощь в заполнении этого контроллера и преобразования компонент в формате JSON.

Так что все, что мне нужно это

додзё должен вызвать этот контроллер и передавать некоторые данные говорят о том, например, идентификатор таблицы строка А к нему, то он должен получить обратно данные в виде JSON и заселить таблица B.

Answer 1

Чтобы вернуть JSON в Spring MVC, убедитесь, что у вас есть библиотеки Джексона и сделать что-то вроде:

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

Весна увидит возвращаемый объект MyBean и автоматически изменяет его с помощью Джексона. Вы можете использовать аннотации Jackson, чтобы облегчить некоторый контроль над тем, как MyBean получает сериализован/маршализирован, если вам не нужно ничего необычного. Если вам нужно что-то, что дает больше контроля, вы можете отказаться от своего MyBean напрямую, а вместо этого вернуть строку и использовать специальный сериализатор Jackson. Вы также можете установить Content-Type, чтобы указать, что вы возвращаете JSON.

На стороне клиента вы можете использовать что-то вроде jQuery или что-то еще, чтобы сделать вызов AJAX вашей службе и использовать объект return непосредственно в JavaScript (браузер должен включить JSON в объект JavaScript, снова «автоматически-магически). То, что вы делаете с этим, зависит от вашей реализации, но похоже, что вы захотите изменить DOM своей таблицы или что-то в этом роде. Вы также можете подать иск на какую-то таблицу pluggin, и если вы так вам нужно будет прочитать документацию, чтобы узнать, в каком формате должен находиться JSON, и как делать обновления.