jqGrid 使用示例&获取选中行数据

最新推荐文章于 2024-11-25 19:30:40 发布

the_lone_wolf

最新推荐文章于 2024-11-25 19:30:40 发布

阅读量1k

点赞数

本文链接：https://blog.youkuaiyun.com/the_lone_wolf/article/details/54316359

版权

这篇博客介绍了如何在jQuery表格中使用jqGrid插件，并提供了获取选中行ID的示例代码，包括调用`getGridParam`方法获取选中行的ID。同时还给出了jqGrid的API参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery表格使用示例：

$("#cable").jqGrid({

datatype: "json",
url: '../../ssss/queryinfo.do,
//postData:'',
jsonReader : {
//数据
root : "responseData.datas",
//当前页
total : "responseData.totalPageNums",
//总行数
records : "responseData.totalRecordNums",
//行id
id:'courseId'
},
mtype: "POST",
// height: '100%', /*表格窗体高度*/
height: $(window).height() - $(".top-height").height() - 110, /*表格窗体高度*/
autowidth: true,
// 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth
shrinkToFit: true, /* 自适应*/
rowNum: 10, /*每页显示多少条信息*//*在grid上显示记录条数，这个参数是要被传递到后台*/
rowList: [10, 20, 50, 100, 200], /*可选择显示的条数*//*一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台*/
colNames: ["标题",, "操作"],
colModel: [/*每列的属性*/
// 常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
{
name: 'courseName',
index: 'courseName',
width: 100,
sortable: false,
formatter: function(cellvalue, options, rowObject) {

if (cellvalue != null && cellvalue != '') {

return "<a class='title-a'>" + cellvalue + "</a><p>分类：技能操作类</p>";
}

}
},
{
name: 'courseId',
index: 'courseId',
width: 60,
align: 'center',
sortable: false,
formatter: function(cellvalue, options, rowObject) {

var divHtml = getOperationColumnDiv(cellvalue);

return divHtml;
}
}
],
pager: "#pager_list_1",
// 定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
viewrecords: true, /*定义是否要显示总记录数*/
// caption: "jqGrid 示例1", 表格名称
hidegrid: false, /*启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效*/
multiselect: true,//去掉复选框
rownumbers: true, //显示序号
editable:true,

});

获取选中行的ID：$("#cable").jqGrid('getGridParam','selarrrow');$("#courseInfoTable").jqGrid('getGridParam','selarrrow');

附：API地址：http://blog.mn886.net/jqGrid/