easyui datagrid 搜索框

最新推荐文章于 2022-05-09 17:22:30 发布

原创最新推荐文章于 2022-05-09 17:22:30 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何在EasyUI的datagrid中实现搜索功能。通过创建工具栏，添加搜索框和搜索按钮，结合JavaScript处理搜索事件，实现了对数据表格的条件过滤，包括公司名称和公司编码的搜索。此外，还提供了清空搜索框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*功能按钮在同一行

引入页

<%@ page contentType="text/html; charset=UTF-8" language="java"
   import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
   String path = request.getContextPath();
   String root = request.getScheme() + "://" + request.getServerName()
           + ":" + request.getServerPort() + path + "/";
   String newsPath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">
var root = "<%=path%>/"; //js中存放当前页面的root路径方便调用
var urlAddress = "<%=urlAddress%>";
var path = "<%=path%>";
</script>
<script type="text/javascript"
   src="<%=path%>/Web/common/js/jquery-1.4.4.min.js"></script>

数据列表页

<%@ page contentType="text/html; charset=UTF-8" language="java"

import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/Web/common/page/jqueryadmin.jsp"%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>推广合作用户管理</title>
<link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/easyui.css" />
<link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/icon.css">
       <link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/window.css" />
   <link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/datagrid.css" />
<script type="text/javascript"
   src="<%=path%>/Web/comspread/js/comspread.js"></script>
<script type="text/javascript"
   src="<%=path%>/Web/comspread/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
   src="<%=path%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
   <table id="comSpreadData" class="easyui-datagrid" style="width:auto;"></table>
   
   <div id="addData-window" style="width:265px;height:175px;font-size: 16" title="添加数据">
   </div>
   <div id="updateData-window" style="width:350px;height:230px;font-size: 16" title="更新数据">
   </div>
   <script type="text/javascript">
   $(document).ready(function (){
       //判断是否从注册页面来的跳转
       <c:if test="${ empty sessionScope.manage }">
           //如果非法链接
           window.location.href = "<%=path%>/system/login.shtml";
       </c:if>
       <c:if test="${not empty sessionScope.manage}">
           $(window).resize(function() {
               $('#comSpreadData').datagrid('resize');
           });
           var comSpread = new ComSpread();
           comSpread.ctx = path;
           comSpread.createDataGrid();
       </c:if>
   });
   </script>
</body>

</html>

数据加载js

弹出层

<%@ page contentType="text/html; charset=UTF-8" language="java"
   import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
   String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">
var path = "<%=path%>";
</script>
<div align="center">
   <c:if test="${type == 'add'}">
       <form action="<%=path%>/addOrUpdate.htm" method="post"
           id="addform">
           <table>
           <tr>
               <td>公司名称:</td>
               <td><input
                   type="text" id="addname" name="a.name"
                   placeholder="请输入公司名称" maxlength="10"></td>
           </tr>
           <tr>
                   <td height="15"></td>
                   <td></td>
           </tr>
           <tr>
               <td align="center"><input
                   type="button" title="新增" style="height: 25px" value="保存"
                   onclick='addform();'></td>
               <td align="center"><input type="button" value="关闭"
                   style="height: 25px" onclick="$('#addData-window').window('close')"></td>
           </tr>
           <span id="warn1" style="color: red"></span>
           </table>
           <table>
               <tr>
                       <td><span style="color:green">温馨提示：</span></td>
                       <td><span style="color:red">公司名称不能超过5个汉字</span></td>
               </tr>
           </table>
       </form>
   </c:if>
   <c:if test="${type == 'edit'}">
       <form action="<%=path%>/addOrUpdatecomspread.htm" method="post"
           id="updateform">
           <input name="browserComSpread.id" id="id" value="${comSpreadRow.id }"
               type="hidden">
           <table align="center">
               <tr>
                   <td></td>
                   <td></td>
               </tr>
               <tr>
                   <td>公司名称:</td>
                   <td><input
                       type="text" id="updatename" value="${comSpreadRow.name }"
                       name="a.name" maxlength="10"></td>
               </tr>
               <tr>
                   <td>公司编码:</td>
                   <td>${comSpreadRow.code }</td>
               </tr>
               <tr>
                   <td>是否可用:</td>
                   <td><select
                       name="a.inuse">
                           <c:if test="${comSpreadRow.inuse != '0'}">
                               <option value="1" selected="selected">可用</option>
                               <option value="0">禁用</option>
                           </c:if>
                           <c:if test="${comSpreadRow.inuse == '0'}">
                               <option value="1">可用</option>
                               <option value="0" selected="selected">禁用</option>
                           </c:if>
                   </select></td>
               </tr>
               <tr>
                   <td>创建时间:</td>
                   <td>${comSpreadRow.createTime }</td>
               </tr>
               <c:if test="${comSpreadRow.updateTime != 'null'}">
                   <tr style="tdst-style: none;">
                       <td>更新时间:</td>
                       <td>${comSpreadRow.updateTime }</td>
                   </tr>
               </c:if>
               <tr>
                   <td height="15"></td>
                   <td></td>
               </tr>
               <tr>
                   <td align="center"><input type="button" title="新增" style="height: 25px" value="保存"   onclick='updateform();'></td>
                   <td align="center"><input type="button" value="关闭" style="height: 25px" onclick="$('#updateData-window').window('close')"></td>
               </tr>
               <span id="warn2" style="color: red"></span>
           </table>
       </form>
   </c:if>
