2016-12-10 76 views
0

版本jqGrid在此处使用: @license Guriddo jqGrid JS - v5.2.0 - 2016-11-27版权所有(c)2008,Tony Tomov,tony @ trirand。 comjqGrid自定义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上的一些例子。

任何提示,让两个一起工作,将不胜感激。

回答

1

问题很简单:你把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/是您的代码,它显示

enter image description here

我用另外

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"]以在本地保存属性并访问例如自定义格式化程序内部的属性。

+0

太棒了。看起来像这解决了我的问题。非常感谢你!至于jqgrid代码,我最近一直在下载不少版本来测试php代码,js代码和whatnot,看看我可能在当前项目中使用什么。最后几周前我找到了你的free-jqgrid。我可以发誓我创建了所有需要的符号链接来使用你的实现,但显然在所有的版本控制和测试中,我忘了更改我的代码中的一些网址......所以感谢这方面的提示! – Roadowl

+0

@Roadowl:不客气!我修改了一下演示。见https://jsfiddle.net/OlegKi/odvxefra/3/ – Oleg

+0

不错...也许有点太blingy虽然... ;-)再次感谢! – Roadowl