jquery客户端保存查询条件

最新推荐文章于 2023-01-12 10:24:38 发布

xuan_0602

最新推荐文章于 2023-01-12 10:24:38 发布

阅读量2.6k

点赞数

分类专栏： javascript 文章标签： jquery function date 编程 xml url

本文链接：https://blog.csdn.net/xuan_0602/article/details/7440444

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在用jquery编程中，会遇到客户端需要保存查询条件，jquery官网提供了实现方法，具体参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#function

<script type="text/javascript">
...
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    datatype: postdata
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid'
  }); 
}); 
...

function postdata(searchParams) {
	if (! $.isEmptyObject(searchCondition)) {
		$.each(searchCondition, function(key, value) {
			searchParams[key] = value;
		});			
	}
        jQuery.ajax({
           url: 'example.php',
           data:searchParams,
           dataType:"xml",
           complete: function(xmldata,stat){
              if(stat=="success") {
                 var thegrid = jQuery("#list")[0];
                 thegrid.addXmlData(xmldata.responseXML);
              }
           }
        });
    },
</script>

这种方式使得jquery将查询条件保存在本地，每次发送请求时searchParams会自动保留上次的查询条件，当本次查询条件有更新时会自动覆盖上次的查询条件，但是如果本次查如果查询条件没有更新时会自动保留上次的提交的查询条件。因此，每次查询提交时都应为查询条件重新赋值，红色字体部分实现的就是这个功能，其中searchCondition是定义的一个全局变量，用来提取页面中输入的查询条件。