如何實現jqgrid內聯編輯和自定義驗證？

Question

我是jqGrid的新手，我試圖實現以下場景，但我無法以正確的方式獲取它。

這是我的情景：

1. 我有三排如個人電子郵件，手機號碼和Twitter網址。它需要有另一列數據類型，可能的值如電子郵件，電話和網址。
2. 現在，我將輸入每行需要執行一些 驗證的值，如電子郵件格式或電話格式。
3. 當我按下添加按鈕時，它需要創建一個新的行，並詢問我的每個列的信息，如列名和數據類型 。
4. 當我輸入每一行的值時，需要根據 數據類型列進行驗證。
5. 如果我按編輯按鈕，整個網格需要可編輯，並且在編輯事件觸發器之後需要對每個單元格執行驗證。

我的代碼：

$(document).ready(function() { 
     //debugger; 
     var val; 
     var lastsel2; 
     jQuery("#list").jqGrid({ 
      datatype: "local", 
      height: 250, 
      width: 770, 
      colNames: ['Mechanism', 'Data Type', 'Value', 'Active Flag', 'Created'], 
      colModel: [ 
      { name: 'Mechanism', index: 'Mechanism', width: 175, editable: true }, 
      { name: 'DataType', index: 'Datatype', width: 175, editable: true }, 
     { name: 'Value', index: 'Value', width: 105, editable: true, editrules: { custom: true, custom_func: validate} }, 
     {name: 'ActiveFlag', width: 112, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" }, 
     { name: 'Created', index: 'Created', width: 124}] 
     }); 
$('#save').live('click', function() { 
      var ids = $("#list").jqGrid('getDataIDs'); 
      for (var i = 0; i < ids.length; i++) { 
       var val = $("#list").jqGrid('getCell', ids[i], 'Value'); 
       var dataType = $("#list").jqGrid('getCell', ids[i], 'DataType'); 
       $('#colValue').html(val + dataType); 
       var va = $('#colValue').find('input[name=value]').val(); 
       var daT = $('#colValue').find('input[name=Datatype]').attr('value'); 

       switch (daT) { 
        case "Phone": 
         if (!$.jgrid.isEmpty(va)) { 

         } 
         else 
          alert("Phone Number Field is required"); 
         break; 
        case "Email": 
         if (!$.jgrid.isEmpty(va)) { 

         } 
         else 
          alert("Email Field is required"); 
         break; 
        case "URL": 
         if (!$.jgrid.isEmpty(va)) { 
         } 
         else 
          alert("URL Field is required") 
         break; 
        case "": 
         alert("Fields are not null") 
       } 
      } 
     }); 

     $('input[value=Edit]').click(function() { 
      var ids = $('#list').jqGrid('getDataIDs'); 
      for (var i = 0; i < ids.length; i++) { 
       //$('#list').jqGrid('editRow', ids[i]); 
       jQuery('#list').jqGrid('editRow', ids[i], true); 
      } 
     }); 
     var data = [{ Mechanism: "Mobile Phone", DataType: "Phone" }, { Mechanism: "Personal Email", DataType: "Email" }, { Mechanism: "Facebook URL", DataType: "URL"}]; 
     for (var i = 0; i <= data.length; i++) 
      jQuery("#list").jqGrid('addRowData', i + 1, data[i]); 
     val = i; 

Answer 1

如果我明白你的問題這真的一切都歸結爲驗證，添加可以添加編輯功能，然後叫自定義驗證。

例：

jQuery("#list").navGrid('#pager', { 
    add: true, 
    addtext: 'Add', 
    edit: true, 
    edittext: 'Edit', 
    del: true, 
    deltext: 'Del', 
    search: true, 
    searchtext: 'Find', 
    refresh: true 
}, //options 
{ 
    reloadAfterSubmit: true, 
    beforeSubmit: validate_edit 
}, // edit options 
{ 
    reloadAfterSubmit: true, 
    beforeSubmit: validate_add 
}, // add options 
{}, //del options 
{} //search options 
); 

驗證（可以根據您的需求是不同或相同）

function validate_add(posdata, obj) {//validation code} 

function validate_edit(posdata, obj) {//validation code} 

編號： jqgrid different editrules for when adding and editing

最後，它真的會清理你編寫的一些代碼嘗試與網格交互進行驗證。