jqGrid获取选中数据行

  jqGrid没有提供类似easyui datagrid的getChecked/getSelected方法获取勾选的或者选中的数据行api,所以jqGrid要获取multiselect为true时被勾选的记录,需要自己遍历勾选的checkbox获取id后通过getRowData方法获取数据行。

  jqGrid获取选中数据行源代码如下

jqGrid获取选中数据行

<html>    
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jqGrid获取选中数据行</title>
<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
</head>    
<body>
<table id="dg1"></table>
<div id="pgfrc1"></div>
<input type="button" onclick="getCheckedRows()" value="获取选中的数据行" />
 <script type="text/javascript">
     //getRowData
     function getCheckedRows() {
         var cbs = $('#dg1').find(':checkbox:checked');//获取勾选的checkbox
         //生成的checkbox id都是有规则的(jqg_容器id_id值)
         var rows = [],id;
         for (var i = 0; i < cbs.length; i++) {
             id = cbs[i].id.replace('jqg_dg1_', '');
             rows.push($('#dg1').jqGrid('getRowData', id));
         }
         console.log(rows)
     }
     $(function () {
         jQuery("#dg1").jqGrid({
             multiselect: true,
             url: 'demo1.txt',
             datatype: "json",
             colNames: ['ID', 'Name', 'Amount'],
             colModel: [{ name: 'id', width: 60, align: 'center', frozen: true }, { name: 'name', index: 'name', width: 100 }, { name: 'amount', index: 'amount', width: 120 }],
             width: 300,
             pager: '#pgfrc1',
             jsonReader: { repeatitems: false },
             shrinkToFit: false,
             caption: "jqGrid获取选中数据行",
             height: 'auto'
         });
         jQuery("#dg1").jqGrid('setFrozenColumns');
     });
 </script>    
</body>    
</html>

 


原创文章,转载请注明出处:jqGrid获取选中数据行

评论(0)Web开发网
阅读(569)喜欢(0)jqGrid中文API