在jqGrid顯示下拉列表中選擇不同的列

我只是遵循這個，但我的php是， Show different Jqgrid formats in the same page我也希望同樣的選項，如果我從下拉列表中選擇一個項目所有列想要隱藏除了少數，特別是我不明白這個和這個代碼是如何工作通過點擊Mostrar如何php在jqGrid顯示下拉列表中選擇不同的列

<table width="100%"> 
<tr> 
<td>Tipo de Equipo :</td> 
<td><% =Html.DropDownList("TipoId", (SelectList)ViewData["tiposdeEquipo"], "--Seleccione--", new { @id = "displaydropdown" })%> </td> 
</tr> 
<tr> 
<td colspan="2"><input type="submit" value="Mostrar" /></td> 
</tr> 
</table>

寫這樣的代碼，請幫助我，我是個初學者。

這是我的代碼

<select id="displaydropdown" name="displaydropdown"> 
<option selected>Change Type</option> 
<option value="A">option1</option> 
<option value="B">option2</option> 
<option value="C">option3</option> 
</select> 

<div class="box A" align="center"><table id="jqGrid" ></table><div id="jqGridPager"></div></div> 
<script type="text/javascript"> 

var lastsel; 

$(function() { 
     $("#jqGrid").jqGrid({ 
     url:'server.php', 
     editurl: 'update.php', 
     datatype: "json", 
     shrinkToFit: true, 
     colModel:[ 
      {label:'COUNT',name:'ID',align:"center"}, 
      {label:'EMPLOYEE LOGIN',name:'Employee_Login',align:"center"}, 
      {label:'NEW LEAD',name:'New_Value',align:"center"}, 
      {label:'REASON/COMMENTS',name:'Requestor_NOTES',align:"center"}, 
      {label:'EXISTING LEAD',name:'Existing_Value',align:"center"}, 
       ],    
     rowNum:200, 
     rowList:[400,300,200], 
     onCellSelect: function (rowid, iCol, cellcontent, e) { 
      if (rowid && rowid !== lastsel) { 
       $('#jqGrid').restoreRow(lastsel); 
       lastsel = rowid; 
      } 
     $('#jqGrid').editRow(rowid, true, iCol); 
      }, 
     pager: '#jqGridPager', 
     sortorder: "asc", 
     viewrecords: true, 
     height:'300px', 
     width:'750' 

    }); 
    jQuery("#jqGrid").jqGrid('navGrid',"#jqGridPager",{edit:false,add:false,del:false,search:false}); 
    //$('#jqGrid').jqGrid('setGridWidth', '1300'); 
    }); 

    $("#displaydropdown").change(function() { 
     var display = $("#displaydropdown option:selected").val(); 
     if (display == 'A') 
     { 
      $('#jqGrid').hideCol('ID'); 
      $('#jqGrid').showCol('Req_Date'); 
      $('#jqGrid').showCol('App_WeekBeginning'); 

     } 
     else if (display == 'B') { 
      $('#jqGrid').hideCol('App_WeekBeginning'); 
      $('#jqGrid').showCol('Req_Day'); 
      $('#jqGrid').showCol('App_Week'); 

     } 
     else if (display == 'C') { 
      $('#jqGrid').hideCol('App_Week') 
      $('#jqGrid').showCol('ID'); 
      $('#jqGrid').showCol('Req_Date'); 
     } 
    }); 



</script>

來源

2016-05-31 Sunil Sharma

你到底有哪個問題（有什麼不行）？代碼'jQuery（document）.ready（function（）{...}）;'和$（function（）{...}）;'do **相同*：你不應該放置一個正在等待另一個文檔準備好。具有從'url：'server.php''返回的數據的格式（具有2-3行的示例會有幫助）？你絕對不應該在'colModel'中使用'name'屬性，其值包含空格（比如''NEW LEAD''）或特殊字符'name：'EXISTING LEAD''。使用'index'屬性是不好的。可能你想使用'label：'EMPLOYEE LOGIN'，名稱：'Req_Date''？ – Oleg

每個關於jqGrid的問題都包含了很重要的信息，你使用哪個版本的jqGrid，以及從哪個版本的jqGrid（[free jqGrid]（https://github.com/free-jqgrid/jqGrid），商業版本[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334）或舊版本的<= 4.7版本的jqGrid）。另一個常見的評論：我建議你看看[答案]（http://stackoverflow.com/a/34976517/315935），它顯示了在'beforeSelectRow'內調用'editRow'和'restoreRow'的例子。和'onSelectRow'以及'savedRow'參數的使用而不是'lastsel'。 – Oleg

謝謝@Oleg的回覆，我會重命名爲標籤名稱。我正在使用[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103292）， –

的方法showCol和hideCol應該從colModel使用name屬性的值，而不是index財產的價值，就像在你當前的代碼。此外，name屬性將用於構建一些內部jqGrid元素的id。因此，name屬性的值應該沒有空格，這在HTML5中是禁止的（請參閱here）。我想你想使用

{label:'EMPLOYEE LOGIN',name:'Req_Date',align:"center"}

例如，而不是

{name:'EMPLOYEE LOGIN',index:'Req_Date',align:"center"}

變化的代碼$('#jqGrid').showCol('Req_Date');應該工作之後。

來源

2016-05-31 09:55:49 Oleg

，我有這個愚蠢的懷疑，假設在我的MySQL數據庫中我有3列'ID'，'FIRSTNAME'，'LASTNAME'的表。如何使用這個列名來使用jqGrid獲取數據。我想''colModel'中使用'name'關鍵字。 –

，你可以檢查我的代碼，我編輯它..是否正確 –

@SunilSharma：你的代碼現在工作嗎？你可以隱藏/顯示列嗎？數據庫中表的列名可能與您從服務器返回的數據格式無關。我在第一條評論中問過你：**哪個格式有從url返回的數據：'server.php'（有2-3行的例子會有幫助）？**。您想要顯示多少行（100，1000，10000，1000000）？你當前的代碼不使用'loadonce：true'選項，因此你可能已經實現了**服務器端**分頁和數據排序。是這樣嗎？ – Oleg

在jqGrid顯示下拉列表中選擇不同的列

回答

相關問題