jqwidgets之jqxGrid后台分页排序过滤

最新推荐文章于 2024-05-09 03:29:12 发布

轻度愉悦

最新推荐文章于 2024-05-09 03:29:12 发布

阅读量6k

点赞数 6

分类专栏： jqwidgets 文章标签： jqwidgets表格 jqxGrid分页 jqxGrid过滤 jqxGrid排序 jqxGrid后台过滤分页

本文链接：https://blog.csdn.net/csdn_ljh/article/details/50815444

版权

jqwidgets 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一、创建一个基本Grid

<div id="grid"></div>

<script type="text/javascript">
$(function(){
	gridInit();
})

function gridInit(){
	var source={//grid数据源属性
		url:"",
		datatype:"json",//服务返回的数据类型
		type:"POST",//默认为GET
		data:{},//定义发送到服务器的默认参数
		processdata:function(data){//对data属性的扩展
			data.param="abcde";
		}
	}
	
	$("#grid").jqxGrid({
		width:"99%",
		height:"99%", //把<!doctype html> 语句删掉height才会起作用
		columns:[ //表格列定义
		    {text:"id",datafield:"id",align:"center",hidden:true},//隐藏列
		    {text:"姓名",datafield:"姓名",align:"center"}
		    /* text:文本字段(显示的列名)
		       datafield:数据字段
		       align:列名位置
		    */
		],
		source:new $.jqx.dataAdapter(source)
	});
}
</script>

二、后台分页

1、设置分页grid属性

var source={
	//数据源需要设置两个属性
	totalrecords:0,//这个可以不要，这里为了说明
	beforeprocessing: function (data) { //请求后的回调函数,data是查询方法返回的数据
	    source.totalrecords = 数据总条数;
    }
}
$("#grid").jqxGrid({
	//分页所需属性
	pageable: true,
	pagesize:50,//每页显示50条
	pagesizeoptions:[50,100,200],//可选择每页显示条数
	// 以下两个是后台分页所必需的属性，不设置无法跳下一页(我也没搞懂具体含义，复制就行)
	virtualmode: true,
        rendergridrows: function(obj) {
            return obj.data;
        }
});

2、设置分页属性jqxGrid发送两个参数给后台

pagenum : 当前在第几页

pagesize : 当前页显示的数据条数

比如java后台获取参数分页参数：

  String pagenum=request.getParameter("pagenum");
  String pagesize=request.getParameter("pagesize");

三、排序

1、排序属性

var source={
    //点击表头时排序(必须)
    sort: function() {
        $("#grid").jqxGrid('updatebounddata','sort');
    },
    //默认排序属性(可不写)
    sortcolumn: 'id',
    sortdirection: 'asc'
}
//指定grid表格可排序
$("#grid").jqxGrid({
   sortable:true
});

2、grid会发送两个排序参数给后台

sortdatafield : 排序的字段(datafield值)

sortorder : 排序方式( asc/desc )

默认第一次点击表头sortorder="asc"，第二次sortorder="desc"，第三次取消排序sortorder=""。可设置sorttogglestates属性改变排序模式。

java后台获取分页参数：

  String sort=request.getParameter("sortdatafield");
  String order=request.getParameter("sortorder");

四、后台过滤

1、过滤属性

var source={
    filter: function() {
       $("#grid").jqxGrid('updatebounddata', 'filter');
    }
}
$("#grid").jqxGrid({
	filterable: true
})

设置过滤属性后表头上会出现过滤面板

2、过滤参数非常多，看官网例子吧亲。下面提供一个拼接where条件的java方法(数据库是sql server 2008)

