jqGrid在EditRules弹出后保留无效的单元格值

Question

@Oleg - 我是jqGrid.I新手，有三个问题。需要紧急帮助。 我正在使用jqGrid 3.8，内联编辑模式。

1. 我想弹出无效单元格后保留无效单元格值。
2. 另外我想将焦点设回无效单元格。
3. 我有我的jqGrid中的“添加行”和过滤工具栏功能。我已经使用Oleg的解决方案创建滤镜工具栏的下拉列表（在另一个jQuery线程中发布）。 。

** - 问题：

**我打电话从afterSaveCellsetSearchSelect，因为我要在过滤器中添加新值每次我加入时间下拉或删除列（注：列是一个文本框）。但即使使用过滤器工具栏也不会刷新

var sgrid = $("#list")[0]; 
sgrid.triggerToolbar(); 

请参阅下面的代码来设置工具栏。

<script type="text/javascript"> 
var mydata = [ 
     {id:"1", Name:"Miroslav Klose",  Category:"sport", Subcategory:"football"}, 
     {id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"}, 
     {id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"}, 
     {id:"4", Name:"Blaise Pascal",  Category:"science", Subcategory:"mathematics"} 
    ], 
    grid = $("#list"), 
    getUniqueNames = function(columnName) { 
     var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [], 
      textsLength = texts.length, text, textsMap = {}, i; 
     for (i=0;i<textsLength;i++) { 
      text = texts[i]; 
      if (text !== undefined && textsMap[text] === undefined) { 
       // to test whether the texts is unique we place it in the map. 
       textsMap[text] = true; 
       uniqueTexts.push(text); 
      } 
     } 
     return uniqueTexts; 
    }, 
    buildSearchSelect = function(uniqueNames) { 
     var values=":All"; 
     $.each (uniqueNames, function() { 
      values += ";" + this + ":" + this; 
     });  
     return values; 
    }, 
    setSearchSelect = function(columnName) {  
     grid.jqGrid('setColProp', columnName, 
        { 
         stype: 'select', 
         searchoptions: { 
          value:buildSearchSelect(getUniqueNames(columnName)), 
          sopt:['eq'] 
         } 
        } 
     );  
    }; 

grid.jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name:'Name', index:'Name', width:200 ,editable:true}, 
     { name:'Category', index:'Category', width:200,editable:true }, 
     { name:'Subcategory', index:'Subcategory', width:200,editable:true } 
    ], 
    sortname: 'Name', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    editurl: "clientArray", 
    multiselect: true, 
    pagination:true, 
    cellEdit: true, 
    cellsubmit: 'clientArray', 
    //ignoreCase: true, 
    pager: '#pager', 
    height: "auto", 
    enableSearch: true, 
    caption: "How to use filterToolbar better locally", 
    afterSaveCell: function(rowid,name,val,iRow,iCol) { 
     setSearchSelect(name); 

     jQuery("#list").('setColProp', name, 
        { 
         width:100 
        } 
     ); 
     var sgrid = $("#list")[0]; 
     sgrid.triggerToolbar(); 
alert(name);   
    }, 
    loadComplete: function() { 
        setSearchSelect('Category');  
       } 
}).jqGrid('navGrid','#pager', 
      {edit:false, add:false, del:false, search:false, refresh:true}); 

setSearchSelect('Category'); 
setSearchSelect('Subcategory'); 

grid.jqGrid('setColProp', 'Name', 
      { 
       searchoptions: { 
        sopt:['cn'], 
        dataInit: function(elem) { 
         $(elem).autocomplete({ 
          source:getUniqueNames('Name'), 
          delay:0, 
          minLength:0 
         }); 
        } 
       } 
      }); 

grid.jqGrid('filterToolbar', 
      {stringResult:true, searchOnEnter:true, defaultSearch:"cn"}); 


function addRow(tableId){ 
    var loopRow = document.getElementById("addRowsInput").value;     
    var recordCount = ''; 
    var rwData = ''; 
    //var selRowIds = getRowIDs('list'); 
    var gridProducts = $("#list"); 
    var resetFirstRow = jQuery("#list").getRowData(1); 
    jQuery("#list").setRowData(1, resetFirstRow); 
    if(loopRow == null || loopRow == "" || loopRow == "Enter number of units to be added") 
    { 
     loopRow = 1; 
    } 

     for(i=0; i< loopRow; i++) 
     {  
       recordCount = jQuery("#list").getGridParam("records") ; 
       var emptydata = [ 
        {id:(recordCount+1), Name:"",  Category:"", Subcategory:""}] 
        gridProducts.jqGrid('addRowData', recordCount+1, emptydata[0]);         
     } 
    } 
