easyui datagrid 查询分页

最新推荐文章于 2022-04-12 03:45:00 发布

原创最新推荐文章于 2022-04-12 03:45:00 发布 · 581 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #数据 #分页 #datagrid

技术专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何通过Ajax调用后台接口，并利用Datagrid组件实现数据的动态加载与展示，包括数据请求URL配置、数据结构解析、页面交互优化等关键步骤。同时，展示了如何在搜索时通过前端传参到后台进行复杂查询操作，以及后台如何接收并处理这些参数以返回正确的查询结果。

$('#list').datagrid({
width:'auto',
height:'auto',
striped: true,
loadMsg:'数据加载中请稍后……',
fitColumns: false,
pagination: true,
nowrap:true,
url:'<%=request.getContextPath()%>/LvwanVehicleSearchAction/LvwanHistorySearch',
columns: [[
{field:'remark',title: '查询状态', index:'remark', align:'center'},
{field:'idNumber',title: '身份证号码', index:'idNumber', align:'center'},
{field:'idNumberReslut',title: '查询结果', index:'idNumberReslut', align:'center',formatter:function(value,row,index)
{
if(value=='1'){
return '一致';
}else if(value=='0'){
return '不一致';
}else if(value=='-1'){
return '不存在';
}else{
return '';
}
}} ]]
});

}) 通过后台加载数据

搜索的时候需要调用

var data = new Object();
var map = {
key:value, 搜素的条件

key:value
};

data["paramJsonMap"] = JSON.stringify(map); 这个是后台接收的参数

$("#list").datagrid("load",data);

后台通过paramJsonMap 接收到参数

// 设置查询条件
HashMap<String, Object> map = new HashMap<String, Object>();
ObjectMapper om=new ObjectMapper();
if(paramJsonMap!=null&&!paramJsonMap.equals("")){
map = (HashMap<String, Object>) om.readValue(paramJsonMap, Map.class);
}

这样搜索的参数就放到map里面了