我们如何将dojo EnhancedGrid Store项目传递给spring MVC Controller并保存在DB中?

时间:2014-01-11 16:48:52

标签: java javascript spring-mvc dojo dojox.grid.datagrid

我的要求是阅读,更新,删除&使用前端作为DOJO& amp;插入来自DB的数据操作。 Spring MVC。

我能够从数据库中获取记录并在DOJO增强型网格(可编辑网格)中显示。在编辑网格数据时,我不知道如何将网格存储项发送到我的Spring控制器并在我的数据库中更新/插入/删除。

以下是我尝试从java控制器获取数据到前端的代码。

控制器类

@RequestMapping(value="eiaProjectSummary", produces = "application/json")
public @ResponseBody Map<String, Object> getEIAProjectSummary(
    @RequestParam(required = true) String prodGroupId,
    @RequestParam(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("eiaProjSummaryList", pcptList);         
    return returnList;
}  

的Javascript

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

同样,我需要将编辑过的网格存储项从Javascript发送到我的控制器类。我不知道如何从javascript ajax发送我的网格存储数据以及如何在我的Controller类方法中接收它。请帮助我。

2 个答案:

答案 0 :(得分:3)

看看这个工作demo,它从浏览器Dojo客户端到spring MVC后端进行保存。

3个JSON客户在POST请求中传递,模拟网格的内容:网格中的两个元素,以及一个添加的元素。

3个元素作为JSON在POST请求中发送,并使用JPA将所有元素保存到数据库中。服务器返回包含3个已保存客户的JSON响应或错误 - see demo code here

查看演示工作:

enter image description here

安装和运行说明:

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

然后打开浏览器并转到:

http://localhost:8080

该演示需要一个Postgres本地数据库才能工作,非常值得在本地进行开发。

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

客户端代码:

当按下“发送到服务器”按钮时,执行此代码以发送数据:

    var gridData = [{ssn:'0050', lastName: 'Customer1'}, {ssn: '0051', lastName:'Customer2'} ];

    function send() {

      var ssn = document.getElementsByName('ssn')[0].value;
      var lastName = document.getElementsByName('lastName')[0].value;

      var newCustomer = {'ssn': ssn, 'lastName': lastName };

      // add to list of existing customers and do a POST with everything
     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 server:' + response);
          },
          error: function(error) {
                console.log(error);
                alert('error occurred, check the console!');
          }
      });

    }

答案 1 :(得分:2)

首先,您需要在JavaScript(Dojo)中使用当用户希望更新,删除或插入新行时调用的事件侦听器。然后,您将从要修改的行中的对象中获取必要的数据。要进行插入和更新,您可以使用dojo.xhrPut和/或dojo.xhrPost。有关HTTP PUT和POST之间差异的良好定义,请参阅this discussion。要删除记录,您自然会使用dojo.xhrDelete。

在Spring方面,利用@ModelAttribute将请求参数解析为Java Object。下面是一个示例,其中ProjectSummary是一个预定义的POJO,其getter和setter匹配更新所需的请求参数。

@RequestMapping(value = "/projectsummary/{id}", method = RequestMethod.PUT)
public void updateProjectSummary(@ModelAttribute("projectSummary") ProjectSummary projectSummary, @PathVariable long summmaryId, Model model) {
  projectSummary.setId(summaryId);

  // a pre-defined service object
  service.updateProjectSummary(projectSummary);

  model.addAttribute("success", true);
}

要使用POST或DELETE而不是PUT,您可以将RequestMethod.PUT更改为RequestMethod.POST或RequestMethod.DELETE。对于删除,您可能不需要model属性,只需要在URL中传递要删除的资源的标识符。对于POST,它应该与PUT非常相似。

我希望这对你有所帮助。