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

jqGrid setting multiselect checkbox id and name to a different value

本文关键字：设置 复选框 id jqGrid      更新时间：2023-09-26

我刚刚添加了免费的jqGrid到我的ASP。NET MVC web应用程序。虽然它在大多数情况下工作得很好，但我想将多选复选框上的"id"answers"name"属性的值设置为表中不同列的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);
    });

我知道我可以写一些自定义逻辑来做到这一点，但我不认为这是必需的，正如上面的例子所示，是一些应该开箱即用的东西?

我认为你的问题后面有一些常见的误解。我假设您通过使用jQuery("#list2").jqGrid('getGridParam', 'selarrrow')获得所选元素的id，然后您需要获得关于所选项目的详细信息:"id"answers"name"。

第一个问题是网格的行数。您不包括从url: 'https://localhost:44319/Package/GetPackages/2'返回的任何测试数据，但我可以猜测它是像{"Id": 123, "Name": "Some name", "Description": "Some description"}这样的项目数组，其中Id的值来自数据库，所有值都是唯一的。jqGrid 的内部组织要求网格的每一行(包含主数据的HTML表的每个<tr>元素)都具有具有唯一值的id属性。其中一个将id属性的值命名为"rowid"。默认情况下，jqGrid检查id属性的输入数据，并使用这些值作为rowid。如果您使用Id而不是id，那么您可以添加jsonReader: { id: "Id" }来解决这个问题，并通知jqGrid使用它作为队列的输入。或者，您可以配置您的ASP的Newtonsoft.Json设置。. NET MVC应用程序分配ContractResolver = new CamelCasePropertyNamesContractResolver();。代码中赋值的确切位置取决于ASP的版本。NET MVC，你使用的。答案显示了在ASP中可以在哪里分配配置设置。净的核心。我个人使用这样的设置，因为我试图遵循c#和JavaScript的标准名称转换。

还有一个选项是将key: true添加到Id列中。它的作用与jsonReader: { id: "Id" }几乎相同。

如果您有rowid(或jQuery("#list2").jqGrid('getGridParam', 'selarrrow')中的rowid数组)，那么您可以轻松地从任何列或相应数据项的任何属性中获取值。如果使用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'。Free jqGrid将以与toppager相同的方式为页面生成div(参见toppager: true)。它简化了代码。您可以使用jQuery("#list2").jqGrid('getGridParam', 'pager')获得生成的分页的id选择器(如果需要)，但在大多数情况下不需要它。而不是使用 
jQuery("#list2").jqGrid('navGrid', '#pager2', {...});

可以直接用

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

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

相关文章：