繁体   English   中英

jqGrid将multiselect复选框ID和名称设置为其他值

[英]jqGrid setting multiselect checkbox id and name to a different value

我刚刚在我的ASP.NET MVC Web应用程序中添加了免费的jqGrid。 在大多数情况下,它运行良好,我想将多选复选框上的“ id”和“ 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”和“ name” 。

第一个问题是网格的rowid。 您不包括从url: 'https://localhost:44319/Package/GetPackages/2'返回的任何测试数据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将其用作行jsonReader: { id: "Id" }的输入。 或者,您可以配置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参数中,就像用法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属性,并删除具有默认值( 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('getGridParam', 'pager') ,但是在大多数情况下不需要它。 而不是使用

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

你可以用

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM