easyui datagrid 搜索框

最新推荐文章于 2022-05-07 20:24:01 发布

pijinzhou

最新推荐文章于 2022-05-07 20:24:01 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/u013421749/article/details/46536941

版权

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

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

*功能按钮在同一行

引入页

<%@ 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