jqgrid中當前頁數據動態搜索，顯示隱藏對應行

項目需要，動態搜索數據，因爲數據可以一次性一頁加載，同時不想增加服務器壓力，動態搜索決定放到本地進行。

於是寫了下面一段js代碼

$(function() {
	$("#local-dynamic-select").bind('input propertychange', function() {
		// alert($(this).val())
		var searchStr = $(this).val();
		var tableid = $(this).data("tableid");
		var selectrow = $(this).data("selectrow");
		var obj = $("#" + tableid).jqGrid("getRowData");
		for (i = 0; i < obj.length; i++) {
			if (obj[i][selectrow].indexOf(searchStr) < 0) {
				hideRow(tableid, i + 1);//隱藏行的方法
			} else {
				showRow(tableid, i + 1);//顯示行的方法
			}
		}
	});
});

只需要在表單前面加上對應的input就可以，裏面自定義了兩個屬性，方便動態使用

<input type="text" id="local-dynamic-select" data-tableid="grid-table" data-selectrow="selectRow"/>

對應的隱藏顯示行方法，去網上找到了

/**
 * 隱藏行
 */
function hideRow(tableId, rowId) {
	$("#" + tableId).setRowData(rowId, null, {
		display : 'none'
	});
}
/**
 * 顯示行
 */
function showRow(tableId, rowId) {
	$("#" + tableId).setRowData(rowId, null, {
		display : 'block'
	});
}

setRowData方法是jqgrid中更新行的方法，對應三個參數rowid,data, cssprop。(介紹內容從jqgrid中文api中獲取)
rowid：爲行id
data：格式：{name1:value1,name2:value2…} name爲colModel中名稱；
cssprop：如果是string則會使用addClass方法將其加入到行的css中，如果是array或者對象 則會直接加到style屬性中

如此，實現了本地的動態搜索顯示數據，需要的是第一次加載所有的數據到頁面上。

使用過程中出現了一個問題，問題出在顯示行上面，顯示的行不與表頭寬度對應，通過檢查代碼，發現問題出現顯示行時，display：block上面，block使得行的樣式部分變化，於是做出瞭如下改動

/**
 * 顯示行
 */
function showRow(tableId, rowId) {
	$("#" + tableId).setRowData(rowId, null, {
		display : ''
	});
}

問題解決