Shield UI：根据其他行插入行

Question

我正在为我的 Java 应用程序使用 Shield UI。 我使用“命令”创建了一个自定义插入窗口，如下所示：

toolbar: [
            {
                buttons: [
                    //{ commandName: "insert", caption: "Agregar Solicitud" }
                    { cls: "insertButton", caption: "Agregar Solicitud", click: insertRecord }
                ],
                position: "top"
            },

插入记录的代码：

       function insertRecord(index) {
        //alert(JSON.stringify(index));
        index = 0;
        var grid = $("#grid").swidget(), 
            item = grid.dataItem(index);

        initializeWindowWidgets();
        editedRowIndex = index;

        $("#solId").swidget().value(item.solId);
        $("#atmid").swidget().value(item.atmid);
        $("#fechaAbastecimiento").swidget().value(item.fechaAbastecimiento);
        $("#cargar").swidget().checked(item.cargar);
        $("#emergencia").swidget().checked(item.emergencia);
        $("#solId").swidget().enabled(true);
        $("#atmid").swidget().enabled(true);
        $("#fechaAbastecimiento").swidget().enabled(true);
        $("#cargar").swidget().enabled(true);
        $("#emergencia").swidget().enabled(true);
        $("#save").swidget().enabled(true);
        $("#window").swidget().visible(true);
        //$("#window").swidget().center();
    }

function initializeWindowWidgets() {
        $("#window").shieldWindow({
                position: { left: 500, top: 200 },  
                width: 320,
                height: 360,
                title: "Insertar abastecimiento",
                modal: true,
                visible: false
            });
        $("#solId").shieldNumericTextBox({
        });
        $("#atmid").shieldTextBox({
        });
        $("#fechaAbastecimiento").shieldDatePicker({
        });
        $("#cargar").shieldCheckBox({
        });
        $("#emergencia").shieldCheckBox({
        });
        $("#save").shieldButton({
            events: {
                click: function (e) {
                    var grid = $("#grid").swidget(),
                        editedItem = grid.dataSource.edit(3).data;
                    editedItem.solId = $("#solId").swidget().value();
                    editedItem.atmid = $("#atmid").swidget().value();
                    grid.saveChanges();
                    $("#window").swidget().close();
                }
            }
        });

当我选择一行时，我也可以获取行数据：

selectionChanged: function (e) {

                            var selected = e.target.contentTable.find(".sui-selected");

                            if (selected.length > 0) {
                                    message.innerHTML = selected.get(0).innerHTML;
                            }
                            else {
                                     message.innerHTML = "";
                            }
                    }

我终于知道如何调用服务了，例如：

       $("#grid").shieldGrid({
        dataSource: {
            events: {
                error: function (event) {
                    if (event.errorType == "transport") {
                        // transport error is an ajax error; event holds the xhr object
                        alert(JSON.stringify(event)); 
                        alert("transport error: " + event.error.statusText);
                        // reload the data source if the operation that failed was save
                        if (event.operation == "save") {
                            this.read();
                        }
                    }
                    else {
                        // other data source error - validation, etc
                        alert(event.errorType + " error: " + event.error);
                    }
                },
            },
            remote: {
                read: {
                    type: "POST",
                    url: "abastecimientos/get",
                    contentType: "application/json",
                    dataType: "json"
                },
                modify: {
                    create: function (items, success, error) {
                        var newItem = items[0];
                        $.ajax({
                            type: "POST",

我需要完成这些任务：

1. 在我的网格中选择一行。
2. 按下插入按钮。
3. 显示包含行数据的自定义窗口。
4. 修改显示的数据。
5. 按保存按钮并调用远程服务以插入新行。

我知道如何分别完成这些任务，但我不清楚任务 3 和 5。 我用谷歌搜索了所有互联网，但我不知道该怎么做。

如果有任何建议，我将不胜感激。

胡安

Answer 1

您是否查看了以下 Shield UI 演示？

3. Shown my custom window with the row's data

5. Press a save button and call a remote service in order to insert new row