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");}

分页和动态搜索参考了下面这位博友的文章：

分页、动态搜索

过滤手动输入参考了这篇文章：

过滤手动输入