jqGrid 将多选复选框 ID 和名称设置为不同的值

Question

我刚刚将免费的 jqGrid 添加到我的 ASP.NET MVC 网络应用程序中。 Whist 在大多数情况下工作得很好，我想将多选复选框上的 "id" 和 "name" 属性的值设置为 table 中不同列的 Id 列值？

复选框设置如下：

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

如何替换 jqg_list2_jqg30？

我一直在关注这个演示，其中复选框的 id 和 name 属性设置正确，但我看不出我在做什么不同 - 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 的内部组织要求 网格的每一行（HTML table 的每个 <tr> 元素与主要数据）具有 id 具有唯一值的属性。将 id 属性的值命名为 "rowid"。默认情况下，jqGrid 检查 id 属性的输入数据并将这些值用作 rowid。如果您使用 Id 而不是 id 那么您可以添加 jsonReader: { id: "Id" } 来解决问题并通知 jqGrid 将其用作 rowids 的输入。或者，您可以配置 ASP.NET MVC 应用程序的 Newtonsoft.Json 设置以分配 ContractResolver = new CamelCasePropertyNamesContractResolver();。代码中赋值的确切位置取决于您使用的 ASP.NET MVC 的版本。显示您可以在 ASP.NET Core 中分配配置设置的位置。我个人使用这样的设置是因为我尝试遵循 C# 和 JavaScript.

的标准名称转换

您还有一个选择是将 key: true 添加到 Id 列。它几乎与 jsonReader: { id: "Id" }.

相同

如果您有 rowid（或 jQuery("#list2").jqGrid('getGridParam', 'selarrrow') 的 rowid 数组），那么您可以轻松地从任何列中获取值或相应数据项的任何属性的值。如果您使用 loadonce: true 那么从服务器返回的数据项将保存在本地在 data 参数中，就像在使用 [=33= 的情况下一样].您可以使用 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);
    }
});

顺便说一下，我建议您从所有列中删除不需要的 index 属性（来自 colModel）并删除一些具有默认值的 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', {...});

这会将导航器按钮添加到网格的所有页面。

jqGrid 将多选复选框 ID 和名称设置为不同的值

jqGrid setting multiselect checkbox id and name to a different value

javascript

asp.net

jquery

free-jqgrid