项目需要,动态搜索数据,因为数据可以一次性一页加载,同时不想增加服务器压力,动态搜索决定放到本地进行。
于是写了下面一段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 : ''
});
}
问题解决