2013-05-08 70 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