html代码
<div>
<table id="list">table>
<div id="pager">div>
div>
<div class="choose-btn-fr">
<a href="javascript:void(0)" onclick="select()">选择a>
div>
js代码
<script>
jQuery("#list").jqGrid({
url : 'watchPoint/json/all',
datatype : "json",
autowidth : true,
height : 'auto',
shrinkToFit : true,
multiselect : true,//第一步:允许多选
pgbuttons : false,//是否显示用于翻页的按键,默认为true
pginput : false,//是否显示用于输入目标页码的输入框,默认为true
colNames : [ '序号', '线路', '行别', '区间', '起讫里程', '防洪等级' ],//jqGrid的列显示名字
colModel : [
{
name : 'myrn',
index : 'myrn',
width : 80,
sortable : false,
align : "left"
}, {
name : 'section.railway.name',
index : 'section.railway.name',
width : 100,
align : "left"
}, {
name : 'side',
index : 'side',
width : 100,
align : "left"
}, {
name : 'section.name',
index : 'section.name',
width : 200,
align : "left"
}, {
name : 'rangeMileage',
index : 'rangeMileage',
width : 100,
align : "left"
}, {
name : 'floodLevel',
index : 'floodLevel',
width : 80,
} ],
rowNum : 0, //不分页
/* rowList : [ 10, 20, 30 ], */
pager : '#pager',
sortname : 'id',
sortorder : "desc",
mtype : "post",
viewrecords : true,
jsonReader : {
root : "content",
page : "",
total : "totalPages",
records : "totalElements",
repeatitems : false,
id : "id"
},
gridComplete : function() {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
jQuery("#list").jqGrid('setRowData', ids[i], {
myrn : i + 1,
});
}
},
loadComplete : function(data) {
},
caption : ""//表格的标题名字
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : false,
add : false,
del : false,
search : false
});
/*获取已选择的防洪看守点,并填入新增表格*/
function select() {
/*第二步:获取选中行的所有id*/
var ids = $("#list").jqGrid('getGridParam', 'selarrrow');
if (null == ids || ids.length == 0) {
alert("至少选择一个防洪看守点");
} else {
for (var i = 0; i < ids.length; i++) {
/*第三步:获取某一条选中行的数据*/
var rowData = $("#list").jqGrid('getRowData', ids[i]);
/*第四步:获取某一条选中行的某一列值*/
alert(rowData['section.railway.name']);
alert(rowData['side']);
}
script>