java datagrid控件_使用JQuery EasyUI 中的DataGrid控件实现数据的提取和显示 | 学步园...

第一步：定义dao接口

package yycg.base.dao.mapper;

import java.util.List;

import yycg.base.vo.SysuserCustom;

import yycg.base.vo.SysuserQueryVo;

public interface SysuserMapperCustom {

/**

* findSysuserList名称和mapper.xml的id保持一致

* @param sysuser

* @return

* @throws Exception

*/

//public List findSysuserList(Sysuser sysuser) throws Exception;

/**

* 系统用户查询

*/

public List findSysuserList(SysuserQueryVo sysuserQueryVo) throws Exception;

}

第二步：编写SysuserMapperCustom.xml映射文件

and sysuser.groupid=#{sysuserCustom.groupid}

and sysuser.userid=#{sysuserCustom.userid}

and sysuser.username like '%${sysuserCustom.username}%'

and sysuser.sysmc like '%${sysuserCustom.sysmc}%'

resultType="yycg.base.vo.SysuserCustom"

>

select *

from (select rownum rownum_page, page_1.*

from (

select *

from (select sysuser.*,

(select t.INFO

from DICTINFO t

where t.dictcode = sysuser.groupid

and t.typecode = 's01') groupname,

decode(groupid,

1,

(select mc from userjd where userjd.id = sysuser.sysid),

2,

(select mc from userjd where userjd.id = sysuser.sysid),

3,

(select mc from useryy where useryy.id = sysuser.sysid),

4,

(select mc from usergys where usergys.id = sysuser.sysid)) sysmc

from sysuser) sysuser

) page_1

where rownum <= ${pageQuery.PageQuery_end}) page_2

where page_2.rownum_page > ${pageQuery.PageQuery_start}

]]>

第三步：service接口的定义

package yycg.base.service;

import java.util.List;

import yycg.base.po.Sysuser;

import yycg.base.vo.SysuserCustom;

import yycg.base.vo.SysuserQueryVo;

/**

* 用户管理服务接口

* @author Thinkpad

*

*/

public interface UserManager {

/**

* 系统用户查询

*/

public List findSysuserList(SysuserQueryVo sysuserQueryVo) throws Exception;

}

第四步：service的实现

package yycg.base.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import yycg.base.dao.mapper.SysuserMapper;

import yycg.base.dao.mapper.SysuserMapperCustom;

import yycg.base.po.Sysuser;

import yycg.base.po.SysuserExample;

import yycg.base.service.UserManager;

import yycg.base.vo.SysuserCustom;

import yycg.base.vo.SysuserQueryVo;

import yycg.util.UUIDBuild;

public class UserManagerImpl implements UserManager {

@Autowired

SysuserMapperCustom sysuserMapperCustom;//注入自定义的dao接口

@Override

public List findSysuserList(SysuserQueryVo sysuserQueryVo) throws Exception {

return sysuserMapperCustom.findSysuserList(sysuserQueryVo);

}

}

第五步：action类的实现，有分页

package yycg.base.action;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import yycg.base.process.result.DataGridResultInfo;

import yycg.base.service.UserManager;

import yycg.base.vo.PageQuery;

import yycg.base.vo.SysuserCustom;

import yycg.base.vo.SysuserQueryVo;

@Controller

@RequestMapping("/user")//根路径

public class UserAction {

@Autowired

UserManager userManager;

//用户列表查询页面，功能就是返回一个查询页面

@RequestMapping("/userquery")//子路径 //http://localhost:8080/yycgproject/user/userquery.action

public String userquery(Model model) throws Exception{

//获取页面需要的数据，使用model传回页面

//获取用户类型

//.....

return "/base/user/userquery";

}

/**

* 用户列表查询数据结果集,即json格式的数据，使用注解ResponseBody表示方法返回json格式的数据

* @return

* @throws Exception

*/

@RequestMapping("/userquery_result")

public @ResponseBody DataGridResultInfo userquery_result(

SysuserQueryVo sysuserQueryVo,

int page,

int rows

)throws Exception{

//获取查询列表的总数

int count = userManager.findSysuserCount(sysuserQueryVo);

PageQuery pageQuery = new PageQuery();

pageQuery.setPageParams(count, rows, page);

sysuserQueryVo.setPageQuery(pageQuery);

//获取当前页的用户列表的数据

List list = userManager.findSysuserList(sysuserQueryVo);

DataGridResultInfo dataGridResultInfo = new DataGridResultInfo();

dataGridResultInfo.setTotal(count);

dataGridResultInfo.setRows(list);

return dataGridResultInfo;

}

}

第六步：JSP

var toolbar_v=[{

id:'btnadd',

text:'添加',

iconCls:'icon-add',

handler:useradd

}];

var columns_v=[[

{

field:'userid',//此名称对应于json的数据

title:'用户账号',

width:120

},

{

field:'username',

title:'用户名称',

width:120

},

{

field:'groupname',

title:'用户类型',

width:120

},

{

field:'sysmc',

title:'单位名称',

width:120

},

{

field:'userstate',

title:'用户状态',

width:120,

//作用是对单元格中的数据内容进行格式化，value是单元格的数据,index是行的序号从0开始，row就是一行数据为json格式

formatter: function(value,row,index){

if(value=='1'){

return '正常';

}else {

return '暂停';

}

}

}

]];

/* 以下是使用jQuery 的Ajax，来加载列表的数据，并且请求userquery_result.action获取json格式的数据，里边存放了列表需要的数据。

datagrid会自动显示JSON的数据，可以查看源码

*/

$(function(){

//datagrid的加载方法

$('#sysuserlist').datagrid({

title:'用户列表',

striped:true,//是否显示条纹效果

url:'${baseurl}user/userquery_result.action',//请求获取json格式的数据，里边存放了列表需要的数据

idField:'code',//数据列表的主键，如果定义错误影响datagrid的操作

pagination:true,//是否显示分页区域

rownumbers:true,//是否显示行的序号

columns:columns_v,//在外边定义列表的列，传给datagrid的columns属性

toolbar:toolbar_v//在外边定义工具栏toolbar_v，传datagrid的toolbar属性

});

});

注意datagrid的属性。

columns:columns_v