シールドUI XMLインライン編集

Question

私は多くのシールドの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（およびその子プロパティ）を使用して編集を有効にすることができます。

this exampleに示すように、あなたが、remote.modify下create、updateとremove設定をオーバーライドする必要があります。そこにいくつかのコールバック関数を置くことができます。コールバック関数は、同様のアクションが実行されるたびにGridによって呼び出されます。これらの関数には通常、永続的な場所でデータを更新するためにサーバー側を呼び出すコードが含まれています。