2013-05-08 88 views
0

我是劍道web用戶的新手。我想實現內聯編輯grid.when我點擊添加/編輯按鈕,我們得到內聯表單字段與更新按鈕,我想獲得每行的獨特ID和自定義更新按鈕功能,以便我可以更新我的數據庫。如何自定義劍道網格更新按鈕?

<table id="grid11" style="table-layout: fixed; display:none;"> 
     <colgroup> 
       <col style="width:10%"> 
       <col style="width:20%"> 
       <col style="width:20%"> 
       <col style="width:20%"> 
       <col style="width:30%"> 
     </colgroup> 
    <thead> 
     <tr>    
      <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Qty</font></th> 
      <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Unit</font></th> 
      <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Style Number</font></th> 
      <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Description</font></th>   <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Command</font></th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr>    
      <td>10</td> 
      <td>12</td> 
      <td>231234</td> 
      <td>ItemDescription</td> 
      <td></td>   
     </tr> 
    </tbody> 
</table> 



<script> 
    $(document).ready(function(){ 
     $("#grid11").kendoGrid({ 
      dataSource: { 
       schema: { 
         model: { id: "id" }, 
          fields: { 
             id: { editable: false, nullable: true }, 
             Qty: { validation: { required: true } }, 
             Unit: { validation: { required: true } }, 
             StyleNumber: { validation: { required: true } }, 
             Description: { validation: { required: true } }, 
            } 
         }, 
       pageSize: 5 
      }, 
      pageable: true, 
      height: 300, 
      sortable: true, 
      toolbar: [{name:"create",text:"Add"}], 
      editable: "inline", 
      columns: [ 
        {field: "Qty"}, 
        {field: "Unit"}, 
        {field: "StyleNumber"}, 
        {field: "Description"}, 
        { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }] 

     }); 
     $("#grid11").show(); 
    }); 
</script> 

請幫幫我。

感謝

+0

爲什麼你需要一個自定義更新button.You可以使用電網的defalut更新按鈕,更新數據庫。 – 2013-05-08 14:04:39

回答

0
<script> 
    $(document).ready(function(){ 
     var len      = 0; 
     $("#grid11").kendoGrid({ 
      dataSource: { 
       transport: { 
          read: "your_read_url", 
          update: { 
          url: "url_for_update", 
          type: "POST", 
          complete: function(result) { 

           } 
          }, 
          create: { 
           url: "url_for_add", 
           type: "POST", 
           complete: function(result) { 

           }, 
          }, 
          destroy: { 
          url: "url_for_delete" , 
          type: "POST", 
          complete: function(result) { 

           }, 
          } 
         }, 
       schema: { 
         model: { id: "id" }, 
          fields: { 
             id: { editable: false, nullable: true }, 
             Qty: { validation: { required: true } }, 
             Unit: { validation: { required: true } }, 
             StyleNumber: { validation: { required: true } }, 
             Description: { validation: { required: true } }, 
            } 
         }, 
       pageSize: 5 
      }, 
      pageable: true, 
      height: 300, 
      sortable: true, 
      toolbar: [{name:"create",text:"Add"}], 
      editable: "inline", 
      columns: [ 
        {field: "Qty"}, 
        {field: "Unit"}, 
        {field: "StyleNumber"}, 
        {field: "Description"}, 
        { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }] 

     }); 
     $("#grid11").show(); 
    }); 
</script> 
+0

讀取URL的返回格式應該是什麼以及如何獲取每行的唯一標識符?需要更多說明 – 2013-05-13 05:54:10

+0

Sam返回數據必須是json編碼的,並將id指定爲返回數組的值,並且必須是唯一的數據,如爲返回數據設置id的計數器 – 2013-05-13 06:04:19

0
columns: [ 
          { field: "FirstName", title: "First Name", width: "140px" }, 
          { field: "LastName", title: "Last Name", width: "140px" }, 
          { field: "Title" }, 
          { command: { text: "View Details", click: showDetails }, title: " ", width: "140px" }] 

腳本

function showDetails(e) { 
        e.preventDefault(); 
    // your logic on command click 

       } 

See Kendo Documentation