首先简单介绍下easyui的使用。
我们从datagrid表格入手,先显示一个简单的表格来说明一下easyui的使用。后面再加一个功能完整的表格
首先方法写好,还是使用之前的例子,没看过之前博客的可以翻一下。
StudentDaoIF.java
@Select("select * from student")
@Results({ @Result(column = "id" , property = "id"), @Result(column = "name" , property = "name"), @Result(column = "password" , property = "password") })
public List selectAllStudents();
StudentServiceImpl.java:
@Override
public List selectAllStudents() {
return dao.selectAllStudents();
}
StudentController.java
@RequestMapping("/ShowStudents.do")
@ResponseBody
public Map showStudents() throws Exception{
Map map=new HashMap();
List students = dao.selectAllStudents();
map.put("rows",students);
map.put("total", 20);
return map;
}
注:这里说明一下,easyui的datagrid使用必须要返回两个字段:rows和total,分别表示数据和总条数
页面datagird.html
datagird.html
$(function(){ $("#dg").datagrid({
url:"../ShowStudents.do", columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'name',width:100},
{field: 'password',title:'password',width:100}
]] }); });
注:这几个css、js文件是使用easyui必须导入的。
最后显示入下:
当然这只是个最简单的表格,我们可以添加参数让表格更加完整些。像下面这样:
datagird.htmlurl:"../ShowStudents.do", columns:[[ {field:'id',title:'id',width:100},
{field:'name',title:'name',width: 100},
{field:'password',title:'password',width:100} ]],
toolbar:'#toolbar', //表格菜单
loadMsg:'嗖 ----正在火速加载中 -------------', //加载提示
pagination:"true, //显示分页工具栏
rownumbers:true, //显示行号列
singleSelect:true,//是允许选择一行
queryParams:{ //在请求数据是发送的额外参数,如果没有则不用谢
name:'easyui', hhh:'aa'} }); });