</div>
<script type="text/javascript">
$(document).ready(function (){
   //判断是否从注册页面来的跳转
   <c:if test="${ empty sessionScope.manage }">
       //如果非法链接
       window.location.href = "<%=path%>/***/login.shtml";
   </c:if>
});
function updateform(){
   var id = $("#id").val();
   var name = $("#updatename").val();
   if(isNull(name)){
       $("#warn2").html("请输入公司名称");
   }else{
       $.ajax({
               type: "get",
               url: path+"/exitcomspreadname.htm",
               data: {"a.name":name,"type":"up","a.id":id},
               dataType: "json",
               async: false,
               error: function() {
                    flag = false;
               },
               success: function(data){
                     if(data.code == "200"){
                         $("#warn2").html("");
                       $("#updateform").submit();
                    }else if(data.code == "500"){
                       $("#warn2").html("该公司名已被占用");
                       $("#updatename").focus();
                     }
              }
       });
   }
}
function addform(){
   var name = $("#addname").val();
   if(isNull(name)){
       $("#warn1").html("请输入公司名称");
   }else{
       $.ajax({
               type: "get",
               url: path+"/exitcomspreadname.htm",
               data: {"a.name":name,"type":"add"},
               dataType: "json",
               async: false,
               error: function() {
                    flag = false;
               },
               success: function(data){
                     if(data.code == "200"){
                         $("#warn1").html("");
                       $("#addform").submit();
                    }else if(data.code == "500"){
                       $("#warn1").html("该公司名已被占用");
                     }
              }
       });
   }
}
function isNull( str )   {
   if ( str == "" ) {
       return true;
   }
   var regu = "^[ ]+$";
   var re = new RegExp(regu);
   return re.test(str);
}
</script>

*功能按钮分行

数据列表页

<%@ page contentType="text/html; charset=UTF-8" language="java"
   import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/Web/common/page/jqueryadmin.jsp"%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="万家兄弟–投融资服务平台，投资理财 |P2P网贷 |网贷平台 |网络贷款 |P2P投资理财 |深圳P2P平台，万家兄弟_" />
<meta name="description" content="万家兄弟-(www.vanbrother.com) 服务热线: 4008-939-039.【万家兄弟】是一家专业、安全、稳健的P2P投资理财网贷平台，为投资者、融资者提供网络贷款、融资服务；致力于创建中国最具市场效率的中小微企业投融市场。 " />
<title>推广合作用户管理</title>
<link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/easyui.css" />
<link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/icon.css">
<link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/datagrid.css" />
<link rel="stylesheet" type="text/css"
   href="<%=path%>/Web/comspread/css/WdatePicker.css" />
<script type="text/javascript"
   src="<%=path%>/Web/comspread/js/comspreadlist.js"></script>
<script type="text/javascript"
   src="<%=path%>/Web/comspread/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
   src="<%=path%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
   src="<%=path%>/Web/comspread/js/WdatePicker.js"></script>
</head>
<body>
   <table id="comSpreadData" class="easyui-datagrid"></table>
   <div id="searchbar">
       公司名称:<input type="text" id="search_name" maxlength="10"/>
       公司编码:<input type="text" id="search_code" style="width:240px" maxlength="32"/>
       创建时间<input type="text" id="search_createtime_start" onfocus="WdatePicker({lang:'zh-cn'})"/>
       -<input type="text" id="search_createtime_end" onfocus="WdatePicker({lang:'zh-cn'})"/>
       <input type="button" value="搜索" onclick="new ComSpread().searchdata()" />
       <input type="button" value="清空" onclick="new ComSpread().cleardata()" />
   </div>
   <div id="addData-window" style="width:400px;height:230px;font-size: 16" title="添加数据">
   </div>
   <div id="updateData-window" style="width:400px;height:300px;font-size: 16" title="更新数据">
   </div>
   <script type="text/javascript">
   $(document).ready(function (){
       //判断是否从注册页面来的跳转
       <c:if test="${ empty sessionScope.manage }">
           //如果非法链接
           window.location.href = "<%=path%>/system/login.shtml";
       </c:if>
       <c:if test="${not empty sessionScope.manage}">
           $(window).resize(function() {
               $('#comSpreadData').datagrid('resize');
           });
           var comSpread = new ComSpread();
           comSpread.ctx = path;
           comSpread.createDataGrid();
       </c:if>
   });
   </script>
</body>
</html>

数据加载js