combogrid实现分页、动态搜索、过滤手动输入
狄玮
本篇文章主要记录了combogrid实现分页、动态搜索以及过滤手动输入的实现过程。
关于过滤手动输入内容，只有当输入的内容是数据中不存在的项目时才会被过滤掉。
以下js片段是我封装的函数：
function createComboBox(ele){
var selected; //当前选择项
$('.customDataTypeCode:last').combogrid({
panelWidth: 350,
fitColumns: true,
striped: true, //是否各行变色
editable: true,
pagination: true, //是否分页
rownumbers: true, //是否显示行号
collapsible: false, //是否可折叠的
fit: true, //自动大小
method: 'get',
idField : 'dataTypeCode',
textField : 'dataTypeCode',
url : '/ops/dataTypeConfig/findByDataTypeCode2',
columns : [ [ {
field : 'dataTypeCode',
title : '数据类型',
width : 50
}, {
field : 'remark',
title : '备注',
width : 50
} ] ],
onChange: function () {
selected = ele.combogrid('grid').datagrid('getSelected');
},
onSelect: function () {
selected = ele.combogrid('grid').datagrid('getSelected');
},
onHidePanel: function () {
var editText = $(this).combogrid('getValue');
if (selected == null || selected.dataTypeCode != editText) {//没有选择或者选项不相等时清除内容
$(this).combogrid('setValue', '');
}
artChanged = false;
selectRow = null;
},
keyHandler: {
up: function () { //【向上键】押下处理
//取得选中行
var selected = ele.combogrid('grid').datagrid('getSelected');
if (selected) {
//取得选中行的rowIndex
var index = ele.combogrid('grid').datagrid('getRowIndex', selected);
//向上移动到第一行为止
if (index > 0) {
ele.combogrid('grid').datagrid('selectRow', index - 1);
}
} else {
var rows = ele.combogrid('grid').datagrid('getRows');
ele.combogrid('grid').datagrid('selectRow', rows.length - 1);
}
},
down: function () { //【向下键】押下处理
//取得选中行
selected = ele.combogrid('grid').datagrid('getSelected');
if (selected) {
//取得选中行的rowIndex
var index = ele.combogrid('grid').datagrid('getRowIndex', selected);
//向下移动到当页最后一行为止
if (index < ele.combogrid('grid').datagrid('getData').rows.length - 1) {
ele.combogrid('grid').datagrid('selectRow', index + 1);
}
} else {
ele.combogrid('grid').datagrid('selectRow', 0);
}
},
enter: function () { //【回车键】押下处理
//取得选中行
selected = ele.combogrid('grid').datagrid('getSelected');
if (!selected) {
ele.combogrid('grid').datagrid('selectRow', 0);
}
//选中后让下拉表格消失
ele.combogrid('hidePanel');
},
query: function (keyword) { //【动态搜索】处理
//动态搜索
ele.combogrid("grid").datagrid("reload", { 'keyword': keyword });
ele.combogrid("setValue", keyword);
//设置查询参数
var queryParams = ele.combogrid("grid").datagrid('options').queryParams;
queryParams.dataTypeCode = keyword;
ele.combogrid("grid").datagrid('options').queryParams = queryParams;
//重新加载
ele.combogrid("grid").datagrid("reload");
ele.combogrid("setValue", keyword);
}
}
});
//取得分页组件对象
var pager = ele.combogrid('grid').datagrid('getPager');
if (pager) {
$(pager).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '第{from}-{to}条 共 {total} 条'
});
}
}关于动态搜索，如果检索关键词为中文，检索过程中出现乱码，可在后台对关键词进行重新编码
if(null!=dataTypeCode) {
dataTypeCode=new String((dataTypeCode).getBytes("iso-8859-1"),"utf-8");
}
优化（传入后台的检索关键字为‘q’）
function createComboBox(ele){
$('.customDataTypeCode:last').combogrid({
panelWidth: 350,
fitColumns: true,
striped: true, //是否各行变色
editable: true,
pagination: true, //是否分页
rownumbers: true, //是否显示行号
collapsible: false, //是否可折叠的
fit: true, //自动大小
mode : 'remote',
method: 'get',
idField : 'dataTypeCode',
textField : 'dataTypeCode',
url : '/ops/dataTypeConfig/searchDataTypeConfig',
columns : [ [ {
field : 'dataTypeCode',
title : '数据类型',
width : 50
}, {
field : 'remark',
title : '备注',
width : 50
} ] ],
onHidePanel: function (param) {
var editText = $(this).combogrid('getValue');
var selected = ele.combogrid('grid').datagrid('getSelected');
if (selected == null || selected.dataTypeCode != editText) {//没有选择或者选项不相等时清除内容
//置空输入框内容和检索参数
$(this).combogrid('setValue', '');
$(this).combogrid('grid').datagrid('options').queryParams.q = null;
}
},
onBeforeLoad:function(param){
if(param.q){
param['q'] =encodeURI(param.q);//避免传输过程中的中文乱码。后台还要解码 q = URLDecoder.decode(q, "utf-8");
}
}
});
//取得分页组件对象
var pager = ele.combogrid('grid').datagrid('getPager');
if (pager) {
$(pager).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '第{from}-{to}条 共 {total} 条'
});
}
}js优化后检索关键词在后台的解码方式为：
if (null != q) {
q = URLDecoder.decode(q, "utf-8");
}
分页和动态搜索参考了下面这位博友的文章：
过滤手动输入参考了这篇文章：
类似资料：