html jqGrid的常用方法

Posted 2021-05-11

$("#sp_1").text(); // total pages

$(".ui-pg-input").val(); // current page

$('#your_grid').getGridParam('page'); // current page

//取消选中
$('#grid').jqGrid('resetSelection');

//You can examine the values of the jqGrid parameters sortname and sortorder ("desc" or "asc"). To get the parameters you can use getGridParam method:

var sortColumnName = $("#list").jqGrid('getGridParam','sortname');
//and

var sortOrder = $("#list").jqGrid('getGridParam','sortorder'); // 'desc' or 'asc'

$('#uiGrid1').trigger("reloadGrid",[{page:5}]);

var allRowsIdsOnCurrentPage = $('#file-grid').jqGrid('getDataIDs');
var allRowsOnCurrentPage = $('#file-grid').jqGrid('getRowData');

//分页情况下获取全部数据
var allRowsInGrid = $('#list4').jqGrid('getGridParam','data');

// Select all row
var $grid = $("#Grid");
$grid.jqGrid('resetSelection');
var ids = $grid.getDataIDs();
for (var i=0, il=ids.length; i < il; i++) {
    $grid.jqGrid('setSelection',ids[i], false);
}

// 滚动选中行到顶部
var success_row = $grid.find('.success')[0]; //选中行
var row_index   = success_row.rowIndex;      // index
var row_height  = $(success_row).height();   // 行高
$('#' +  parentElementID).find(".ui-jqgrid-bdiv").scrollTop(row_height * (row_index - 1));

/*
iRow(rowIndex)指的是行的索引顺序。
而rowid，是每一行的标示。就是从中间删除几行之后，删除行后面的rowid也不会变，但是iRow已经改变了。
*/

// 根据iRow获取rowid的
var rowid= this.rows[iRow].id; 

// 根据rowid获取iRow的公式：
var iRow = $('#' + rowId)[0].rowIndex;

localReader: {
    id: "row_id"
}

<!-- 修改tomcat的server.xml，增加useBodyEncodingForURI="true"  -->

<Connector port="8080" protocol="HTTP/1.1"   
              connectionTimeout="20000"   
              redirectPort="8443" useBodyEncodingForURI="true" />
              

$.jgrid.ajaxOptions.type = 'post';
//这样可以避免中文查询参数乱码

var i, count, $grid = $("#myTable");
for (i = 0, count = rowArray.length; i < count; i += 1) {
    $grid.jqGrid('setSelection', rowArray[i], false);
}

$('#myGrid').getGridParam("postData").filters;

$('#myGrid').jqGrid('getGridParam', "postData").filters;

//will give you a string
// "{"groupOp":"AND","rules":[{"field":"Name","op":"bw","data":"a"}]}" 
//rules have the search criteria. If i have multiple search criteria, all would be there
// "{"groupOp":"AND","rules":[{"field":"Name","op":"bw","data":"a"},{"field":"Description","op":"bw","data":"d"}]}" 

<script>
function searchGridFn() {
    grid = $("#myGrid");
    var searchFiler = $("#filter").val(), f;

    if (searchFiler.length === 0) {
        grid[0].p.search = false;
        $.extend(grid[0].p.postData, { filters: "" });
    }
    f = { groupOp: "OR", rules: [] };
    f.rules.push({ field: "name", op: "cn", data: searchFiler });
    f.rules.push({ field: "delCol", op: "cn", data: searchFiler });
    grid[0].p.search = true;
    $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
    grid.trigger("reloadGrid", [{ page: 1, current: true}]);
}
</script>


<input id="filter" />
<button id="searchButton" onclick="searchGridFn()">Search</button>