一、创建一个基本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();
}