jqgrid常用功能详解

html代码

<div class="panel-body">
    <table id="grid_id" style="heigth: 1000px"></table>
    <div id="pager"></div>
</div>

js代码

获取该表格的所有行号id

var ids = jQuery("#grid_id").jqGrid('getDataIDs');

获取选择的行的数据，只要传入rowId即可

var rowData = $("#grid_id").jqGrid('getRowData', rowId);

这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下

var sensorId = rowData.id;
var sensorId2 = rowData['id'];

获取表格的当前页码和当前每页显示数量

var page = $('#list').getGridParam('page');//当前页码
var rowNum = $('#list').getGridParam('rowNum');//当前每页显示数量

给表格的rowId（变量）行，edit列设置内容editBtn
表格加载完，设置序号或者操作按钮

jQuery("#grid_id").jqGrid('setRowData',rowId, {edit : editBtn});

刷新表格

$("#grid_id").trigger("reloadGrid");

addRowData方法新增行
参考 http://blog.csdn.net/dreamstar613/article/details/73275019

$("#grid_id").jqGrid(“addRowData”, rowid , data , position,srcrowid );

getGridParam方法多选时返回选中行的ID
参考http://blog.csdn.net/dreamstar613/article/details/73123524

 var ids = $("#grid_id").jqGrid('getGridParam', 'selarrrow');

setGridParam方法表格查询
参考http://blog.csdn.net/dreamstar613/article/details/61195365

$("#searchBtn").click(function() {
    $("#list").jqGrid('setGridParam', {
        url : "sensor/search",
        datatype:'json',
        postData : { //传递查询参数到后台 
            'search_name' : "name",
            'search_code' : "code",
            'search_sensorType' : "sensorType",
        }, 
        page : 1
    }).trigger("reloadGrid"); //重新载入 

});

editRow方法表格内编辑
参考http://blog.csdn.net/dreamstar613/article/details/54613032

jQuery('#list' ).jqGrid('editRow', rowId, true,pickdates);//开启可编辑模式

subGridRowExpanded 方法实现子表格
参考http://blog.csdn.net/dreamstar613/article/details/54616503

subGridRowExpanded : function(subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id
   bindSubGrid(subgrid_id, row_id);

}

<script type="text/javascript">

 //8.修改某个单元格的值
$("#gridid").jqGrid('setCell',rowid,icol,data); 
rowid为行ID，从1开始 
icol为列索引，从0开始， 
data为要设置的单元格数据

//9.当jqgrid的某个单元格编程可编辑状态，该input的id是"行号_列名"
//比如第3行，列名为name的单元格的input的id为3_name
//给list表格的第3行的name列绑定 时间控件
jQuery("#3_name", "#list").bind("click",
                function() {
                    WdatePicker({
                        dateFmt : 'HH:mm'
                    })
                });

</script>

jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

参数详解

(1)url: 如果定义了改值，将会覆盖jqGrid中的editurl
如果url=”clientArray” 那么就不会向server端触发请求
(2)extraparam:请求参数列表
(3)successfunc :在请求成功调用后立即返回，该函数签名包括server返回的数据。同时该函数需要返回tue/false
(4)aftersavefunc：数据保存到服务器返回客户端后触发。此事件参数为rowid和xhr对象，url设置为clientArray也会触发此事件
(5)afterrestorefunc:如果定义了改函数，将在restoreRow后调用，接受rowid作为参数

posted on 2017-01-19 10:06 dreamstar 阅读(251) 评论(0) 编辑收藏举报

jqgrid常用功能 详解

jqgrid常用功能详解