使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法

搜索框如下：

  • 通过datagrid的load方法直接传递参数并自动刷新表格
  • 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中

js代码（搜索按钮的点击事件部分）：

$("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件
      if($("#offerid").val() != ""){//判断id搜索框的值是否为空
        $("#dg").datagrid('load',{//调用load方法传递参数，从服务器加载新数据
          "offer.id":$("#offerid").val(),//将搜索框的值赋给offer.id并传到后端
          "flag":'qid',//传递一个flag值用于判断执行何种操作
          });  

        }else if($("#offername").val() != ""){//判断name搜素框的值是否为空
          $.post("${pageContext.request.contextPath}/OfferServlet",//通过ajax的post函数传递flag和offername值
              {flag:"qname","offer.name":$("#offername").val()},
              function(ons){//回调函数处理
                var json = JSON.parse(ons);//将返回的字符串转换为JSON
                $('#dg').datagrid('loadData',json);//将表格数据初始化方式更新
              });
        }

      });

jsp代码（只包含按钮和搜索框的toolbar）：

 <div id="toolbar">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newOffer()">新增商品</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editOffer()">编辑商品</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyOffer()">删除商品</a><br>
    商品ID：<input type="text" name="offer.id" id="offerid" />
    商品名称：<input type="text" id="offername"/>
    <a id="standardQueryBtn" href="javascript:void(0)" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
  </div>

总结

以上所述是小编给大家介绍的使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • jQuery EasyUI中对表格进行编辑的实现代码

    jQuery EasyUI中对表格进行编辑的实现代码

    效果图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

  • 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱.如下面图片所示: 刚开始打开时页面布局正确: 此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图: 但是首页选项卡的页面是正常的. 为了便于解释说明,这里用第一个选项卡代表 "首页",第二个选项卡代表"子菜单10" 出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • easyui window refresh 刷新两次的解决方法(推荐)

    这样写刷新两次 $("#windowid").window('refresh','url01.php'); $("#windowid").window('open'); 这样写刷新一次 $("#windowid").window('open'); $("#windowid").window('refresh','url01.php'); 以上这篇easyui window refresh 刷新两次的解决方法(推荐)就是小编分享

  • Java easyui树形表格TreeGrid的实现代码

    Java easyui树形表格TreeGrid的实现代码

    自己搞了一下午,终于用JAVA实现了数据网格.记录一下实现的代码.(PS:此处的easyui是1.5版本,楼主只贴了核心的代码) 实现图 JSP页面 <head> //权限列表 $( document ).ready(function(){ var parentId = 0; $('#tt').treegrid({ url:'queryPrivilege.action?parentId='+parentId, idField:'id', treeField:'RecordStatus', co

  • jQuery easyui刷新当前tabs的方法

    更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs').tabs('getSelected'); $('#frame_tabs').tabs('update',{ tab:current_tab, options : { content : '<iframe scrolling="auto"

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults,用 $.fn.combogrid.defaults 重写了 defaults . 依赖 combo datagrid 用法 复制代码 代码如下: <select id="cc" name="dept" style="width:250px;"></select> 复制代码 代码如下: <input id="cc

  • 使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法

    搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是否为空 $("#dg").datagrid

  • 使用easyui从servlet传递json数据到前端页面的两种方法

    两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub ​ request.setCharacterEncoding("

  • Spring Data JPA实现动态查询的两种方法

    前言 一般在写业务接口的过程中,很有可能需要实现可以动态组合各种查询条件的接口.如果我们根据一种查询条件组合一个方法的做法来写,那么将会有大量方法存在,繁琐,维护起来相当困难.想要实现动态查询,其实就是要实现拼接SQL语句.无论实现如何复杂,基本都是包括select的字段,from或者join的表,where或者having的条件.在Spring Data JPA有两种方法可以实现查询条件的动态查询,两种方法都用到了Criteria API. Criteria API 这套API可用于构建对数据

  • Android Intent传递对象的两种方法(Serializable,Parcelable)详细介绍

    Android Intent传递对象的两种方法(Serializable,Parcelable)详细介绍

    Android Intent传递对象的两种方法(Serializable,Parcelable)详细介绍 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是Bundle.putParcelable(Key, Object);当然这些Object是有一定的条件的,前者是实现了Serializable接口,而后者是实现了Parcelable接口,为了让大家更容易理解我还是照常写

  • asp.net连接查询SQL数据库并把结果显示在网页上(2种方法)

    在ASP.NET中,使用C#连接SQL数据库,并使用SQL语句查询,以前从来没有接触过C#,最近用到了,摸索了两天终于运行起来了,Mark一下,不喜勿喷 有两种方法:(说的是第一种方法不安全,我也不清楚^_^) 第一种方法: 复制代码 代码如下: //建立ASP.NET Web 应用程序,直接在Page_load函数中加入一下代码,貌似就可以用了 public void Page_Load(object sender, EventArgs e) { using (SqlConnection co

  • Angular 向组件传递模板的两种方法

    最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时候,组件的一部分模板就需要由调用方提供. 在 React 里面,这种需求挺简单的,只要实现一个 date => Element 这样的函数就好了,但是 Angular 模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能. 第一种方式 <ng-content> <ng-conten

  • JS实现把一个页面层数据传递到另一个页面的两种方式

    由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递cookie页面的html,此处命名为a.html 请输入用户名和密码: <input id="userName" type="text" /> <input id="passwords" type="password&q

  • 微信小程序页面间值传递的两种方法

    微信小程序页面间值传递的两种方法

    一:url带参数传递 与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml: <!--index.wxml--> <view class="container"> <!-- 使用navigator组件 --> <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>

  • elasticsearch python 查询的两种方法

    elasticsearch python 查询的两种方法,具体内容如下所述: from elasticsearch import Elasticsearch es = Elasticsearch res1 = es.search(index="2018-07-31", body={"query": {"match_all": {}}}) print(es1) {'_shards': {'failed': 0, 'skipped': 0, 'suc

  • MySql逗号拼接字符串查询的两种方法

    下面两个函数的使用和FIND_IN_SET一样,使用时只需要把FIND_IN_SET换成FIND_PART_IN_SET或FIND_ALL_PART_IN_SET 例如某字段里是为1,2,3,4,5 使用方法: 第一种,传入1,3,6  可以查出来 select * from XXX where FIND_PART_IN_SET('1,3,6','1,2,3,4,5') 第二种,传入1,3,6  查不出来 select * from XXX where FIND_ALL_PART_IN_SET(

随机推荐