OA项目（查询搜索功能）

最新推荐文章于 2024-09-24 14:27:52 发布

踏浪

最新推荐文章于 2024-09-24 14:27:52 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/u010559460/article/details/94163303

版权

这篇教程详细介绍了如何在OA项目中基于ExtJS实现查询搜索功能，包括单值查询和复合查询。讲解了Ext.ux.form.SearchField插件的使用限制，并提供了复合查询的实现步骤，涉及前端设计、应用程序配置、后端接口修改等多个方面。

摘要由CSDN通过智能技术生成

介绍：本次教程是基于上一篇 “OA项目（增删改查功能基本实现---下）” 之上进行编写的。

本次主要介绍的是如何给（gridpanel 类型）列表添加搜索功能 ?

一、单值查询（即只查询某一列）

使用到的插件： Ext.ux.form.SearchField，这个插件是ExtJs 的扩展插件。

详情使用可以参考：https://blog.csdn.net/qiuzhping/article/details/41811655

由于该插件只能查询某一列，功能比较单一，所以本次教程就不介绍了。

PS：https://blog.csdn.net/qiuzhping/article/details/41811655 这个链接中的教程有写小问题，需要在 SearchField.js 文件中的第22行添加如下代码：否则会出现 EXTJS 4 MVC模式VIEW中searchfield指定store无效的问题me.store.proxy is undefined 的问题，该问题解决方案，可以参考：https://www.xuebuyuan.com/344384.html

if(typeof(me.store.isStore) == 'undefined')
        {
            me.store = Ext.data.StoreManager.get(me.store);
        }

二、复合查询（即能同时查询某几列）

列表效果图：

点击查询按钮效果图：

查询效果图：

三、前端设计

1、新建 webapp / ext-4.0 / ux / grid / feature /Searching.js 文件，由于文件内容太多了，所以放到本教程最后面

2、在应用程序的 app.js 文件中添加如下内容，

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ext-4.0'+'/ux');
Ext.require([
	'Ext.ux.grid.feature.Searching'
]);

3、显示列表的页面（webapp / app / view / role / List.js）中，添加如下内容：

features: [
        {
            ftype: 'searching',
            minChars: 2,
            width: 150,
            mode: 'remote',//远程还是本地store
            position: 'top/bottom',//状态栏还是工具栏
            iconCls: 'icon-zoom',//图标
            menuStyle: 'checkbox/radiobox',//单选还是多选
            showSelectAll: true,   //是否显示全选按钮
            //checkIndexes: ["name"],       //默认是否选择所有的列
            checkIndexes: [],       //默认是否选择所有的列
            //disableIndexes: ["id"]          //禁止那些列参与查询
        }
    ],

PS: ①、此处是用来定义查询插件的

②、iconCls: 'icon-zoom',//图标这个小图标需要在相应的css 文件中定义一下，内容如：

.icon-zoom {
	background-image: url(../img/icon/fam/zoom.png) !important;
}

4、在 action 类中添加和修改如下内容：

package cn.oa.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.ConvertUtils;
import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.opensymphony.xwork2.ActionSupport;

import cn.oa.model.Role;
import cn.oa.service.RoleService;
import net.sf.json.JSONObject;
@Controller
@Scope("prototype")
public class RoleAction extends ActionSupport{
    
    @Resource
    private RoleService roleService;
    private Role role;
    private String ids;
    private int start;
    private int limit;
    private String[] fields; //用于接收多个需要查询的字段名
    private String query;    //用于接收查询字段值
    
  ..........................此处省略 get / set 方法............................................
    /**
     *  列表
     */
    public void listByPage() throws Exception {
        //0.拼接查询字符串
        String conditions = null;
        if(query == null || query.trim().equals("")){
            conditions = "";
        }else {
            conditions = " WHE