jqGrid navButtonAdd不工作

我在我的项目中有一个jqGrid，我想添加自定义按钮，但没有按钮出现在网格中，据我所见，没有语法问题。我试图简化我的网格，但按钮仍然没有出现。我使用Velocity模板引擎，这就是为什么我的代码中有$符号，它并不涉及jQuery。我正在使用jqGrid 3.8.2。jqGrid navButtonAdd不工作

这是我如何构建网格：

 <script type="text/javascript"> 

       function loadCompleteHandler(){ 
        jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height')))); 
       } 

       function select1() { 
        return ": ;false:no;true:yes"; 
       } 

       function select2(){ 
          return ": ; 1:Select1;2:Select2;3:Select3"; 
       } 

     var colModelData = [ 
        {name:'1', index:'1',width:'5%', hidden: true, align:'center', sortable: false, resizable:false}, 
        {name:'2', index:'2',width:'10%', align:'center', formatter: 'checkbox', sortable: false, editable: true, stype: 'select', edittype: 'checkbox', editoptions: {value: "Yes:No"}, searchoptions: { value: select1()}, resizable:false}, 
        {name:'3', index:'3', width:'35%', sortable: false, resizable:false, defaultValue: ''}, 
        {name:'4', index:'4', width:'30%', sortable: false, resizable:false, defaultValue: ''}, 
        {name:'5', index:'5', width:'20%', sortable: false, defaultValue: '$selectedValue', stype: 'select', searchoptions: {value: select2()}, resizable:false}, 
        ] 

     jQuery(function(){ 
      jQuery("#listTable").jqGrid({ 
      url: '$urlManager.getURL("/myPath/My.json")' + '?param1=param1Value&param2=param2Value', 
      datatype: 'json', 
      postData: { 
       filters: '{"groupOp":"AND","rules":' + 
         '[{"field":"field3","op":"eq","data":"$selectedValue"}]}' 
      }, 
      mtype: 'POST', 
      colNames:['', '<input type="checkbox" id="selectionCheckbox" onclick="checkboxClick(this)">', 'column3', 'column4', 'column5'], 
      colModel : colModelData, 
      width:'768', 
      height: 500, 
      pager: '#pagerDiv', 
      gridview: true, 
      rowNum: 50, 
      rowTotal: 500, 
      sortorder: 'desc', 
      onSelectRow: function(id){ 
        if (id){ 
         if (id !== lastSel) { 
          jQuery('#listTable').restoreRow(lastSel); 
          jQuery('#listTable').editRow(id, true); 
          lastSel=id; 
         } else { 
          jQuery('#listTable').editRow(id, true); 
         } 
        } 
       },   
      editurl: '$urlManager.getURL("myPath/MyScreen.vm")', 
      caption: 'Caption', 
      hidegrid: false, 
      viewrecords: true, 
      loadComplete: loadCompleteHandler, 
      ignoreCase: true, 
      search: true, 
      page: $page 
     }); 

      jQuery(function(){ 
       jQuery("#listTable").jqGrid('filterToolbar',{ 
            stringResult: true, 
            searchOnEnter: false }); 
      }); 


      jQuery("#listTable").jqGrid('navGrid',"#pagerDiv",{edit:false,add:false,del:false}) 
           .jqGrid('navButtonAdd', '#pagerDiv', {caption: "Edit", 
            onClickButton:function(){ 
             console.log('Button clicked'); 
            }}); 
    <script type="text/javascript"> 

    <table id = "listTable"> </table> 
    <div id = "pagerDiv"></div>

在此先感谢。

来源

2011-11-01 Atticus

你的代码有一些问题。主要错误是您在JavaScript代码末尾错过了});。 jQuery(function(){...内部使用jQuery(function(){...的另一个问题，使代码不可读。我建议你另外减少global函数的数量。在您当前的代码中，功能loadCompleteHandler，select1和select2在顶层定义并且是全局的。你最好把代码放在任何函数里面（如jQuery(function(){...});）。更好的是定义内联函数。接下来的评论：你应该总是在parseInt函数中使用基数参数（在你的情况下为10），并且不包括尾随逗号（参见定义的},]）。

还有一个变量：lastSel应该被定义。 $page对我来说也不清楚。在我对你的代码进行的修改中，你会发现here我只是将其替换为1.以任何方式，你可以在演示中看到navButtonAdd方法在修改后的代码中正常工作。

我建议您使用JSLint这可以帮助您提高代码的质量。

来源

2011-11-01 11:33:25 Oleg

谢谢奥列格。你对语法错误是正确的，当我复制和重写代码时，我犯了一些错误。主要错误是缺少'}）;'正如你所提到的那样。再次感谢！ – Atticus

@Atticus：不客气！我建议你使用[JSLint]（http://www.jslint.com/）。如果您在JSLint中从我的演示中剪切并粘贴JavaScript代码，则不会有错误。如果您不喜欢JSLint使用的限制，则可以在JavaScript代码的开头添加许多选项。 JSLint可以提高代码的质量。许多其他开发人员（如jQuery的开发人员）会永久使用JSLint。 – Oleg

我还有一个问题，如果你仍然遵循这个线程。为什么将jqGrid定义包含在'jQuery（function（）{}）;'中很重要？如果我将它包含在单独的'jQuery（function（）{}）;'中，我会发现以前的解决方案会起作用。 – Atticus

jqGrid navButtonAdd不工作

回答

相关问题