如何实现jqgrid内联编辑和自定义验证？

我是jqGrid的新手，我试图实现以下场景，但我无法以正确的方式获取它。如何实现jqgrid内联编辑和自定义验证？

这是我的情景：

我有三排如个人电子邮件，手机号码和Twitter网址。它需要有另一列数据类型，可能的值如电子邮件，电话和网址。
现在，我将输入每行需要执行一些验证的值，如电子邮件格式或电话格式。
当我按下添加按钮时，它需要创建一个新的行，并询问我的每个列的信息，如列名和数据类型。
当我输入每一行的值时，需要根据数据类型列进行验证。
如果我按编辑按钮，整个网格需要可编辑，并且在编辑事件触发器之后需要对每个单元格执行验证。

我的代码：

$(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;

来源

2012-12-20 user10489

如果我明白你的问题这真的一切都归结为验证，添加可以添加编辑功能，然后叫自定义验证。

例：

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

最后，它真的会清理你编写的一些代码尝试与网格交互进行验证。

来源

2012-12-20 12:50:50 Mark

但我有一个按钮控件添加，编辑，如果我点击编辑按钮，整个网格需要可编辑。然后，如果我更新每行的值，我需要执行基于DataType列的验证。如果你不明白，请让我知道。 – user10489

您可以调用与按钮处理函数相同的函数来验证要提交给服务器的数据。一次编辑整个网格？我不确定这是否可能，对不起，我没有从你的问题中得到答案。 – Mark

加上你会只是编辑当前显示在网格中的数据，或者编辑网格显示的整个数据集...我很好奇你的要求是什么一次推动整个网格编辑？ – Mark

如何实现jqgrid内联编辑和自定义验证？

回答

相关问题