easyui datagrid 搜索框

这篇博客介绍了如何在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>
    <!-- <script type="text/javascript">
        $(document).ready(function() {
            $(window).resize(function() {
                $('#comSpreadData').datagrid('resize');
             });
            var comSpread = new ComSpread();
            comSpread.ctx = path;
            comSpread.createDataGrid();
            
        });
    </script> -->
    <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

var ComSpread = function(){};
ComSpread.prototype.ctx = null;
/**
 * 创建用户信息数据表格
 */
ComSpread.prototype.createDataGrid = function(){
    var that = this;
    var toolbar = [{
        text: '新增用户',
        iconCls: 'icon-add',
        handler: function () {
            $('#comSpreadData').datagrid('clearSelections');//取消所有选中行
            $('#addData-window').window({//打开新增用户界面                    
                href:that.ctx+"/operate.htm?type=add",  
                title:'添加',  
                left:'200px',  
                top:'100px',  
                closed: true,  
                modal: false,  
                cache: false,  
                minimizable:false,  
                maximizable:false,  
                collapsible:false,  
                shadow: false  
            }).window('open');  
        }
    },'-',{
        text: '编辑用户',
        iconCls: 'icon-edit',
        handler: function () {
            var rows =$('#comSpreadData').datagrid('getSelections');
            if(rows.length == 1){
                var id = rows[0].id;
                $('#comSpreadData').datagrid('clearSelections');//取消所有选中行
                $('#updateData-window').window({                    
                    href:that.ctx+"/operate.htm?type=edit&id="+id,  
                    title:'编辑',  
                    left:'200px',  
                    top:'100px',  
                    closed: true,  
                    modal: false,  
                    cache: false,  
                    minimizable:false,  
                    maximizable:false,  
                    collapsible:false,  
                    shadow: false  
                }).window('open');
            }else if(rows.length == 0 || rows == null){
                $.messager.alert("操作提示", "请选择一条记录!");
            }else if(rows.length > 1){
                $.messager.alert("操作提示", "只能选择一条记录!");
            }
        }
    },'-', {
        text: '删除用户',
        iconCls: 'icon-remove',
        handler: function () {
            var rows =$('#comSpreadData').datagrid('getSelections');
            if(rows.length >= 1){
                var ids="";
                for(var i=0;i<rows.length;i++){
                    ids = rows

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值