datagride中条件搜索框

最新推荐文章于 2023-11-14 17:46:38 发布
最新推荐文章于 2023-11-14 17:46:38 发布
阅读量598 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xing_pengfei/article/details/79038484
版权

效果图

这里写图片描述

这里写图片描述

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2017/12/11
  Time: 19:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>查看系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/jqueryEasyui/themes/default/easyui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/jqueryEasyui/themes/icon.css">
    <script src="${pageContext.request.contextPath}/static/jqueryEasyui/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/jqueryEasyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/jqueryEasyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!--定义工具栏-->
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-filter" plain="true" onclick="showAllData()">显示所有数据</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="modifyItem()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadData()">刷新</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="superSearch()" style="float: right">高级查询</a>
    <!--定义带有查询条件的搜索框-->
    <div id="searchBoxWrapper" style="float: left">
        <input id="searchBox" class="easyui-searchbox" searcher="searchByItems"
               style="width:300px" data-options="prompt:'请输入查询内容'">
        </input>
        <div id="searchBy">
            <div data-options="name:'owner'">业务所有者</div>
            <div data-options="name:'company'">专业公司</div>
            <div data-options="name:'develop_depat'">开发部门</div>
            <div data-options="name:'developer'">开发负责人</div>
            <div data-options="name:'developLanguage'">开发语言</div>
            <div data-options="name:'type'">类型</div>
            <div data-options="name:'parent_name'">所属系统中文名称</div>
            <div data-options="name:'parent_english_name'">所属系统英文简称</div>
            <div data-options="name:'system_name'">子系统中文名称</div>
            <div data-options="name:'system_english_name'">子系统英文简称</div>
            <div data-options="name:'system_platform'">系统平台</div>
            <div data-options="name:'status'">状态</div>
            <div data-options="name:'remarks'">备注</div>
        </div>
    </div>
</div>
<!--创建datagrid数据网格-->
<table id="SystemDataGrid" class="easyui-datagrid" fit="true" striped="true" fitColumns="true" autoRowHeight="true"
       url="/system/getAll" iconCls="icon-save" rownumbers="true" pagination="true" singleSelect="true"
       pagination="true" toolbar="#tb">
    <thead>
        <tr>
            <th field="id"  sortable="true" hidden="hidden">id</th>
            <th field="owner" sortable="true">业务所有者</th>
            <th field="company"  sortable="true">专业公司</th>
            <th field="develop_depat"  sortable="true">开发部门</th>
            <th field="developer"  sortable="true">开发负责人</th>
            <th field="developLanguage" sortable="true">开发语言</th>
            <th field="type" sortable="true">类型</th>
            <th field="parent_name"  sortable="true">所属系统中文名称</th>

            <th field="parent_english_name" sortable="true">所属系统英文简称</th>
            <th field="system_name" sortable="true">子系统中文名称</th>
            <th field="system_english_name"  sortable="true">子系统英文简称</th>
            <th field="system_platform"  sortable="true">系统平台</th>
            <th field="status" sortable="true">状态</th>
            <th field="type"  sortable="true">类型</th>
            <th field="remarks" sortable="true">备注</th>
        </tr>
    </thead>
</table>
<!--设置窗口，弹出信息进行修改-->
<div id="modifyWin" class="easyui-window" title="修改系统信息" style="width: 400px;height: auto"
        data-options="iconCls:'icon-save',modal:true,collapsible:false,minizable:false,maxizable:false,closed:true">
    <form id="modifySysForm" method="post">
        <table id="superSearchTable" height="100%">
            <tr>
                <td align="right">业务所有者:</td>
                <td align="left">
                    <!--将id隐藏-->
                    <input type="hidden" id="id" name="id">
                    <input type="text" id="owner" name="owner">
                </td>
            </tr>
            <tr>
                <td align="right">专业公司:</td>
                <td align="left">
                    <select id="company" name="company">
                        <option>平安科技</option>
                        <option>金融一帐通</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">开发部门:</td>
                <td align="left">
                    <input type="text" id="develop_depat" name="develop_depat">
                </td>
            </tr>
            <tr>
                <td align="right">开发负责人:</td>
                <td align="left">
                    <input type="text" id="developer" name="developer">
                </td>
            </tr>
            <tr>
                <td align="right">开发语言:</td>
                <td align="left">
                    <select  id="developLanguage" name="developLanguage">
                        <option value="Java">Java</option>
                        <option value="PHP">PHP</option>
                        <option value="Python">Python</option>
                        <option value="C">C</option>
                        <option value="C#">C#</option>
                        <option value="C++">C++</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">类型:</td>
                <td align="left">
                    <select id="type" name="type">
                        <option value="系统">系统</option>
                        <option value="APP">APP</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">所属系统中文名称:</td>
                <td align="left">
                    <input type="text" id="parent_name" name="parent_name">
                </td>
            </tr>
            <tr>
                <td align="right">所属系统英文简称:</td>
                <td align="left">
                    <input type="text" name="parent_english_name" id="parent_english_name">
                </td>
            </tr>
            <tr>
                <td align="right">子系统中文名称:</td>
                <td align="left">
                    <input type="text" id="system_name" name="system_name">
                </td>
            </tr>
            <tr>
                <td align="right">子系统英文简称:</td>
                <td align="left">
                    <input type="text" name="system_english_name" id="system_english_name">
                </td>
            </tr>
            <tr>
                <td align="right">系统平台:</td>
                <td align="left">
                    <select id="system_platform" name="system_platform">
                        <option value="网站服务器">网站服务器</option>
                        <option value="Android">Android</option>
                        <option value="IOS">IOS</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">状态:</td>
                <td align="left">
                    <select name="status" id="status">
                        <option value="正在使用">正在使用</option>
                        <option value="已下线">已下线</option>
                        <option value="已停用">已停用</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">备注:</td>
                <td align="left">
                    <textarea name="remarks" id="remarks" rows="2" cols="12"></textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <a id="confirmBtn" class="easyui-linkbutton" icon="icon-save"
                    href="javascript:void(0)" onclick="saveInfo();">保存</a>
                    <a class="easyui-linkbutton" icon="icon-cancel"
                       href="javascript:void(0)" onclick="cancelModify();">取消</a>
                </td>
            </tr>
        </table>
    </form>
