jqGrid設置多重選擇複選框ID和名稱到一個不同的值

Question

我剛剛添加免費jqGrid到我的ASP.NET MVC Web應用程序。惠斯特大部分工作很好，我想在多選複選框中將「id」和「name」屬性的值設置爲來自表中不同列的Id列值？

相反的複選框設置如下：

<input type="checkbox" id="jqg_list2_jqg30" class="cbox" name="jqg_list2_jqg30" aria-checked="false"> 

如何更換jqg_list2_jqg30？

我一直在關注這個演示，其中ID和名稱上的複選框屬性設置正確，但我看不到我在做什麼不同 - http://www.trirand.com/blog/jqgrid/jqgrid.html

這是jqGrid的

邏輯

$("#list2").jqGrid({ 
     url: 'https://localhost:44319/Package/GetPackages/2', 
     datatype: "json", 
     contentType: "application/json; charset-utf-8", 
     mtype: 'GET', 
     colNames: ['Id', 'Name', 'Description'], 
     colModel: [ 
      { name: 'Id', index: 'Id', width: 55, sorttype: "int" }, 
      { name: 'Name', index: 'Name', width: 90, searchoptions: { "sopt": ["bw", "eq"] } }, 
      { name: 'Description', index: 'Description', width: 90 }     
     ], 
     rowNum: 25, 
     rowList: [25, 50], 
     pager: '#pager2', 
     toppager: true, 
     sortname: 'Id', 
     viewrecords: true, 
     height: "auto", 
     sortorder: "asc", 
     multiPageSelection: true, 
     multiselect: true, 
     selarrrow: [], 
     caption: "JSON Example", 
     loadonce: true, 
     jsonReader: { repeatitems: false } 
    }); 
    jQuery("#list2").jqGrid('navGrid', '#pager2', 
     { edit: false, add: false, del: false, search: true, view: false, refresh: true }); 
    jQuery("#m1").click(function() { 
     var s; 
     s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow'); 
     alert(s); 
    }); 

我知道我可以編寫一些自定義邏輯來做到這一點，但我不認爲這是必需的，因爲上面的例子顯示了這個東西，而且應該是開箱即用的東西嗎？

在此先感謝。

Answer 1

我認爲有一些常見的誤解會引起你的問題。我想你可以通過使用jQuery("#list2").jqGrid('getGridParam', 'selarrrow')得到所選元素的ID，然後你需要獲得的詳細信息關於選擇的項目：「id」和「name」。

第一個問題是網格的rowid。您不包含從url: 'https://localhost:44319/Package/GetPackages/2'返回的任何測試數據，但我可以猜測它是{"Id": 123, "Name": "Some name", "Description": "Some description"}等項目的數組，其中Id的值來自數據庫，並且所有值均爲唯一。 jqGrid 的內部組織要求表示網格的每一行（每個<tr>元素的HTML表與主數據）都具有id屬性具有唯一值。一個將id屬性的值命名爲「rowid」。默認情況下，jqGrid檢查id屬性的輸入數據並使用rowid作爲值。如果您使用Id而不是id，則可以添加jsonReader: { id: "Id" }來解決問題並通知jqGrid將其用作rowid的輸入。或者，您可以配置Newtonsoft.Json ASP.NET MVC應用程序的設置，以指定ContractResolver = new CamelCasePropertyNamesContractResolver();。代碼中賦值的確切位置取決於您使用的ASP.NET MVC的版本。 The answer顯示您可以在ASP.NET Core中分配配置設置的位置。我個人使用這種設置，因爲我試圖遵循C＃和JavaScript的標準名稱轉換。

您擁有的另一個選項是將key: true添加到列Id。它的做法幾乎與jsonReader: { id: "Id" }相同。

如果你有rowid（或rowid數組爲jQuery("#list2").jqGrid('getGridParam', 'selarrrow')），那麼你可以很容易地從任何列獲取值或相應數據項的任何屬性的值。如果使用loadonce: true，那麼從服務器返回的數據項將在本地保存參數data，如使用情況datatype: "local"。您可以使用getLocalRow方法輕鬆獲取數據項。您可以將代碼

jQuery("#m1").click(function() { 
    var s; 
    s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow'); 
    alert(s); 
}); 

改變

jQuery("#m1").click(function() { 
    var $grid = jQuery("#list2"), i, item, 
     ids = $grid.jqGrid("getGridParam", "selarrrow"); 

    for (i = 0; i < ids.length; i++) { 
     item = $grid.jqGrid("getLocalRow", ids[i]); 
     alert("rowid=" + ids[i] + 
      "\nId=" + item.Id + 
      "\nName=" + item.Name + 
      "\nDescription=" + item.Description); 
    } 
}); 

順便說一句，我建議你從所有列（從colModel）刪除不需要的index性能，並刪除默認值的jqGrid的一些選項（mtype: 'GET' ，height: "auto"，sortorder: "asc",selarrrow: []）。我建議您從HTML頁面中刪除空的div <div id="pager2"></div>，並使用pager: true而不是pager: '#pager2'。免費的jqGrid將以類似於toppager的方式生成頁面的div（請參閱toppager: true）。它簡化了代碼。您可以使用jQuery("#list2").jqGrid('getGridParam', 'pager')獲得生成的尋呼機的id選擇器（如果需要），但大多數情況下不需要它。除了使用

jQuery("#list2").jqGrid('navGrid', '#pager2', {...}); 

，你可以只使用

jQuery("#list2").jqGrid('navGrid', {...}); 

這將增加導航按鈕所有網格的頁。