的jqGrid次网格的网格：编辑，添加，搜索图标在次网格

Question

没有出现。这是我的网格的代码。但由于某些原因，编辑，添加和搜索图标不显示亚格：

$(document).ready(function(){    
    var gridwidth = $('.tableContainer').width(); 
    gridwidth = gridwidth-40; 
    var myGrid = jQuery("#list"); 
    editSettings = { 
     recreateForm:true,    
     reloadAfterSubmit:false, 
     closeOnEscape:true, 
     closeAfterEdit:true, 
     width:"1250"    
    }, 
    addSettings = { 
     recreateForm:true,   
     reloadAfterSubmit:false, 
     closeOnEscape:true, 
     closeAfterAdd:true    
    }; 
    myGrid.jqGrid(
    { 
     url:'projects.cfc?method=getProjects&returnformat=json&_cf_nodebug=true', //CFC that will return the projects 
     datatype: 'json', //We specify that the datatype we will be using will be JSON 
     complete: function(jsondata, stat) { 
      if (stat == "success") { 
       myGrid = jQuery("#list")[0]; 
       myGrid.addJSONData(JSON.parse(jsondata.responseText).d); 
      } else { 
       alert('Error processing JSON'); 
      } 
     }, 
     colNames:[ .....], 
     colModel :[{ ...}], //it the operators available during search 
     pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager 
     rowNum: 150, //Number of records we want to show per page 
     rowList:[20,30,40,50,75,150], //Row List, to allow Initiative to select how many rows they want to see per page 
     sortorder: "asc", //Default sort order 
     sortname: "PROJECTS.PROJECTID", //Default sort column 
     viewrecords: true, //Shows the nice message on the pager 
     imgpath: '/images', //Image path for prev/next etc images 
     caption: 'Initiatives', //Grid Name 
     recordtext: "Record {0} - {1} of {2}",//Pager information to show 
     rownumbers: false,//Do not show row numbers 
     sortable: true, 
     width:'auto', 
     height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager 
     mtype:'POST', 
     toolbar:[true,"bottom"], //Shows the toolbar at the top. We will use it to display Initiative feedback 
     subGrid: true, 
     subGridRowExpanded: function(subgrid_id, row_id) { 
      // we pass two parameters 
      // subgrid_id is a id of the div tag created within a table 
      // the row_id is the id of the row 
      // If we want to pass additional parameters to the url we can use 
      // the method getRowData(row_id) - which returns associative array in type name-value 
      // here we can easy construct the following 
       var subgrid_table_id, pager_id; 
       subgrid_table_id = subgrid_id+"_t"; 
       pager_id = "p_" + subgrid_table_id; 
       jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' cellpadding='0' cellspacing='0' class='scroll'></table><div id=’" + pager_id + "’ class=’scroll’></div>"); 
       jQuery("#"+subgrid_table_id).jqGrid({ 
        url:"projects.cfc?method=getProjectMilestones&projectid="+row_id, 
        datatype: "json", 
       colNames:['SEQ','ID','MILESTONE','TREND','DUE DATE','STATUS','OWNERS','%','COMMENTS'], //Column Names 
      //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc. 
      colModel :[     
       {name:'SEQUENCENUM',index:'SEQUENCENUM',hidden:true}, 
       {name:'PROJECTID',index:'PROJECTID', editable:false}, 
       {name:'MILESTONE',index:'MILESTONE', width:150, sorttype:"text",align:"center", 
        editable:true,edittype:"text", 
        editrules:{required:true}},     
       {name:'TREND',index:'TREND', width:100, align:"center",sorttype:"text", 
        editable:true,edittype:"select",editoptions:{value:"Green:Green;Yellow:Yellow;Red:Red"}, 
        editrules:{required:true}}, 
       {name:'DUE_DATE',index:'DUE_DATE', width:150, editable:true,editoptions:{size:12,dataInit: function(el) { 
        $(el).datepicker({ dateFormat: 'mm-dd-yy'}); 
       }, 
        defaultValue: function() { 
        var currentTime = new Date(); 
        var month = parseInt(currentTime.getMonth() + 1); 
        month = month <= 9 ? "0" + month : month; 
        var day = currentTime.getDate(); 
        day = day <= 9 ? "0" + day : day; 
        var year = currentTime.getFullYear(); 
        return month + "-" + day + "-" + year ; 
        } 
       },align:"center",  
        editrules:{required:true}}, 
       {name:'MILESTONE_STATUS',index:'MILESTONE_STATUS', 
        editable:true,edittype:"select",editoptions:{value:"In Progress:In Progress;Complete:Complete"}, 
        editrules:{required:true}}, 
       {name:'ASSIGNMENT',index:'ASSIGNMENT', width:125,align:"center",sorttype:"text", 
        editable:true,edittype:"text", 
        editrules:{required:true}}, 
       {name:'PERCENT_COMP',index:'PERCENT_COMP', width:50, sorttype:"int",align:"center", 
        editable:true,edittype:"text",editrules:{number:true}}, 
       {name:'COMMENTS',index:'COMMENTS', width:200, 
        editable:true,edittype:"textarea",editoptions:{rows:3, cols:30}, 
        editrules:{required:true}} 
        ],//searchoptions parameter is used to limit the operators available during search,            
       rowNum: 20, //Number of records we want to show per page 
       rowList:[20,30,40,50], //Row List, to allow Initiative to select how many rows they want to see per page 
       sortorder: "asc", //Default sort order 
       sortname: "SEQUENCENUM", //Default sort column 
       viewrecords: true, //Shows the nice message on the pager 
       imgpath: 'images/', //Image path for prev/next etc images 
       caption: 'Milestones', //Grid Name 
       recordtext: "Record {0} - {1} of {2}",//Pager information to show 
       rownumbers: false,//Do not show row numbers 
       sortable: true, 
       width:'auto', 
       height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager 
       mtype:'POST', 
       toolbar:[true,"bottom"], //Shows the toolbar at the top. We will use it to display Initiative feedback 
       shrinkToFit: true, 
       //The JSON reader. This defines what the JSON data returned from the CFC should look like 
       jsonReader: { 
        root: "ROWS", //our data 
        page: "PAGE", //current page 
        total: "TOTAL", //total pages 
        records:"RECORDS", //total records 
        userdata:"USERDATA", 
        cell: "", //Not Used 
        id: "0", //Will default to first column 
         subGrid: { 
           root : "ROWS", 
           repeatitems: true, 
           cell: "" //Not Used 
         } 
       }, 
       editurl:'projects.cfc?method=addeditMilestone&projectid='+row_id, //The Add/Edit function call 
       pager:('#' + pager_id) 
       }).navGrid('#' + pager_id, { 
         search:false,//title set for hover over display 
         edit:true,edittitle:"Edit Milestone",width:200, 
         add:true,addtitle:"Add Milestone",width:200, 
         del:true,deltitle:"Delete Milestone" 
        },      
       // Edit Options. save key parameter will keybind the Enter key to submit. 
       {editCaption:"Edit Milestone",edittext:"Edit",closeOnEscape:true,closeAfterEdit:true,savekey: [true,13],errorTextFormat:commonError,width:"500" 
        ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"}, 
       {addCaption:"Add Milestone",closeOnEscape:true,closeAfterAdd:true,savekey: [true,13],errorTextFormat:commonError,width:"500" 
        ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"}, 
       //Add Options 
       {url:"projects.cfc?method=delMilestone",caption:"Delete Milestone",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70", 
        reloadAfterSubmit:true} //Delete Options 

       ) 
       },      
     shrinkToFit: true, 
     //The JSON reader. This defines what the JSON data returned from the CFC should look like 
     jsonReader: { 
      root: "ROWS", //our data 
      page: "PAGE", //current page 
      total: "TOTAL", //total pages 
      records:"RECORDS", //total records 
      userdata:"USERDATA", 
      cell: "", //Not Used 
      id: "0" //Will default to first 
      }, 
     loadComplete: function() { 
      $('#cb').prev().remove(); 
      if($("#list").getGridParam("RECORDS")==0){ 
       $('#noResults').dialog("open"); 
      } else { 
       var page = $('#list').getGridParam("PAGE"); 
       var records = $('#list').getGridParam("RECORDS"); 
       var recordsPP = $('#list').getGridParam("rowNum"); 
       var x = records/recordsPP; 
       var returnArray = []; 

       if(x < page) { 
        iterLimit = records%recordsPP; 
       } else { 
        iterLimit = recordsPP; 
       } 

       for(var i=1; i<=iterLimit; i++) { 

        $('#'+i).children('td:first').next().addClass('link').css("cursor","pointer").css("color","blue").css("text-decoration","underline"); 

        var emitid = $('#'+i).children ('td:first').next().text(); 
        //window.alert(emitid); 

        $('#'+i).children('td:first').next().click(function() { 
         emitid = $(this).text(); 
         //window.alert(emitid + ":" + page + ":" + records + ":" + recordsPP + ":" + x); 
         var link = 'viewInitiative.cfm?projectid='+emitid 
         window.open(link,'_blank'); 
        }); 
        //returnArray = orderList.find(ord); 
        var truefalse = typeof returnArray; 
        if(truefalse != 'boolean') { 
         $('#list').setSelection(i); 
        } 
       } 
      } 
     },       
     loadError:function(xhr, st, err) { 
      alert('loaderror on quote request grid - ' + st) 
     },    
     editurl:"projects.cfc?method=addeditProject", //The Add/Edit function call 
     ondblClickRow: function(rowid, ri, ci) { 
      var p = myGrid[0].p; 
      if (p.selrow !== rowid) { 
       // prevent the row from be unselected on double-click 
       // the implementation is for "multiselect:false" which we use, 
       // but one can easy modify the code for "multiselect:true" 
       myGrid.jqGrid('setSelection', rowid); 
      } 
      myGrid.jqGrid('editGridRow', rowid, editSettings); 
     } 
     }).navGrid('#pager', 
      { 
       search:true,searchtitle:"Search",//title set for hover over display 
       edit:true,edittitle:"Edit Initiative",width:1000, 
       add:true,addtitle:"Add Initiative",width:1000, 
       del:true,deltitle:"Delete Initiative" 
      }, 
     // Edit Options. save key parameter will keybind the Enter key to submit. 
     {editCaption:"Edit Initiative",edittext:"Edit",closeOnEscape:true,closeAfterEdit:true,savekey: [true,13],errorTextFormat:commonError,width:"1250" 
      ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"}, 
     {addCaption:"Add Initiative",closeOnEscape:true,closeAfterAdd:true,savekey: [true,13],errorTextFormat:commonError,width:"1250" 
      ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"}, 
     //Add Options 
     {url:"projects.cfc?method=delProject",caption:"Delete Initiative",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70", 
      reloadAfterSubmit:true}, //Delete Options 
     //Search Options. multipleSearch parameter lets it know we are going to use the new advanced search feature 
     {errorTextFormat:commonError,Find:"Search",closeOnEscape:true,caption:"Search Initiatives",multipleSearch:true,closeAfterSearch:true} 
     ).navButtonAdd('#pager',{ 
         caption:"Export to Excel", 
         buttonicon:"images/sizzlejs_32x32.png", 
         onClickButton: function(){ 
          exportExcel(); 
         }, 
         position:"last" 
        }); 

     function exportExcel() 
     { 
      var mya=new Array(); 
      mya=$("#list").getDataIDs(); // Get All IDs 
      var data=$("#list").getRowData(mya[0]);  // Get First row to get the labels 
      var colNames=new Array(); 
      var ii=0; 
      for (var i in data){colNames[ii++]=i;} // capture col names 
      var html=""; 
      for (var k=0;k<colNames.length;k++) 
      { 
       if(colNames[k] == "PROJECTID") { 
        html=html+"EMIT_ID"+"\t"; 
       } else if (colNames[k] == "PROJECT_TITLE") { 
        html=html+"INITIATIVE_TITLE"+"\t"; 
       } else if (colNames[k] == "PROJECT_TYPE") { 
        html=html+"SUB-CATEGORY"+"\t"; 
       } else if (colNames[k] == "PROJECT_TYPEID") { 
        html=html+"SUB_CAT_ID"+"\t"; 
       } else if (colNames[k] == "SUB_TEAM") { 
        html=html+"SUB_TEAM_MEMBERS"+"\t"; 
       } else if (colNames[k] == "OVERRIDE") { 
        html=html+"OVERRIDE%_COMP"+"\t"; 
       } else if (colNames[k] == "EM_EXECUTION_TOP_TEN") { 
        html=html+"EM_EXECUTION_PAIN_POINT"+"\t"; 
       } else { 
        html=html+colNames[k]+"\t"; // output each Column as tab delimited 
       } 
      } 
      html=html+"\n"; 
      for(i=0;i<mya.length;i++) 
      { 
       data=$("#list").getRowData(mya[i]); // get each row 
       for(j=0;j<colNames.length;j++) 
       { 
        html=html+data[colNames[j]]+"\t"; // output each column as tab delimited 
       } 
       html=html+"\n"; // output each row with end of line 

      } 
      html=html+"\n"; // end of line at the end 
      document.forms[0].csvBuffer.value=html; 
      document.forms[0].method='POST'; 
      document.forms[0].action='http://bfops01.edc.cingular.net/excel/csvExport.php'; // send it to server which will open this contents in excel file 
      document.forms[0].target='_blank'; 
      document.forms[0].submit(); 
     } 

    //Function will be called when add/edit encounters an error. The returned message is what will be shown to Initiative 
    function commonError(data){   
     return "Error Occured during Operation. Please try again"; 
    } 
}); 

Answer 1

您应该确认在http://www.jslint.com/你的代码。它有很多语法错误。例如，你忘记声明变量iterLimit和j，你应该替换';'之后var myGrid = jQuery("#list")以'，'和其他许多小问题。我建议你另外在代码的很多地方使用整数值作为width参数，如jqGrid使用ifself。

你主要的问题似乎存在，因为子网格的<div>将不是创建或没有或错误id元素。该代码

jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+ 
     "' cellpadding='0' cellspacing='0' class='scroll'></table><div id=’" + 
     pager_id + "’ class=’scroll’></div>"); 

包含特殊字符’而不是'。它应及时更换，

jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+ 
     "'></table><div id='" + pager_id + "'></div>"); 

您使用起来非常非常古老的语法HTML元素和复古使用的参数，如imgpath的jqGrid的这are deprecated since version 3.5。