DOJO：如何 send/delete 从网格中选择行到 springMVC 控制器

Question

我正在使用 dgrid/Grid 将数据显示到网格中。我想 add/delete 从网格中选择行并更新数据库。我怎样才能做到这一点？任何帮助将不胜感激。

 require([ 'dojo/_base/declare', 'dstore/RequestMemory', 'dgrid/Grid',
            'dgrid/extensions/Pagination', 'dgrid/Selection' ],
            function(declare, RequestMemory, Grid, Pagination, Selection,
                    Dialog, Button) {
                var structure = [ {
                    label : "Value Date",
                    field : "valueDate"
                }, {
                    label : "Currency",
                    field : "currency"
                }];
 var grid = new (declare([ Grid, Pagination, Selection ]))({
                    collection : new RequestMemory({
                        target : 'getdata'
                    }),
                    columns : structure,
                    className : 'dgrid-autoheight',
                    loadingMessage : 'Loading data...',
                    noDataMessage : 'No results found.',
                }, 'grid');
               grid.startup();
            });

Answer 1

使用这个：-

require([
                "dojox.grid.EnhancedGrid",
                "dojox.grid.enhanced.plugins.Pagination",
                "dojo.data.ItemFileWriteStore",
                    "dojo/store/JsonRest",
                    'dojo/_base/array',
                    "dojo/store/Memory",
                    "dojo/store/Cache",
                    "dojox/grid/DataGrid",
                    "dojo/data/ObjectStore",
                    "dojo/request",
                    "dojo/query",
                    "dojo/domReady!",
                    "dojox/grid/_CheckBoxSelector"
                ], function(EnhancedGrid,Pagination,ItemFileWriteStore,JsonRest,array, Memory, Cache, DataGrid, ObjectStore,request, query){
                var myStore, grid;
                request.get("example.json", {
                    handleAs: "json"
                }).then(function(data){
                    var dataLength=data.object.length;
                    var arrayData=data.object;
                    console.log(data.object.length);
                        var data = {
                          identifier: 'id',
                          items: []
                        };
                        var data_list = arrayData;
                        var rows = dataLength;
                        for(var i=0, l=data_list.length; i<rows; i++){
                          data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
                        }
                        var store = new dojo.data.ItemFileWriteStore({data: data});

                        /*set up layout*/
                        var layout =[ {
                                label : "Value Date",
                                field : "valueDate"
                            }, {
                                label : "Currency",
                                field : "currency"
                            }];

                        /*create a new grid:*/
                        var grid = new dojox.grid.EnhancedGrid({
                            id: 'grid',
                            store: store,
                            structure: layout,
                            rowSelector: '20px',
                            plugins: {
                              pagination: {
                                  pageSizes: ["25", "50", "100", "All"],
                                  description: true,
                                  sizeSwitch: true,
                                  pageStepper: true,
                                  gotoButton: true,
                                          /*page step to be displayed*/
                                  maxPageStep: 4,
                                          /*position of the pagination bar*/
                                  position: "bottom"
                              }
                            }
                        }, document.createElement('div'));

                        /*append the new grid to the div*/
                        dojo.byId("gridDiv").appendChild(grid.domNode);

                        /*Call startup() to render the grid*/
                        grid.startup();

                        query("#delete_c").on("click", function(){
                        var select_row = grid.selection.getSelected();
                        var array_data=[];
                        array.forEach(select_row, function(selectedItem){
                            if(selectedItem !== null){
                            /* Delete the item from the data store: */
                            store.deleteItem(selectedItem);
                            array_data.push(selectedItem);
                            } /* end if */
                        });
                        console.log(array_data);
                         dojo.xhrDelete({
                            url :"delete_row",
                            postData: dojo.toJson(array_data),
                            handleAs: "json",
                            headers: { "Content-Type": "application/json"},
                            load: function(response, ioArgs){
                            console.log(response);
                            if(response.status=="SUCCESS"){
                                continueDialog.onCancel();
                            }
                            }
                         });
                    });

              });
        });

更改方法后添加和更新使用相同的删除功能。

Answer 2

您可以使用类似的方式获取选定的行数据：

function getSelectedRowsData(grid) {
    var rowsData = [];
    for (var id in grid.selection) {
        if (grid.selection[id]) {
            rowsData.push(grid.row(id).data);
            }
    }
    return rowsData;
}

获取选定的行数据后，您可以使用 Dojo XHR 组件 ('dojo/_request/xhr') 向服务器发送您想要的任何请求。该请求将 return 您一个包含响应的 Promise。之后，您可以刷新网格或向商店发出事件以更新值。

对服务器的删除请求应该是这样的，假设你期望在服务器端有一个 JSON:

function (targetUrl, data, grid) {
    xhr.delete(targetUrl, {
        headers: {
        'Content-Type': 'application/json'
        },
        data : JSON.stringify(alert)
    }).then(function (result) {
        // do something with the result
        grid.refresh();
    }).otherwise(function (err) {
        // if an error occurs, treat here
    })
}

DOJO：如何 send/delete 从网格中选择行到 springMVC 控制器

DOJO: how to send/delete selected rows from grid to the springMVC controller

dojo

spring-mvc

dgrid

dstore