首先先将easyui 引入到jsp页面中
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--将一些英文转变为中文格式引入下面的js即可c-->
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
第二步:
找到对应的easyui demo 复制代码 1 <div id="table" align="center"> 2 <table id="dg" class="easyui-datagrid" title="公告信息列表"
jsp页面
3
<div id="table" align="center">
<table id="dg" class="easyui-datagrid" title="公告信息列表"
style="width:100%;height:400px"
4 data-options=" 5 rownumbers:true, 6 url:'notice/findNotice',url地址 7 method:'post',请求方式 8 pagination:true, 9 pageSize:10,每页数据条数 10 pageList:[5,10,15], 11 toolbar:'#tb',在头部添加查询条件 12 footer:'#ft'" 在尾部添加一些功能按钮
> 13 <thead> 14 <tr> 15 <th data-options="field:'ck',checkbox:'true'"></th> 加入多选款 16 <th data-options="field:'code',width:120">编号</th> 17 <th data-options="field:'title',width:120" align="center">标题</th> 18 <th data-options="field:'currentStrTime',width:150" align="center">发布时间</th> 19 <th data-options="field:'creater',width:100," align="center">发布人</th> 20 <th data-options="field:'content',width:260" align="center">内容</th> 21 <th data-options="field:'status',width:60,align:'center'" 22 align="center">公告状态</th> 23 </tr> 24 </thead> 25 </table>
<!--头部的查询条件按钮(可删除不要)--> 26 <div id="tb" style="padding:2px 5px;"> 27 时间段 从: <input id="time1" class="easyui-datebox" style="width:130px"> 28 到: <input id="time2" class="easyui-datebox" style="width:130px"> 29 创建者/部门: <select id="dep" class="easyui-combobox" panelHeight="auto" 30 style="width:130px"> 31 <option value="0">--请选择--</option> 32 <c:forEach items="${deps}" var="dep"> 33 <option value="${dep.name}">${dep.name}</option> 34 </c:forEach> 35 </select> <a href="javascript:void(0)" onclick="searchNotice()" 36 class="easyui-linkbutton" iconCls="icon-search">查询</a> 37 </div>
<!--尾部的的功能按钮(可删除不要)需要的自行写或者查询easyui API-- >
38 <div id="ft" style="padding:2px 3px;"> 39 <shiro:hasPermission name="notice:add"> 40 <a href="notice/toAdd" class="easyui-linkbutton" iconCls="icon-add" 41 plain="true">添加</a> 42 </shiro:hasPermission> 43 <shiro:hasPermission name="notice:update"> 44 <a href="javacsript:void(0)" onclick="updateNotice()" 45 class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> 46 </shiro:hasPermission> 47 <shiro:hasPermission name="notice:delete"> 48 <a href="javacsript:void(0)" onclick="deleteNotice()" 49 class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a> 50 </shiro:hasPermission> 51 <shiro:hasPermission name="notice:list"> 52 <a href="javacsript:void(0)" onclick="findNotice()" class="easyui-linkbutton" iconCls="icon-save" 53 plain="true">查看</a> 54 </shiro:hasPermission> 55 </div> 56 </div>
第三步 java代码(无条件分页查询)注意返回的是json格式的数据 rows(需要返回的数据)和 total (数据的总记录数)
@RequestMapping("/findNotice") @RequiresPermissions("notice:list") @ResponseBody public Map<String,Object> findNotice(NoticeBean noticeBean) { System.out.println(noticeBean); Map<String,Object> map=new HashMap<String, Object>(); int total=0; List<Notice> list=null; total=noticeService.findTotalBySearch(noticeBean); list=noticeService.findByPageSearch(noticeBean); System.out.println(total); System.out.println(list); map.put("rows", list); map.put("total",total); return map; }
有条件的分页查询(可参考我的,也可自行)
@RequestMapping("/findNotice") @RequiresPermissions("notice:list") @ResponseBody public Map<String,Object> findNotice(NoticeBean noticeBean) { System.out.println(noticeBean); Map<String,Object> map=new HashMap<String, Object>(); int total=0; List<Notice> list=null; if((noticeBean.getTime1()==null || "".equals(noticeBean.getTime1()))&&(noticeBean.getCreater()==null ||"0".equals(noticeBean.getCreater())||"".equals(noticeBean.getCreater()))){ total=noticeService.findTotal(); list=noticeService.findPage(noticeBean.getPage(),noticeBean.getRows()); }else{ total=noticeService.findTotalBySearch(noticeBean); list=noticeService.findByPageSearch(noticeBean); System.out.println(total); System.out.println(list); } map.put("rows", list); map.put("total",total); return map; }
获得多选框选择的数据
var rows = $('#dg').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
var code=rows[i].code;
}
获得时间框数据
$('#time1').datebox('getValue')
获得下拉框数据
$('#dep').combobox('getValue')
其他的自行查看API
官网 http://www.jeasyui.net