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

Question

我的要求是使用前端作为 DOJO 和 Spring MVC 对数据库中的数据进行读取、更新、删除和插入操作。

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

这是我尝试从 Java Controller 获取数据到前端的代码。

Controller 类

@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 发送到我的 Controller 类。我不知道如何从 javascript ajax post 发送我的网格存储数据以及如何在我的 Controller 类方法中接收它。请帮助我。

Answer 1

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

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

这 3 个元素在 POST 请求中作为 JSON 发送，并使用 JPA 全部保存到数据库中。服务器返回包含 3 个已保存客户或错误的 JSON 响应 - see demo code 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!');
          }
      });

    }