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


Posted in Javascript onSeptember 09, 2019

搜索框如下:

  • 通过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实现查询条件的后端传递并自动刷新表格的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
js实现不重复导入的方法
Mar 02 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
实例讲解React 组件
Jul 07 Javascript
layui使用及简单的三级联动实现教程
Dec 01 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 #Javascript
微信小程序HTTP请求从0到1封装
Sep 09 #Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 #Javascript
世界上最短的数字判断js代码
Sep 09 #Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 #Javascript
javascript删除数组元素的七个方法示例
Sep 09 #Javascript
微信小程序 select 下拉框组件功能
Sep 09 #Javascript
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python网站验证码识别
2016/01/25 Python
Python测试模块doctest使用解析
2019/08/10 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python制作抽奖程序代码详解
2021/01/15 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
c++工程师面试问题
2013/08/04 面试题
美术课外活动总结
2014/07/08 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
详解flex:1什么意思
2022/07/23 HTML / CSS