我刚刚添加了免费的jqGrid到我的ASP。NET MVC web应用程序。虽然它在大多数情况下工作得很好,但我想将多选复选框上的"id"one_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"one_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', {...});
将导航按钮添加到网格的所有页面。