jqGrid自定義editfunc在指定自定義搜索參數時不起作用

下面的第一個代碼塊是jqGrid的完整自包含實現。它實際上大部分來自jqGrid站點上的一個示例。在其中我添加了一個片段，即註釋行與剪輯標記之間的部分。

添加剪切添加自定義editfunc。它很好地工作（在這個例子中，它當然或多或少是一個存根，只做一個警報）。此外，搜索工作，其所有的默認參數。對於兩者，選擇一行並單擊編輯或搜索的相應圖標。

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <!-- The jQuery library is a prerequisite for all jqSuite products --> 
    <script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script> 
    <!-- This is the Javascript file of jqGrid --> 
    <script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script> 
    <!-- This is the localization file of the grid controlling messages, labels, etc.--> 
    <!-- We support more than 40 localizations --> 
    <script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script> 
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --> 
    <link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" /> 
    <!-- The link to the CSS that the grid needs --> 
    <link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" /> 
    <meta charset="utf-8" /> 
    <title>jqGrid without PHP - Loading Data - JSON Live</title> 
</head> 
<body> 

    <table id="jqGrid"></table> 
    <div id="jqGridPager"></div> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("#jqGrid").jqGrid({ 
       colModel: [ 
        { 
         label: 'Title', 
         name: 'Title', 
         width: 150, 
         formatter: formatTitle 
        }, 
        { 
         label: 'Link', 
         name: 'Link', 
         width: 80, 
         formatter: formatLink 
        }, 
        { 
         label: 'View Count', 
         name: 'ViewCount', 
         width: 35, 
         sorttype:'integer', 
         formatter: 'number', 
         align: 'right' 
        }, 
        { 
         label: 'Answer Count', 
         name: 'AnswerCount', 
         width: 25 
        } 
       ], 

       viewrecords: true, // show the current page, data rang and total records on the toolbar 
       width: 780, 
       height: 200, 
       rowNum: 15, 
       datatype: 'local', 
       pager: "#jqGridPager", 
       caption: "Load live data from stackoverflow" 
      }); 

      fetchGridData(); 

      function fetchGridData() { 

       var gridArrayData = []; 
       // show loading message 
       $("#jqGrid")[0].grid.beginReq(); 
       $.ajax({ 
        url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow", 
        success: function (result) { 
         for (var i = 0; i < result.items.length; i++) { 
          var item = result.items[i]; 
          gridArrayData.push({ 
           Title: item.title, 
           Link: item.link, 
           CreationDate: item.creation_date, 
           ViewCount: item.view_count, 
           AnswerCount: item.answer_count 
          }); 
         } 
         // set the new data 
         $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData}); 
         // hide the show message 
         $("#jqGrid")[0].grid.endReq(); 
         // refresh the grid 
         $("#jqGrid").trigger('reloadGrid'); 
        } 
       }); 
      } 

      function formatTitle(cellValue, options, rowObject) { 
       return cellValue.substring(0, 50) + "..."; 
      }; 

      function formatLink(cellValue, options, rowObject) { 
       return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>"; 
      }; 

      /*---- 8< ------*/ 
      // editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec: 
      // searchfunc also works (it is the default) 

      $('#jqGrid').jqGrid('navGrid', '#jqGridPager',{ 
       add:false, del:false, view:false, 
       editfunc: function(){alert('EDIT');} 
      }); 
      /*---- >8 ------*/ 

     }); 

    </script> 


</body> 
</html>

現在採取同樣的文件，刪除剪斷線之間的小片段，並與下面的代碼片段替換它，這看起來更像是一些我需要實現：