</div>
<!--高级查询表单-->
<script>
        $('#searchBox').searchbox({
            menu:'#searchBy'
        });
    var currentState;
    //进行查询后可点击显示所有数据，即是无条件显示所有系统数据
    function showAllData() {
        $("#SystemDataGrid").datagrid({url:"/system/getAll"})
    }
    //修改工具方法
    function modifyItem(){
        currentState="modify";
        var selections=$("#SystemDataGrid").datagrid("getSelections");
        if (selections.length==0){
            $.messager.alert("提示","请选中一项进行修改！");
        }else if (selections.length>1){
            $.messager.alert("提示","每次只能修改一条信息！");
        }else{
            $("#modifyWin").window({
               title:'修改系统信息'
            });
            $("#modifyWin").window('open');
            var selection=selections[0];
            $("#id").val(selection.id);
            $("#owner").val(selection.owner);
            $("#develop_depat").val(selection.develop_depat);
            $("#developer").val(selection.developer);
            $("#developLanguage").val(selection.developLanguage);
            $("#type").val(selection.type);
            $("#parent_name").val(selection.parent_name);
            $("#parent_english_name").val(selection.parent_english_name);
            $("#system_name").val(selection.system_name);
            $("#system_english_name").val(selection.system_english_name);
            $("#system_platform").val(selection.system_platform);
            $("#status").val(selection.status);
            $("#remarks").val(selection.remarks);
        }
    }
    function saveInfo() {
        if (currentState=="modify"){
            //修改信息与后台交互信息
            $('#modifySysForm').form('submit',{
                url:"/system/modify",
                onSubmit:function () {
                    if ($("#id").val().length<1 || $("#owner").val().length<1 || $("#company").val().length<1 || $("#develop_depat").val().length<1||
                        $("#developer").val().length<1||$("#developLanguage").val().length<1|| $("#type").val().length<1 || $("#parent_name").val().length<1
                        ||$("#parent_english_name").val().length<1 || $("#system_name").val().length<1 || $("#system_english_name").val().length<1 ||$("#system_platform").val().length<1
                        ||$("#status").val().length<1||$("#remarks").val().length<1){
                        $.messager.alert("提示","所有字段均不能为空！");
                        return false;
                    }
                },
                success:function () {
                    //data是返回值
                    $.messager.alert("提示","修改成功！");
                    $('#modifyWin').window('close');
                    $('#SystemDataGrid').datagrid('reload');
                }
            });
        }else if (currentState=="search"){
//            高级查询
//            $('#modifySysForm').form('submit',{"url":"/system/superSearch"})
            $("#SystemDataGrid").datagrid({
                url:'/system/superSearch'
            });
        }
        $('#modifyWin').window('close');
    }
    function cancelModify() {
        $("#modifyWin").window('close');
    }
    //工具栏刷新按钮方法
    function reloadData() {
        $('#SystemDataGrid').datagrid('reload');
    }
    //搜索框对应的方法--value:输入的数据   condition：下拉框字段属性
    function searchByItems(value,condition) {
//        alert("测试--value:"+value+"---condition:"+condition);
        $("#SystemDataGrid").datagrid({
            url:'/system/searchByItems?searchValue='+value+'&searchType='+condition
        });
        //搜索数据后清空搜索框
        $("#searchBox").searchbox('clear');
    }
    //工具栏高级查询方法
    function superSearch() {
        currentState="search";
        $("#modifyWin").window({
            title:'高级查询'
        });
        $("#modifyWin").window('open');
    }
