使用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实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
JS继承用法实例分析
Feb 05 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
微信小程序实现点击页面出现文字
Sep 21 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
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python自动扫雷实现方法
2015/07/25 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python队列queue模块详解
2018/04/27 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python