javascript - Shield UI XML 内联编辑

Question

我不太了解 Shield UI。文档对我来说非常模糊。我想要做的是让用下面的代码生成的表格变得可编辑。我已经尝试了一切，感觉我很接近但无济于事。有人可以指导我吗？此外，我还多次查看了他们的文档。

<script type="text/javascript">
  $(function() {
    $(document).ready(function()) {
      $("#grid").shieldGrid({
        dataSource: {
          remote: {
            read: g,
            modify: {
              url: "xml/smt-schedule.xml"
            },


          },
          /*End remote */

          schema: {
            type: "xml",
            data: "ss_schedule",
            fields: {
              Id: {
                path: "ss_id._text"
              },
              Part_Num: {
                path: "ss_part_num._text"
              },
              ROHS: {
                path: "ss_rohs._text"
              },
              Wave_SS: {
                path: "ss_wave_ss._text"
              },
              WO: {
                path: "ss_wo._text"
              },
              Quantity: {
                path: "ss_qty._text"
              },
              Duration: {
                path: "ss_duration._text"
              },
              Start_Date: {
                path: "ss_wo_start._text"
              },
              Total_Time: {
                path: "ss_total_time._text"
              },
              Days: {
                path: "ss_est_days._text"
              },
              Run_Date: {
                path: "ss_est_run_date._text"
              },
              Pulled: {
                path: "ss_pulled._text"
              },
              Prep: {
                path: "ss_prep._text"
              },
              SMT: {
                path: "ss_smt._text"
              },
              Notes: {
                path: "ss_notes._text"
              }
            },

          },
          /* Line 48 Schema */

        },

        /*Begin Code for paging */
        paging: {
          pageSize: 30,
          pageLinksCount: 10,
          messages: {
            infoBarTemplate: "From {0} to {1} items of a total of {2}",
            firstTooltip: "First page",
            previousTooltip: "Previous page",
            nextTooltip: "Next page",
            lastTooltip: "Last page"
          }
        },
        /*End of paging start line 75*/

        /*End Code for paging */

        rowHover: false,
        columns: [{
            field: "Id",
            width: "20px",
            editable: false
          }, {
            field: "Part_Num",
            width: "100px",
            editable: true
          }, {
            field: "ROHS",
            width: "80px",
            editable: true
          }, {
            field: "Wave_SS",
            title: "Wave/SS",
            width: "80px"
          }, {
            field: "WO",
            width: "60px",
            editable: true
          }, {
            field: "Quantity",
            width: "80px",
            editable: true
          }, {
            field: "Duration",
            width: "80px",
            editable: true
          }, {
            field: "Start_Date",
            title: "Start Date",
            width: "80px",
            type: Date,
            editable: true
          }, {
            field: "Total_Time",
            title: "Total Time",
            width: "80px",
            editable: true
          }, {
            field: "Run_Date",
            title: "Run Date",
            width: "80px",
            type: Date,
            editable: true
          }, {
            field: "Pulled",
            width: "50px",
            editable: true
          }, {
            field: "Prep",
            width: "50px",
            editable: true
          }, {
            field: "SMT",
            width: "50px",
            editable: true
          }, {
            field: "Notes",
            width: "80px",
            editable: true
          }, {
            width: 80,
            title: " ",
            buttons: [{
              commandName: "edit",
              caption: "Edit"
            }, {
              commandName: "delete",
              caption: "Delete"
            }]
          }

        ],
        editing: {
          enabled: true,
          Event: "doubleclick",
          type: "row",
          mode: "inline",


          confirmation: {
            "delete": {
              enabled: true,
              template: function(item) {
                return "Delete work order '" + item.WO + "'?";
              }
            }
          }
        },

        /*--End toolbar--*/


        toolbar: [{
          buttons: [{
            commandName: "pdf",
            caption: '<span class="sui-sprite sui-grid-icon-export-pdf"></span> <span class="sui-grid-button-text">Export to PDF</span>'
          }]
        }],
        exportOptions: {
          proxy: "/filesaver/save",
          pdf: {
            fileName: "smt-schedule-report.pdf",
            author: "Dynalab, Inc.",
            size: "a4",
            orientation: "landscape",
            fontSize: 10,
            margins: {
              left: 40
            }

          } /*End pdf */


        },
        /*End expportOptions */
        toolbar: [{
          buttons: [{
            commandName: "insert",
            caption: "Add Record"
          }],
          position: "top"
        }]

      });
      /* Begin search by typing */
      var dataSource = $("#grid").swidget().dataSource,
        input = $("#filterbox input"),
        timeout,
        value;
      input.on("keydown", function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          value = input.val();
          if (value) {
            dataSource.filter = {
              or: [{
                  path: "Part_Num",
                  filter: "contains",
                  value: value
                }, {
                  path: "WO",
                  filter: "contains",
                  value: value
                }

              ]
            };
          } else {
            dataSource.filter = null;
          }
          dataSource.read();
        }, 300);

        /*End search by typing */
      });
    }
  }); /*End document.ready */
</script>

Answer 1

您可以使用 this setting 启用编辑功能(及其子属性)。

然后你应该覆盖remote.modify下的create, update and remove设置，如下所示this example .您可以在此处放置一些回调函数，只要执行类似操作，Grid 就会调用这些回调函数。这些函数通常包含调用您的服务器端以更新持久位置上的数据的代码。