easyui的数据网格实现多条件查询并显示数据

项目ssm(spring+springmvc+mybatis)

编译工具：eclipse

后台框架：easyui

因为easyui数据网格显示的是一种json格式数据：

{"total":1,"rows":[{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}]}

注：重点就是返回total和rows两个属性，而rows就是封装了我们要返回的数据集

搭建easyui框架可以参考：easyui教程

页面展示：

前端页面：

//工具栏
<div id="tb" style="padding:5px;height:auto"><div><input id="keyWord" style="line-height:26px;border:1px solid #ccc" placeholder="输入内容查询关键字"><span>开始时间：<input type="text" class="easyui-datebox"  id="startTime"> </span><span>结束时间：<input type="text" class="easyui-datebox" id="endTime"> </span><span>留言状态：<select id="status" class="easyui-combobox" style="width: 100px;height:auto"><option value="-1">请选择</option><option value="1">公开</option><option value="2">不公开</option></select></span><a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a></div>
</div>
//table中的toolbar就是加上的工具栏
<table id="tt" class="easyui-datagrid" style="width:100%;height:500px"url="<%=request.getContextPath()%>/messages/messageLists" toolbar="#tb"singleSelect="true" fitColumns="true"  pagination="true"><thead><tr><th field="m_id" width="60">留言编号</th><th field="u_id" width="60">用户编号</th><th field="m_content"  width="70">留言内容</th><th data-options="field:'m_date',width:60,align:'center',formatter:dataFormatter">留言时间</th><th data-options="field:'m_status',width:60,align:'center',formatter:statusFormatter">留言状态</th><th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th></tr></thead>
</table>

js实现把查询的参数传到后台：然后再重加载页面显示数据：

<script>/*查询*/function doSearch(){$('#tt').datagrid('load',{keyWord: $('#keyWord').val(),status:$('#status').val(),startTime:$('#startTime').val(),endTime:$('#endTime').val()});
}</script>

注：keyWord，status等这些参数就是我要传到后台的，所以传什么参数到后台，看你个人需求。当点击查询时是执行table中的url路径。

//table中的toolbar就是加上的工具栏
<table id="tt" class="easyui-datagrid" style="width:100%;height:500px"url="<%=request.getContextPath()%>/messages/messageLists"

后台代码实现：

controller层：

/*** 留言记录* @param page 分页* @return 后台管理留言记录信息*/@RequestMapping("/messageLists")@ResponseBodypublic Map<String,Object>messageList(Page page){Map<String,Object>map=new HashMap<String,Object>();//留言记录List<Messages>list=messagesService.personList(page);//留言记录总数int total=messagesService.personListCount(page);map.put("total", total);map.put("rows", list);return map;}

注：map就是一种key-value对，而@ResponseBody会以json形式返回数据，所以这样返回给前端页面，easyui就可以解析成符合的json数据形式，这样数据网格就可以显示出数据来。

Page类是封装了一些分页的属性以及接收查询的参数：


/*** 处理分页* @author admin**/public class Page implements Serializable {//当前页private Integer page=1;//页大小private Integer rows=5;// 总记录 数private Integer totalRecord;//总页数private Integer totalPage;//关键字类型private String keyType;//查询关键字private String keyWord;//开始记录位置private Integer start=0;//用户idprivate String userid;//开始时间private String startTime;//结束时间private String endTime;//留言状态private Integer status;//setter省略。。。}

service层：

List<Messages> personList(Page page);Integer personListCount(Page page);

serviceImpl层：

@Overridepublic List<Messages> personList(Page page) {return messagesMapper.personList(page);}@Overridepublic Integer personListCount(Page page) {return messagesMapper.personListCount(page);}

mapper.xml:

<!-- 查找留言记录列表 --><select id="personList" resultMap="BaseResultMap2"parameterType="comit.model.Page">select * from messages<where><if test="userid!='' and userid!=null and userid!='undefined' ">AND u_id=#{userid}</if><if test="keyWord!='' and keyWord!=null ">AND m_content like concat('%',#{keyWord},'%')</if><if test="startTime!='' and startTime!=null ">AND m_date <![CDATA[ >= ]]> #{startTime}</if><if test="endTime!='' and endTime!=null ">AND m_date <![CDATA[ <= ]]> #{endTime}</if><if test="status!='' and status!=null and status==2">AND m_status=0</if><if test="status!='' and status!=null and status==1">AND m_status=1</if></where>ORDER BY m_id DESClimit #{start},#{rows}</select><!-- 查找留言总数 --><select id="personListCount" resultType="java.lang.Integer"parameterType="comit.model.Page">select count(1)from messages<where><if test="userid!='' and userid!=null and userid!='undefined' ">AND u_id=#{userid}</if><if test="keyWord!='' and keyWord!=null ">AND m_content like concat('%',#{keyWord},'%')</if><if test="startTime!='' and startTime!=null ">AND m_date <![CDATA[ >= ]]> #{startTime}</if><if test="endTime!='' and endTime!=null ">AND m_date <![CDATA[ <= ]]> #{endTime}</if><if test="status!='' and status!=null and status==2">AND m_status=0</if><if test="status!='' and status!=null and status==1">AND m_status=1</if></where></select>

注：重点就是看你想拿到什么样的数据，sql应该怎么写

我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。

easyui的数据网格实现多条件查询并显示数据相关推荐

datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
SQL数据库语言基础之SqlServer条件查询、排序数据表、like模糊查询【大总结】
文章目录一.语句查询数据(SELECT) 二.获取满足查询条件的语句(WHERE) 三.排序查询(ORDER BY) 四.高级条件查询一.语句查询数据(SELECT) 1.在SSMS中查看数据在 ...
layui表格数据重载（根据条件查询，监听按钮事件）
html代码 <div class="wrap-container clearfix"><div class="column-content-detai ...
微信小程序云开发记账本计算总金额，查询突破二十条数据的限制，条件查询、根据时间排序
//这里用async await 获取一下集合中记录的总数 ,这样比较方便... chaxunout: async function () {//查询函数this.setData({year1:th ...
模糊查询时，页面没有数据，数据库编辑器里可以正常显示数据
目前遇到两种类似的情况: 1.查看数据库中的数据,比如:此时有两个表会议表和部门表,删除时,我们使用软删除(del),会议表里的3和4不是删除状态,而部门表里的3和4是删除状态,若两表联合查询加上查询 ...
mysql 将a表数据插入b表_查询A表数据插入到B表中 sql
前言: 最近遇到一个查询A表数据插入到B表中sql的问所以就发文章记录下,希望能帮助到家开发环境 win10专业版本(其他操作系统具体安装mysql请百度 ) 准备工作: 安装MySQL 1 m ...
php显示mysql数据实例_php 连接mysql数据库并显示数据实例转载 aoguren
PHP连接MySQL数据库并显示数据//---------基本设定---------$mysql_server_name = "localhost";//服务器名称:$mysql_ ...
python串口数据绘图_使用Python串口实时显示数据并绘图的例子
使用pyserial进行串口传输一.安装pyserial以及基本用法在cmd下输入命令pip install pyserial 注:升级pip后会出现 "'E:\Anaconda3\Sc ...

easyui的数据网格实现多条件查询并显示数据

我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。

easyui的数据网格实现多条件查询并显示数据相关推荐

最新文章

热门文章