/*---- 8< ------*/ 
    // editfunc does NOT work as desired here (no alert) 
    // search function works, WITH the parameters as specified here 
    // from the file jquery.jqGrid.js(): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView) 
    // (=jqGrid-free @license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, [email protected]) 

    $('#jqGrid').jqGrid('navGrid', '#jqGridPager', 
     { add:false, del:false, view:false },   // p 
     { editfunc: function(r){alert('EDIT');} },  // pEdit (does NOT work) 
     { },           // pAdd 
     { },           // pDel 
     { multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true }, // pSearch (works with these options) 
     { }            // pView 
    ); 
    /*---- >8 ------*/

這裏，唉editfunc根本不起作用，我得到了默認的編輯功能。儘管如此，搜索現在可以工作，根據自定義指定的參數。

總之：我似乎無法得到一個自定義的editfunc和自定義參數搜索工作！

我看不出第二個片段有什麼問題。這是順便說一句。也根據jqGrid wiki上的一些例子。

任何提示，讓兩個一起工作，將不勝感激。

來源

2016-12-10 Roadowl

問題很簡單：你把editfunc放在你最後一個片段的錯誤位置。 editfunc應指定爲navGrid（與add:false, del:false, view:false一起）的第二個參數的屬性。您在代碼的第一部分中正確使用了editfunc，但是您將它放在錯誤位置的代碼的第二部分。您可以通過使用

$('#jqGrid').jqGrid('navGrid', '#jqGridPager', 
    { add:false, del:false, view:false, editfunc: function(r){alert('EDIT');} }, // p 
    { },  // pEdit 
    { },           // pAdd 
    { },           // pDel 
    { multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, 
     searchOnEnter:true, showQuery:true },  // pSearch (works with these options) 
    { }            // pView 
);

順便解決您的代碼，您放置商業產品Guriddo jqGrid的JS的代碼在目錄jqGrid-js-free，這聽起來很奇怪。 Guriddo jqGrid JS不能免費使用。你可以看到目前的價格here。我開始開發jqGrid的free jqGrid分支，它可以完全免費使用，正因爲如此。免費的jqGrid實現了許多新功能，可以幫助您。演示https://jsfiddle.net/OlegKi/odvxefra/3/是您的代碼，它顯示

我用另外

url: "https://api.stackexchange.com/2.2/questions", 
// add sending of custom parameters to the URL 
postData: { 
    order: "desc", 
    sort: "activity", 
    tagged: "jqgrid", 
    site: "stackoverflow" 
}, 
datatype: "json", 
// below prmNames remove sending all standard jqGrid paranmeters 
prmNames: { 
    page: null, 
    rows: null, 
    sort: null, 
    order: null, 
    search: null, 
    nd: null, 
    id: "question_id" 
}, 
jsonReader: { 
    root: "items", 
    repeatitems: false, 
    id: "question_id" 
}, 
loadonce: true, 
forceClientSorting: true, 
sortname: "creation_date", 
sortorder: "desc"

的數據將來自同一URL「http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow」被裝載的小的修改，通過排序局部creation_date屬性按降序排列並顯示在網格中。可以通過添加additionalProperties中的屬性來使用自定義格式化程序中的其他屬性。例如，您可以添加additionalProperties: ["owner", "is_answered", "score", "last_activity_date"]以在本地保存屬性並訪問例如自定義格式化程序內部的屬性。

來源

2016-12-10 22:03:45 Oleg

太棒了。看起來像這解決了我的問題。非常感謝你！至於jqgrid代碼，我最近一直在下載不少版本來測試php代碼，js代碼和whatnot，看看我可能在當前項目中使用什麼。最後幾周前我找到了你的free-jqgrid。我可以發誓我創建了所有需要的符號鏈接來使用你的實現，但顯然在所有的版本控制和測試中，我忘了更改我的代碼中的一些網址......所以感謝這方面的提示！ – Roadowl

@Roadowl：不客氣！我修改了一下演示。見https://jsfiddle.net/OlegKi/odvxefra/3/ – Oleg

不錯...也許有點太blingy雖然... ;-)再次感謝！ – Roadowl

jqGrid自定義editfunc在指定自定義搜索參數時不起作用

回答

相關問題