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 : ''
	});
}

问题解决

    原文作者:野蜂
    原文地址: https://blog.csdn.net/diaomeng11/article/details/78601563
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