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

 更新时间:2019年09月09日 11:53:51   作者:落成  
这篇文章主要介绍了使用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实现查询条件的后端传递并自动刷新表格的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • jquery遍历函数siblings()用法实例

    jquery遍历函数siblings()用法实例

    这篇文章主要介绍了jquery遍历函数siblings()用法,结合实例形式较为详细的分析了jquery的siblings函数用于元素遍历的相关技巧,需要的朋友可以参考下
    2015-12-12
  • Jquery中Event对象属性小结

    Jquery中Event对象属性小结

    这篇文章主要介绍了Jquery中Event对象属性的操作方法的总结,非常的详细,是篇十分不错的文章,这里推荐给大家。
    2015-02-02
  • jquery animate实现鼠标放上去显示离开隐藏效果

    jquery animate实现鼠标放上去显示离开隐藏效果

    本文为大家介绍下使用jquery animate实现鼠标放上去显示,离开就隐藏的效果,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • jquery获取input type=text中的值的各种方式(总结)

    jquery获取input type=text中的值的各种方式(总结)

    下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • jQuery lazyload 的重复加载错误以及修复方法

    jQuery lazyload 的重复加载错误以及修复方法

    jQuery lazyload是一款延迟加载图片的的插件,原意是按需加载,当图片出现在可视区域时进行加载,但是官方的插件经过firebug的检测可知,并不能节省流量开支,反而有重复加载的现象。
    2010-11-11
  • jQuery实现大图轮播

    jQuery实现大图轮播

    本文主要分享了jQuery实现大图轮播的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jquery原理以及学习技巧介绍

    jquery原理以及学习技巧介绍

    JQuery上手简单,也很容易学,即使是刚接触JQuery的开发人员,借助JQuery手册,也很快能在项目中使用开发,这篇文章针对jquery原理以及学习技巧进行介绍,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery之过滤元素操作小结

    jQuery之过滤元素操作小结

    这篇文章主要介绍了jQuery中的过滤元素操作。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jquery+css3实现的经典弹出层效果示例

    jquery+css3实现的经典弹出层效果示例

    这篇文章主要介绍了jquery+css3实现的经典弹出层效果,结合实例形式分析了jquery+css3实现弹出层具体原理、步骤与相关操作技巧,需要的朋友可以参考下
    2020-05-05
  • JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)

    JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)

    很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题。
    2011-03-03

最新评论