</script>
</body>
</html>
午夜学徒xpf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui datagrid 搜索按钮 搜索后进入表格
qq_21240787的博客
01-21 364
datagrid在进行分页时候，出现了点击搜索按钮，按钮进入了表格中，可能是easyui的一个机制导致的，所以，应该使用一个添加工具栏的方式来解决。 &lt;table id="searchdetail"&gt; &lt;div id="tb"&gt; &lt;div style="font-size:10px;width: 100%;"&gt; ..
关于dataGrid查询按钮的实现
weixin_30940783的博客
07-25 118
纠结了好久的数据查询，今天终于有点进展，虽然还没有能够做出登陆程序，但是我觉得已经非常接近了。 domain server.cs这个类，里面的成员，你会发现，里面有查询，修改，删除，更新这些功能 public IQueryable<contents> GetContents() { return this.ObjectContext...
easyui 快速入门之第四章 DataGrid数据查询
qq_61313896的博客
05-07 854
一：DataGrid（数据表格） DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。 DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用案例： 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。 通过<table>标签创建DataGrid控件。在表格内使用<th>...
EasyUI Datagrid 数据网格
mrdu_somefun的博客
12-09 1187
扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。 数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等
vue3 实现多条件搜索
最新发布
m0_64590669的博客
11-14 753
vue3 实现多条件搜索
flex中Datagride嵌套checkbox
03-06
对于flex中的列表经常要嵌套一些checkbox，弄了个外部的as用起来很方便；
datagride样式
09-12
设置datagrid的基本样式，列头，行头
datagride 固定列，自带分页
03-10
datagride 固定列，自带分页，文件中为源码
在DataGrid控件中实现双标题显示
08-23
在DataGrid控件中实现双标题显示
在DataGrid中分页的情况下如何删除数据
08-18
在DataGrid中分页的情况下如何删除数据
在jquery easyui中的datagrid中添加searchbox!
08-12
研究了好久，终于成功在jquery easyui中的datagrid中添加searchbox!
jeecg的各种查询
qq_38625056的博客
10-11 4814
1.直接查询 最简单，直接在标签中加上query="true" 如&lt;t:dgCol title="执行状态"  field="exeStatus" dictionary="exeStatus" queryMode="single" query="true"  width="120"&gt;&lt;/t:dgCol&gt; 2.
easyui datagrid之查询功能
weixin_45576466的博客
06-27 813
easyui 目录一、 前言二、easyui布局三、easyui后台查询四、datagrid带条件查询五、结果图六、总结 一、 前言 这次给大家分享的是要在以下链接博客的tabs控件的基础上增加查询功能，希望能够帮助到大家。 二、easyui布局 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html>
DataGride绑定
dike_5354521的专栏
10-16 457
1： 在DataGride中嵌套Button的运用  修改的时候：修改的Button 的CommandName为Edit  保存的时候：保存的Button 的CommandName为Update  取消的时候：保存的Button 的CommandName为Cancel  取消的时候：保存的Button 的CommandName为Delete  其中对应的事件为：  priv
datagrid之查询
lszzz_的博客
10-12 152
在上篇文章Tree基础上加代码 一、点击左侧菜单；右侧Tab页显示相关信息 1、存放右侧相关信息页面 建立userManage.jsp界面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or
根据已经加载好的datagrid数据，通过条件查询进行重新根据查询的条件进行加载：（无需通过后台再次查询）
luanjun218的博客
01-28 4253
根据已经加载好的datagrid数据，通过条件查询进行重新根据查询的条件进行加载：                                              商品编号:                             name="goodsNumber" value="">          
Mysql JPA 一个搜索框搜索多个条件查询
隐心咒Amor的博客
09-14 3200
一个输入框多个条件查询 (最简单的写法…) 首先在页面放一个输入框 name属性直接随便写一个就好,最主要的是后台能接收到就ok 由于我使用的Jpa 所以使用Q类查询 使用mybatis的就用 Example 那个查询条件查询就行了 QStudent qStudent = QStudent .student; Predicate predicate = qStudent .isNotNull().or(qInvite.isNull()); if (StrUtil.i
TP5+Layui 多条件搜索框 时间范围搜索
lihuks的博客
01-25 1653
最近开发需要用到开始时间到结束时间中间的时间范围搜索，加上姓名、电话多条件搜索，在网上找了一些参考，加上自己的修改最终完成，在这里记录一下，加深记忆方便以后直接用。
easyui Datagrid+searchbox 实现搜索功能
热门推荐
Stay hungry,stay foolish!
10-11 5万+
这是

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值