</script> 

@Oleg - 对您提出的解决方案有一个问题。对不起，我试图找到它，但不能。 在buildSearchSelect：方法中，如何包含空字符串的筛选器。 如上所述，我有一个“添加行”按钮。所以当用户想要过滤空列的行时，我需要一个过滤器值。

Answer 1

仅当搜索工具栏尚不存在时，从我的old answer起执行setSearchSelect函数才有效。如果存在工具栏，则必须修改jQuery UI自动填充小部件的select元素或自动完成源的选项。

我扩展了代码。您可以看到演示here的新版本。以同样的方式可以使用内联编辑，而不是单元格编辑。

下面是修改后的JavaScript代码：

var mydata = [ 
     {id:"1", Name:"Miroslav Klose",  Category:"sport", Subcategory:"football"}, 
     {id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"}, 
     {id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"}, 
     {id:"4", Name:"Blaise Pascal",  Category:"science", Subcategory:"mathematics"} 
    ], 
    grid = $("#list"), 
    getUniqueNames = function(columnName) { 
     var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [], 
      textsLength = texts.length, text, textsMap = {}, i; 
     for (i=0;i<textsLength;i++) { 
      text = texts[i]; 
      if (text !== undefined && textsMap[text] === undefined) { 
       // to test whether the texts is unique we place it in the map. 
       textsMap[text] = true; 
       uniqueTexts.push(text); 
      } 
     } 
     uniqueTexts.sort(); 
     return uniqueTexts; 
    }, 
    buildSearchSelect = function(uniqueNames) { 
     var values=":All"; 
     $.each (uniqueNames, function() { 
      values += ";" + this + ":" + this; 
     }); 
     return values; 
    }, 
    setSearchSelect = function(columnName) { 
     var $select = $('select#gs_'+columnName), un = getUniqueNames(columnName), 
      htmlForSelect = '<option value="">All</option>', i, l=un.length, val; 
     grid.jqGrid('setColProp', columnName, 
        { 
         stype: 'select', 
         searchoptions: { 
          value:buildSearchSelect(un), 
          sopt:['eq'] 
         } 
        } 
     ); 
     if ($select.length > 0) { 
      // The searching toolbar already exist. One have to update it manually 
      for (i=0;i<l;i++) { 
       val = un[i]; 
       htmlForSelect += '<option value="'+val+'">'+val+'</option>'; 
      } 
      $select.html(htmlForSelect); 
     } 
    }, 
    setAutocomplete = function(columnName) { 
     var $input = $('input#gs_'+columnName), un = getUniqueNames(columnName); 
     grid.jqGrid('setColProp', columnName, 
        { 
         searchoptions: { 
          sopt:['cn'], 
          dataInit: function(elem) { 
           $(elem).autocomplete({ 
            source:un, 
            delay:0, 
            minLength:0 
           }); 
          } 
         } 
        }); 
     if ($input.length > 0) { 
      // The searching toolbar already exist. One have to update the source 
      $input.autocomplete('option', 'source', un); 
     } 
    }, 
    selectColumns = ['Category','Subcategory'], autocompleteColumns = ['Name']; 

grid.jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name:'Name', index:'Name', width:200 ,editable:true}, 
     { name:'Category', index:'Category', width:200,editable:true }, 
     { name:'Subcategory', index:'Subcategory', width:200,editable:true } 
    ], 
    sortname: 'Name', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    cellEdit: true, 
    cellsubmit: 'clientArray', 
    ignoreCase: true, 
    pager: '#pager', 
    height: "auto", 
    caption: "How to use filterToolbar better locally including local cell editing", 
    afterSaveCell: function(rowid,name,val,iRow,iCol) { 
     if ($.inArray(name,selectColumns) !== -1) { 
      setSearchSelect(name); 
     } else if ($.inArray(name,autocompleteColumns) !== -1) { 
      setAutocomplete(name); 
     } 
    } 
}).jqGrid('navGrid','#pager', 
      {edit:false, add:false, del:false, search:false, refresh:true}); 

$.each(selectColumns,function() { 
    setSearchSelect(String(this)); 
}); 

$.each(autocompleteColumns,function() { 
    setAutocomplete(String(this)); 
}); 

grid.jqGrid('filterToolbar', 
      {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});