jqgrid圖標問題

Question

我已經創建了主/明細網格，並且能夠正確加載兩個網格。我已經啓用了添加/編輯/刪除兩個網格，但圖標是不可選的。這些圖標顯示在一起也聚攏在一起。

任何想法？

我有我開發的其他網格工作正常，我用它們作爲起始點，但它們不是主/明細類型網格。

代碼：

<table id="questions"></table> 
    <div id="questions"></div> 
    <br /> 
    <table id="answers"></table> 
    <div id="answers"></div> 

<script language="JavaScript" type="text/javascript"> 

$(document).ready(function() { 

    jQuery("#questions").jqGrid({ 
datatype: "json", 
    url: 'updateQuestion.php?client=<?=$clientId5?>', 
    mtype: 'GET', 
    colNames:['Id', 'Campaign', 'Question','ClientId'], 
colModel:[ 
    {name:'id',index:'id', width:40,editable:false,editoptions:  {readonly:true,size:30},hidden:false},  
      {name:'campaignId',index:'campaignId', width:80,editable:true,search: true,edittype:"select",editoptions:{value:"<?if ($mode == 'edit'){ $campaigns = mysql_db_query($database, "SELECT * FROM uploadCampaigns WHERE id = '$campaignId'");while($ci = mysql_fetch_array($campaigns)) {echo "$ci[id]:$ci[name];";}}else{ $campaigns = mysql_db_query($database, "SELECT * FROM uploadCampaigns WHERE customerID = '$clientId5'");while($ci = mysql_fetch_array($campaigns)) {echo "$ci[id]:$ci[name];";}}?>"}}, 
    {name:'question',index:'question', width:450, align:"left",editable:true,edittype:"textarea",editoptions:{rows:"5",cols:"75"}},  
    {name:'clientId',index:'clientId',width:10, editable: true,edittype:"text",editoptions:{value: <?=$clientId5?>},hidden:true} 

], 
    rowNum:15, 
      rowList:[15,30,45], 
      pager: '#questions', 
      sortname: 'id', 
      viewrecords: true, 
      sortorder: "asc", 
      jsonReader: { 
       cell: "", 
       id: "0" 
      }, 
      pgtext : "Page {0} of {1}", 
      caption:"Manage Questions", 
      width: 'auto', 
      height: 'auto', 
      gridview: true, 
      loadOnce: true, 
      multiselect: false, 
      onSelectRow: function(ids) { 
       var sr = jQuery("#questions").getGridParam('selrow'); 
        rowdata = jQuery("#questions").getRowData(sr); 
          scid = rowdata.scid; 
          question = rowdata.question; 

       if(ids == null) { 
     ids=0; 
     if(jQuery("#answers").jqGrid('getGridParam','records') >0){ 
      jQuery("#answers").jqGrid('setGridParam',{url:'updateAnswer.php?scid='+ ids,page:1}); 
//       jQuery("#answers").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1}); 
      jQuery("#answers").jqGrid('setCaption',"Question: "+question) 
      .trigger('reloadGrid'); 
     } 
       } else { 
      jQuery("#answers").jqGrid('setGridParam',{url:'updateAnswer.php?scid='+ ids,page:1}); 
     //   jQuery("#answers").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1}); 
     jQuery("#answers").jqGrid('setCaption',"Question: "+question) 
     .trigger('reloadGrid');   
       } 
      },    
      loadError: function (jqXHR, textStatus, errorThrown) { 
      // remove error div if exist 
       $('#' + this.id + '_err').remove(); 

      // insert div with the error description before the grid 
       $(this).closest('div.ui-jqgrid').before(
        '<div id="' + this.id + '_err" style="max-width:' + this.style.width + 
        ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;">' + 
         decodeErrorMessage(jqXHR, textStatus, errorThrown) + 
           '</div><div style="clear:left"/></div>' 
       ); 
      } 

     }); 

    jQuery("#questions").jqGrid('navGrid',"#questions",{add:true,edit:true,del:true, search:true, refresh:true},     {height:'auto',width:500,reloadAfterSubmit:true,closeAfterEdit:true,url:'updateQuestion.php'}, // edit options}   {height:'auto',width:500,reloadAfterSubmit:true,closeAfterAdd:true,url:'updateQuestion.php?client=<?=$clientId5?>'}, 
     {reloadAfterSubmit: true,closeAfterDelete:true,url:'updateQuestion.php', 
      onclickSubmit : function(eparms) { 
       var id2 = client = {}; 
       var scid = client = ''; 
         // we can use all the grid methods here 
         //to obtain some data 
        var sr = jQuery("#navgrid").getGridParam('selrow'); 
        rowdata = jQuery("#navgrid").getRowData(sr); 
          scid = rowdata.scid; 
          client = rowdata.clientId; 
          parms = {scid: scid,client: client}; 

          return parms; 
        }      
       }, // del options 
     {height:'auto',width:'auto',reloadAfterSubmit:true,closeAfterSearch:true,url:'updateQuestion.php'} 
     );     


    }); 
jQuery("#answers").jqGrid({ 
height: 100, 
    url:'updateAnswer.php?scid=0', 
datatype: "json", 
colNames:['Id','QuestionId', 'Answer'], 
colModel:[ 
      {name:'scid',index:'scid', width:10,editable:false,editoptions:{readonly:true,size:10},hidden:true}, 
      {name:'questionId',index:'questionId', width:90,editable:false,editoptions:{readonly:true,size:90},hidden:false}, 
    {name:'answer',index:'answer', width:400, align:"left",editable:true,edittype:"textarea",editoptions:{rows:"5",cols:"75"}}  
], 
rowNum:10, 
rowList:[10,20,30], 
pager: '#answers', 
sortname: 'questionId', 
    jsonReader: { 
       cell: "", 
       id: "0" 
      }, 
    viewrecords: true, 
    sortorder: "asc", 
multiselect: false, 
caption:"Manage Answers"}).navGrid('#answers',{add:true,edit:true,del:true}); 
</script> 

Answer 1

頁面上的所有元素的id值必須是唯一的。您可以使用

<table id="questions"></table> 
<div id="questions"></div> 
<br /> 
<table id="answers"></table> 
<div id="answers"></div> 

所以，你必須至少 ID重複。你應該改變的ID，以例如

<table id="questions"></table> 
<div id="questionsPager"></div> 
<br /> 
<table id="answers"></table> 
<div id="answersPager"></div> 

和修改的jqGrid的pager選項和navGrid你使用第二個參數相應的參數。