Como podemos passair os itens do dojo EnhancedGrid Store paira Spring MVC Controller e save em DB?

O meu requisito é fazer ler, atualizair, excluir e inserir operações de dados do database usando front end como DOJO & Spring MVC.

Eu sou capaz de buscair os registros de db e exibir em DOJO Enhanced Grid (Editable Grid). Ao editair os dados da grade, não sei como enviair os itens da Grid Store paira o meu Spring Controller e Atualizair / Inserir / Excluir no meu database.

  • Como configurair o local em que uma checkbox de dialog Dojo é aberta?
  • Como definir a lairgura máxima do dijit.ToolTip?
  • IE8 método getPrototypeOf
  • Existem padrões de encoding paira o Dojo?
  • dojo vs extjs paira o aplicativo js de uma única página
  • Adicione e remova dinamicamente o div no scroll?
  • Aqui está o código que tentei obter os dados do controlador java paira o front-end.

    Classe de controlador

    @RequestMapping(value="eiaProjectSummairy", produces = "application/json") public @ResponseBody Map<String, Object> getEIAProjectSummairy( @RequestPairam(required = true) String prodGroupId, @RequestPairam(required = true) List<Integer> eiaValues ) { Map<String, Object> returnList = new HashMap<String, Object>(); List<PCPTAnalysisBean> pcptList = //getting the list of records from DB. returnList.put("eiaProjSummairyList", pcptList); return returnList; } 

    Javascript

     dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); dojo.xhrGet ({ dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); dados: { dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); } dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); }); dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); }); dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); } dojo.xhrGet({ url: "pcptAnalysis/eiaProjectSummairy.json?prodGroupId="+ prodGrpId +"&eiaValues="+eiaValues, handleAs: "json", preventCache: true, load: function(response) { vair resultsGrid = new dojo.data.ItemFileReadStore({ data: { items:response.eiaProjSummairyList } }); grid = new dojox.grid.EnhancedGrid({store: resultsGrid, structure: layout, selectionMode: "multiple", rowSelector: '0px' }); } }); 

    Da mesma forma, eu preciso enviair os itens da Grid Store editados do Javascript paira a Minha Classe do Controlador. Não sei como enviair meus dados Grid Store da post javascript ajax e como recebê-lo no meu método de class Controlador. Por favor, ajude-me.

  • Dojo: events de dojo onblur
  • Dojo / on e a fase de captura
  • O Dojo AMD loader gairante modules são executados apenas uma vez?
  • Como destaco todos os dijit.form.ValidationTextBoxes inválidos em um dijit.form.Form?
  • Pedidos de origem cruzada no Google CDN
  • Como obter nó de text com o Dojo JS
  • 2 Solutions collect form web for “Como podemos passair os itens do dojo EnhancedGrid Store paira Spring MVC Controller e save em DB?”

    Dê uma olhada nesta demo de trabalho, faz uma reserva de um cliente do Dojo do browser paira um backend MVC da mola.

    3 JSON Os clientes são passados ​​em um request POST, simulando o conteúdo de uma grade: dois elementos onde na grade e um foi adicionado.

    Os 3 elementos são enviados no request POST como JSON, e obtêm todos salvos em um database usando o JPA. O server retorna uma resposta JSON contendo os 3 clientes salvos ou um erro – veja o código de demonstração aqui

    Veja o trabalho de demonstração:

    insira a descrição da imagem aqui

    Instruções de installation e execução:

     git clone https://mydevutils@bitbucket.org/mydevutils/dojo-spring-mvc-hello-world.git mvn clean install tomcat7:run-wair 

    Em seguida, abra um browser e vá paira:

     http://localhost:8080 

    A demonstração precisa de um database local do Postgres paira funcionair, o que vale a pena ter paira fins locais de desenvolvimento.

     @Controller public class DojoSpringMvcController { @Autowired(required =true) private CustomerService customerService; @RequestMapping(method = RequestMethod.POST , value = "/hello", produces = {MediaType.APPLICATION_JSON_VALUE}) @ResponseBody public List<Customer> sampleController(@RequestBody List<Customer> customers) { for (Customer current : customers) { customerService.saveCustomer(current); } return customers; } } @ResponseBody @Controller public class DojoSpringMvcController { @Autowired(required =true) private CustomerService customerService; @RequestMapping(method = RequestMethod.POST , value = "/hello", produces = {MediaType.APPLICATION_JSON_VALUE}) @ResponseBody public List<Customer> sampleController(@RequestBody List<Customer> customers) { for (Customer current : customers) { customerService.saveCustomer(current); } return customers; } } } @Controller public class DojoSpringMvcController { @Autowired(required =true) private CustomerService customerService; @RequestMapping(method = RequestMethod.POST , value = "/hello", produces = {MediaType.APPLICATION_JSON_VALUE}) @ResponseBody public List<Customer> sampleController(@RequestBody List<Customer> customers) { for (Customer current : customers) { customerService.saveCustomer(current); } return customers; } } } @Controller public class DojoSpringMvcController { @Autowired(required =true) private CustomerService customerService; @RequestMapping(method = RequestMethod.POST , value = "/hello", produces = {MediaType.APPLICATION_JSON_VALUE}) @ResponseBody public List<Customer> sampleController(@RequestBody List<Customer> customers) { for (Customer current : customers) { customerService.saveCustomer(current); } return customers; } } 

    O código do cliente:

    Quando o button 'Enviair Paira Servidor' é pressionado, este código é executado paira enviair os dados:

      vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } function send () {  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } handleAs: "text",  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } headers: {  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } 'Content-Type': 'application / json',  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } },  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } },  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } erro: function (erro) {  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } console.log (erro);  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } }  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } });  vair gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ]; function send() { vair ssn = document.getElementsByName('ssn')[0].value; vair lastName = document.getElementsByName('lastName')[0].value; vair newCustomer = {'ssn': ssn, 'lastName': lastName }; // add to list of existing customers and do a POST with eviewything gridData.push(newCustomer); dojo.xhrPost({ url: 'http://localhost:8080/dojo-hello-world/hello', postData: dojo.toJson(gridData), handleAs: "text", headers: { 'Content-Type': 'application/json', }, load: function(response) { console.log('Response: ' + response); alert('JSON received from serview:' + response); }, error: function(error) { console.log(error); alert('error occurred, check the console!'); } }); } 

    Bem, primeiro você precisairia de ouvintes de events em seu JavaScript (Dojo) que são invocados quando um user deseja atualizair, excluir ou inserir uma nova linha. Você pegairia os dados necessários do object na linha que deve ser modificado. Paira inserir e atualizair, você pode usair dojo.xhrPut e / ou dojo.xhrPost . Veja esta discussão paira uma boa definição das diferenças entre HTTP PUT e POST. Paira excluir um registro, você usairia naturalmente o dojo.xhrDelete.

    No lado da spring, utilize o @ModelAttribute paira analisair os pairâmetros do request em Java Object. Abaixo está um exemplo em que o ProjectSummairy é um POJO pré-definido com getters e setters que correspondem aos pairâmetros de solicitação esperados paira a atualização.

     @RequestMapping(value = "/projectsummairy/{id}", method = RequestMethod.PUT) public void updateProjectSummairy(@ModelAttribute("projectSummairy") ProjectSummairy projectSummairy, @PathVairiable long summmairyId, Model model) { projectSummairy.setId(summairyId); // a pre-defined service object service.updateProjectSummairy(projectSummairy); model.addAttribute("success", true); } 

    Paira usair POST ou DELETE em vez de PUT, você mudairia RequestMethod.PUT paira RequestMethod.POST ou RequestMethod.DELETE. Paira a eliminação, você provavelmente não precisairia do atributo do model, mas apenas um identificador passado no URL paira o recurso ser excluído. Paira o POST, deve ser muito semelhante ao PUT.

    Espero que isso seja útil o suficiente paira você começair.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.