public String getWhereOfFilter(Map<String, String[]> map){// 参数是 request.getParameterMap()
		//总共有多少个过滤条件(一个过滤面板会有一个或两个过滤条件)
	Integer filterscount=Integer.valueOf(map.get("filterscount")[0]);
	StringBuilder where=new StringBuilder();
		
	for(int i=0;i<filterscount;i++){
		//填写的过滤值
		String filtervalue =map.get("filtervalue" + i)[0].trim();
		//在过滤面板的条件下拉框选的值
		String filtercondition =map.get("filtercondition" + i)[0];
		//当前过滤字段
		String filterdatafield =map.get("filterdatafield" + i)[0];
		//当前过滤字段和下一个过滤字段的关系 0为and 1为or
		String filteroperator =map.get("filteroperator" + i)[0];
			
		//假设过滤字段为 filterdatafield为field,过滤值为value
		switch(filtercondition)
		{
			case "EMPTY":
			       // field is null or field=''
			       where.append(filterdatafield).append(" is null or ")
                                   .append(filterdatafield).append("='' ");
		        break;
			case "NOT_EMPTY":
				// field is not null or field<>''
				where.append(filterdatafield).append(" is not null or")
                                      .append(filterdatafield).append("<>'' ");
			break;
			case "CONTAINS":
				// field like '%value%'
				where.append(filterdatafield).append(" like '%")
                                     .append(filtervalue).append("%' ");
			break;
			case "CONTAINS_CASE_SENSITIVE":
				// field COLLATE Chinese_PRC_CS_AI like '%value%' 大小写敏感包含
				where.append(filterdatafield)
                                     .append(" COLLATE Chinese_PRC_CS_AI like '%")
                                      .append(filtervalue).append("%' ");
			break;
			case "DOES_NOT_CONTAIN":
				// field not like '%value%'
				where.append(filterdatafield).append(" not like '%")
                                      .append(filtervalue).append("%' ");
			break;
			case "DOES_NOT_CONTAIN_CASE_SENSITIVE":
				// field COLLATE Chinese_PRC_CS_AI not like '%value%' 大小写敏感不包含
				where.append(filterdatafield)
                                      .append(" COLLATE Chinese_PRC_CS_AI not like '%")
                                      .append(filtervalue).append("%' ");
			break;
			case "EQUAL":
				// field='value'
				where.append(filterdatafield).append("='").append(filtervalue).append("' ");
			break;
			case "EQUAL_CASE_SENSITIVE":
				//field COLLATE Chinese_PRC_CS_AI = 'value'
				where.append(filterdatafield).append(" COLLATE Chinese_PRC_CS_AI ='")
                                     .append(filtervalue).append("' ");
			break;
			case "NOT_EQUAL":
				// field<>'value'
				where.append(filterdatafield).append("<>'").append(filtervalue).append("' ");
			break;
			case "NOT_EQUAL_CASE_SENSITIVE":
				// field COLLATE Chinese_PRC_CS_AI <>'value'
				where.append(filterdatafield).append(" COLLATE Chinese_PRC_CS_AI <>'")
                                      .append(filtervalue).append("' ");
			break;
			case "GREATER_THAN":
				// field>'value'
				where.append(filterdatafield).append(">'").append(filtervalue).append("' ");
			break;
			case "LESS_THAN":
				// field<'value'
				where.append(filterdatafield).append("<'").append(filtervalue).append("' ");
			break;
			case "GREATER_THAN_OR_EQUAL":
				// field>='value'
				where.append(filterdatafield).append(">='").append(filtervalue).append("' ");
			break;
			case "LESS_THAN_OR_EQUAL":
				// field<='value'
				where.append(filterdatafield).append("<='").append(filtervalue).append("' ");
			break;
			case "STARTS_WITH":
				// field like 'value%'
			        where.append(filterdatafield).append(" like '").append(filtervalue).append("%' ");
			break;
			case "STARTS_WITH_CASE_SENSITIVE":
				// field COLLATE Chinese_PRC_CS_AI like 'value%'
				where.append(filterdatafield).append(" COLLATE Chinese_PRC_CS_AI like '")
                                      .append(filtervalue).append("%' ");
			break;
			case "ENDS_WITH":
				// field like '%value'
				where.append(filterdatafield).append(" like '%").append(filtervalue).append("' ");
			break;
			case "ENDS_WITH_CASE_SENSITIVE":
				// field COLLATE Chinese_PRC_CS_AI like '%value' 
				where.append(filterdatafield).append(" COLLATE Chinese_PRC_CS_AI like '%")
                                     .append(filtervalue).append("' ");
			break;
			case "NULL":
				// field is null
				where.append(filterdatafield).append(" is null ");
			break;
			case "NOT_NULL":
				//field is not null
				where.append(filterdatafield).append(" is not null ");
			break;
		}
			
		if("0".equals(filteroperator)){
			where.append("  and ");
		}else if("1".equals(filteroperator)){
			where.append("  or ");
		}
	}
		
	//删除最末尾的and或or
	int length=where.length();
	if(where.lastIndexOf("or")+3==length){
		where.delete(where.lastIndexOf("or"), length);
	}else if(where.lastIndexOf("and")+4==length){
		where.delete(where.lastIndexOf("and"), length);
	}
		
	return where.toString();
 }

轻度愉悦

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
jqwidgets之jqxGrid后台分页排序过滤

一、创建一个基本Grid<div id="grid"></div><script type="text/javascript">$(function(){ gridInit();})function gridInit(){ var source={//grid数据源属性 url:"", datatype:"json",//服务...
复制链接

扫一扫

专栏目录