jqGrid 使用示例&获取选中行数据
2017-01-10 18:17
253 查看
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;
}
4000
}
],
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/
$("#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;
}
4000
}
],
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/
相关文章推荐
- Android使用"中国天气网"API数据通过城市名称获取天气情况
- asp.net使用jQuery获取RadioButtonList成员选中内容和值示例
- jqGrid获取选中行的部分数据
- 获取当前年份前后各五年的数据与双击选中方法的使用
- jQuery中使用Ajax获取JSON格式数据示例代码
- jQuery中使用Ajax获取JSON格式数据示例代码
- jqgrid多行操作并且获取选中行的数据
- 对象转换为JSON数据格式&使用JQuery获取数据
- android使用url connection示例(get和post数据获取返回数据)
- *jqGrid的使用说明书( 基本使用 数据获取 分页 添加链接 )
- jQuery EasyUI使用教程之从数据网格中获取选中行数据
- JSONP一种使用<script>元素获取数据的方法
- JqGrid获得所有选中行数据ID数组,获取所有行的ID数组
- 使用jQGrid插件,远程获取json数据绑定
- asp.net使用jQuery获取RadioButtonList成员选中内容和值示例
- 使用JavaScript或Jquery获取标准下拉框的"选中值"和"选中文本"
- OpenCV 使用C++获取摄像头数据并保存示例
- vue使用ajax获取后台数据进行显示的示例
- 微信小程序开发之formId使用(模板消息)、跨页面获取数据示例
- 获取jqGrid中选中行的数据以及 jqGrid获得所有行数据的方法