EasyUi Datagrid的基础使用

Datagride的初始化方式

方式1 ：class类型创建，这个创建方式比较简单，如果在已知表格内容的情况下可以使用，还是挺漂亮的

[html] view
plain copy







<table class="easyui-datagrid">

<thead>

<tr>

<th data-options="field:'code'">Code</th>

<th data-options="field:'name'">Name</th>

<th data-options="field:'price'">Price</th>

</tr>

</thead>

<tbody>

<tr>

<td>001</td><td>name1</td><td>2323</td>

</tr>

<tr>

<td>002</td><td>name2</td><td>4612</td>

</tr>

</tbody>

</table>

方式2：通过JavaScript方式创建，这种方式优势在于与后台的交互比较方便

1：生明一个Table

[html] view
plain copy







<table id="dg">

</table>

2:在Js中实现

[javascript] view
plain copy







$('#dg').datagrid({

url:'datagrid_data.json',

columns:[[

{field:'code',title:'Code',width:100},

{field:'name',title:'Name',width:100},

{field:'price',title:'Price',width:100,align:'right'}

]]

});

上边的只是参考帮助文档的创建方式，下面将结合前后台对具体的内容进行实现

项目的后台使用的是SpringMvc,数据库是Mybaits

加载Url与Colum

1：前台JS

[html] view
plain copy







datagrid=$("#dg").datagrid({

url:"/Test3/ModuleBeanController/getAll.do",//加载的URL

isField:"id",

pagination:true,//显示分页

pageSize:5,//分页大小

pageList:[5,10,15,20],//每页的个数

fit:true,//自动补全

fitColumns:true,

iconCls:"icon-save",//图标

title:"用户管理",

columns:[[ //每个列具体内容

{

field:'id',

title:'id',

width:100,

},

{field:'pid',title:'pid',width:100},

{field:'text',title:'text',width:100}

]]

})

2:后台的controller层

getAll.do

[java] view
plain copy







@RequestMapping(value="/getAll")

@ResponseBody

public List<ModuleBean> getAll(String page,String rows,String text) {

return moduleBeanService.getAll(page,rows,text);

}

介绍一下几个参数

page:页数

rows：每页行数

Text：在以后的通过用户名查询时使用

3：service 层

getall()

[java] view
plain copy







@Override

public List<ModuleBean> getAll(String page,String rows,String text) {

// TODO Auto-generated method stub

page = (page==null?"1":page);

rows = (rows==null?"5":rows);

return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));

}

pageUtil相关代码

[java] view
plain copy







package com.sc.util;

import java.util.HashMap;

import java.util.Map;

public class PageUtil {

public static Map<String,Object> getRowNum(int curPage,int pageSize,String text)

{

Map<String,Object> map=new HashMap<String,Object>();

map.put("curRow", (curPage-1)*pageSize);

map.put("pageSize", pageSize);

if(text!=null)

{

map.put("text", "%"+text+"%");

}

else

{

map.put("text", "%%");

}

return map;

}

}

4:mapper层

getall（）

[html] view
plain copy







<select id="getAll" resultMap="BaseResultMap" parameterType="map">

select * from tbl_sys_module

<if test="#{text} != '%%'">

where TEXT like #{text,jdbcType=VARCHAR}

</if>

limit #{curRow},#{pageSize}

</select>

就是一个查询语句select * from 表 where Text like #{text} limit rows,page

通过map返回

我的js的全部内容

[javascript] view
plain copy







var datagrid;

var rowEditor=undefined;

$(function(){

datagrid=$("#dg").datagrid({

url:"/Test3/ModuleBeanController/getAll.do",//加载的URL

isField:"id",

pagination:true,//显示分页

pageSize:5,//分页大小

pageList:[5,10,15,20],//每页的个数

fit:true,//自动补全

fitColumns:true,

iconCls:"icon-save",//图标

title:"用户管理",

columns:[[ //每个列具体内容

{

field:'id',

title:'id',

width:100,

editor : {//是否可编辑

type : 'validatebox',

options : {//必须校验

required : true

}

}

},

{field:'pid',title:'pid',width:100,editor : {

type : 'validatebox',

options : {

required : true

}

}},

{field:'text',title:'text',width:100,editor : {

type : 'validatebox',

options : {

required : true

}

}}

]],

toolbar:[ //工具条

{text:"增加",iconCls:"icon-add",handler:function(){//回调函数

if(rowEditor==undefined)

{

datagrid.datagrid('insertRow',{//如果处于未被点击状态，在第一行开启编辑

index: 0,

row: {

}

});

rowEditor=0;

datagrid.datagrid('beginEdit',rowEditor);//没有这行，即使开启了也不编辑

}

}},

{text:"删除",iconCls:"icon-remove",handler:function(){

var rows=datagrid.datagrid('getSelections');

if(rows.length<=0)

{

$.messager.alert('警告','您没有选择','error');

}

else if(rows.length>1)

{

$.messager.alert('警告','不支持批量删除','error');

}

else

{

$.messager.confirm('确定','您确定要删除吗',function(t){

if(t)

{

$.ajax({

url : '/Test3/ModuleBeanController/deletecustomer.do',

data : rows[0],

dataType : 'json',

success : function(r) {

if (r.success) {

datagrid.datagrid('acceptChanges');

$.messager.show({

msg : r.msg,

title : '成功'

});

editRow = undefined;

datagrid.datagrid('reload');

} else {

/*datagrid.datagrid('rejectChanges');*/

datagrid.datagrid('beginEdit', editRow);

$.messager.alert('错误', r.msg, 'error');

}

datagrid.datagrid('unselectAll');

}

});

}

})

}

}},

{text:"修改",iconCls:"icon-edit",handler:function(){

var rows=datagrid.datagrid('getSelections');

if(rows.length==1)

{

if(rowEditor==undefined)

{

var index=datagrid.datagrid('getRowIndex',rows[0]);

rowEditor=index;

datagrid.datagrid('unselectAll');

datagrid.datagrid('beginEdit',index);

}

}

}},

{text:"查询",iconCls:"icon-search",handler:function(){}},

{text:"保存",iconCls:"icon-save",handler:function(){

datagrid.datagrid('endEdit',rowEditor);

rowEditor=undefined;

}},

{text:"取消编辑",iconCls:"icon-redo",handler:function(){

rowEditor=undefined;

datagrid.datagrid('rejectChanges')

}}

],

onAfterEdit:function(rowIndex, rowData, changes){

var inserted = datagrid.datagrid('getChanges', 'inserted');

var updated = datagrid.datagrid('getChanges', 'updated');

if (inserted.length < 1 && updated.length < 1) {

editRow = undefined;

datagrid.datagrid('unselectAll');

return;

}

var url = '';

if (inserted.length > 0) {

url = '/Test3/ModuleBeanController/addcustomer.do';

}

if (updated.length > 0) {

url = '/Test3/ModuleBeanController/addcustomer.do';

}

$.ajax({

url : url,

data : rowData,

dataType : 'json',

success : function(r) {

if (r.success) {

datagrid.datagrid('acceptChanges');

$.messager.show({

msg : r.msg,

title : '成功'

});

editRow = undefined;

datagrid.datagrid('reload');

} else {

/*datagrid.datagrid('rejectChanges');*/

datagrid.datagrid('beginEdit', editRow);

$.messager.alert('错误', r.msg, 'error');

}

datagrid.datagrid('unselectAll');

}

});

},

onDblClickCell:function(rowIndex, field, value){

if(rowEditor==undefined)

{

datagrid.datagrid('beginEdit',rowIndex);

rowEditor=rowIndex;

}

}

});

$("#search").click(function(){

datagrid.datagrid('load',{

text:$("#text").val()

});

});

})

2：controller层全部

[java] view
plain copy







package com.sc.controller;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

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

import org.springframework.stereotype.Controller;

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

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

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

import com.sc.myservice.ModuleBeanService;

import com.sc.po.Menu;

import com.sc.po.ModuleBean;

@Controller

@RequestMapping("ModuleBeanController")

public class ModuleBeanController {

private ModuleBeanService moduleBeanService;

public ModuleBeanService getModuleBeanService() {

return moduleBeanService;

}

@Autowired

public void setModuleBeanService(ModuleBeanService moduleBeanService) {

this.moduleBeanService = moduleBeanService;

}

@RequestMapping(value="/{id}/showModuleBean" ,params="json")

@ResponseBody

public ModuleBean showModuleBean(@PathVariable String id) {

Integer key=Integer.parseInt(id);

ModuleBean moduleBean=moduleBeanService.searchByPrimaryKey(key);

return moduleBean;

}

@RequestMapping(value="/getAll")

@ResponseBody

public List<ModuleBean> getAll(String page,String rows,String text) {

return moduleBeanService.getAll(page,rows,text);

}

@RequestMapping(value="/getMenu")

@ResponseBody

public List<Menu> getMenu(String id) {

if(id==null)

return moduleBeanService.searchByPrimaryPid(-1);

else

return moduleBeanService.searchByPrimaryPid(Integer.parseInt(id));

}

@RequestMapping("/addcustomer")

@ResponseBody

public Map<String,Object> addCustomer(ModuleBean moduleBean) {

Map<String,Object> map = new HashMap<String,Object>();

int result = moduleBeanService.save(moduleBean);

map.put("success", result);

return map;

}

@RequestMapping("/upadatacustomer")

@ResponseBody

public Map<String,Object> upadataCustomer(ModuleBean moduleBean) {

Map<String,Object> map = new HashMap<String,Object>();

int result = moduleBeanService.updateByPrimaryKey(moduleBean);

map.put("success", result);

return map;

}

@RequestMapping("/deletecustomer")

@ResponseBody

public Map<String,Object> deleteCustomer(String ids) {

Map<String,Object> map = new HashMap<String,Object>();

int result = moduleBeanService.deleteByPrimaryKey(Integer.parseInt(ids));

map.put("success", result);

return map;

}

}

service层实现

[java] view
plain copy







package com.sc.myservice.impl;

import java.util.ArrayList;

import java.util.List;

import org.springframework.beans.BeanUtils;

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

import org.springframework.stereotype.Service;

import com.sc.dao.ModuleBeanMapper;

import com.sc.myservice.ModuleBeanService;

import com.sc.po.Menu;

import com.sc.po.ModuleBean;

import com.sc.util.PageUtil;

@Service("moduleBeanService")

public class ModuleBeanServiceImpl implements ModuleBeanService {

private ModuleBeanMapper modulebeanmapper;

public ModuleBeanMapper getModulebeanmapper() {

return modulebeanmapper;

}

@Autowired

public void setModulebeanmapper(ModuleBeanMapper modulebeanmapper) {

this.modulebeanmapper = modulebeanmapper;

}

@Override

public ModuleBean searchByPrimaryKey(int kay) {

ModuleBean moduleBean=modulebeanmapper.selectByPrimaryKey(kay);

// TODO Auto-generated method stub

return moduleBean;

}

@Override

public int save(ModuleBean moduleBean) {

// TODO Auto-generated method stub

return modulebeanmapper.insert(moduleBean);

}

@Override

public List<ModuleBean> getAll(String page,String rows,String text) {

// TODO Auto-generated method stub

page = (page==null?"1":page);

rows = (rows==null?"5":rows);

return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));

}

@Override

public int updateByPrimaryKey(ModuleBean record) {

// TODO Auto-generated method stub

return modulebeanmapper.updateByPrimaryKey(record);

}

@Override

public int deleteByPrimaryKey(Integer id) {

// TODO Auto-generated method stub

return modulebeanmapper.deleteByPrimaryKey(id);

}

@Override

public List<Menu> searchByPrimaryPid(int pid) {

// TODO Auto-generated method stub

List<Menu> menulist=new ArrayList<Menu>();

List<ModuleBean> beanlist=modulebeanmapper.selectByPrimaryPid(pid);

if(beanlist!=null)

{

Menu menu=new Menu();

for(ModuleBean b:beanlist)

{

BeanUtils.copyProperties(b, menu);

if(b.getState()==1)

{

menu.setState("closed");

}

menulist.add(menu);

}

}

return menulist;

}

}

mapper层

[html] view
plain copy







<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >

<mapper namespace="com.sc.dao.ModuleBeanMapper" >

<resultMap id="BaseResultMap" type="com.sc.po.ModuleBean" >

<id column="ID" property="id" jdbcType="INTEGER" />

<result column="PID" property="pid" jdbcType="INTEGER" />

<result column="TEXT" property="text" jdbcType="VARCHAR" />

<result column="ICONCLS" property="iconcls" jdbcType="VARCHAR" />

<result column="SRC" property="src" jdbcType="VARCHAR" />

<result column="SEQ" property="seq" jdbcType="INTEGER" />

<result column="IS_MENU" property="isMenu" jdbcType="INTEGER" />

<result column="STATE" property="state" jdbcType="INTEGER" />

</resultMap>

<sql id="Base_Column_List" >

ID, PID, TEXT, ICONCLS, SRC, SEQ, IS_MENU, STATE

</sql>

<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >

select

<include refid="Base_Column_List" />

from tbl_sys_module

where ID = #{id,jdbcType=INTEGER}

</select>

<select id="selectByPrimaryPid" resultMap="BaseResultMap" parameterType="java.lang.Integer" >

select * from tbl_sys_module

where PID = #{pid,jdbcType=INTEGER}

</select>

<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >

delete from tbl_sys_module

where ID = #{id,jdbcType=INTEGER}

</delete>

<insert id="insert" parameterType="com.sc.po.ModuleBean" >

insert into tbl_sys_module (ID, PID, TEXT,

ICONCLS, SRC, SEQ,

IS_MENU, STATE)

values (#{id,jdbcType=INTEGER}, #{pid,jdbcType=INTEGER}, #{text,jdbcType=VARCHAR},

#{iconcls,jdbcType=VARCHAR}, #{src,jdbcType=VARCHAR}, #{seq,jdbcType=INTEGER},

#{isMenu,jdbcType=INTEGER}, #{state,jdbcType=INTEGER})

</insert>

<insert id="insertSelective" parameterType="com.sc.po.ModuleBean" >

insert into tbl_sys_module

<trim prefix="(" suffix=")" suffixOverrides="," >

<if test="id != null" >

ID,

</if>

<if test="pid != null" >

PID,

</if>

<if test="text != null" >

TEXT,

</if>

<if test="iconcls != null" >

ICONCLS,

</if>

<if test="src != null" >

SRC,

</if>

<if test="seq != null" >

SEQ,

</if>

<if test="isMenu != null" >

IS_MENU,

</if>

<if test="state != null" >

STATE,

</if>

</trim>

<trim prefix="values (" suffix=")" suffixOverrides="," >

<if test="id != null" >

#{id,jdbcType=INTEGER},

</if>

<if test="pid != null" >

#{pid,jdbcType=INTEGER},

</if>

<if test="text != null" >

#{text,jdbcType=VARCHAR},

</if>

<if test="iconcls != null" >

#{iconcls,jdbcType=VARCHAR},

</if>

<if test="src != null" >

#{src,jdbcType=VARCHAR},

</if>

<if test="seq != null" >

#{seq,jdbcType=INTEGER},

</if>

<if test="isMenu != null" >

#{isMenu,jdbcType=INTEGER},

</if>

<if test="state != null" >

#{state,jdbcType=INTEGER},

</if>

</trim>

</insert>

<update id="updateByPrimaryKeySelective" parameterType="com.sc.po.ModuleBean" >

update tbl_sys_module

<set >

<if test="pid != null" >

PID = #{pid,jdbcType=INTEGER},

</if>

<if test="text != null" >

TEXT = #{text,jdbcType=VARCHAR},

</if>

<if test="iconcls != null" >

ICONCLS = #{iconcls,jdbcType=VARCHAR},

</if>

<if test="src != null" >

SRC = #{src,jdbcType=VARCHAR},

</if>

<if test="seq != null" >

SEQ = #{seq,jdbcType=INTEGER},

</if>

<if test="isMenu != null" >

IS_MENU = #{isMenu,jdbcType=INTEGER},

</if>

<if test="state != null" >

STATE = #{state,jdbcType=INTEGER},

</if>

</set>

where ID = #{id,jdbcType=INTEGER}

</update>

<update id="updateByPrimaryKey" parameterType="com.sc.po.ModuleBean" >

update tbl_sys_module

set PID = #{pid,jdbcType=INTEGER},

TEXT = #{text,jdbcType=VARCHAR},

ICONCLS = #{iconcls,jdbcType=VARCHAR},

SRC = #{src,jdbcType=VARCHAR},

SEQ = #{seq,jdbcType=INTEGER},

IS_MENU = #{isMenu,jdbcType=INTEGER},

STATE = #{state,jdbcType=INTEGER}

where ID = #{id,jdbcType=INTEGER}

</update>

<select id="getAll" resultMap="BaseResultMap" parameterType="map">

select * from tbl_sys_module

<if test="#{text} != '%%'">

where TEXT like #{text,jdbcType=VARCHAR}

</if>

limit #{curRow},#{pageSize}

</select>

</mapper>

效果截图

总结：

分页的地方还是有一些bug。EasyUi还是比较好用的一款前台html利器，如果需要做很多前台数据处理，强力推荐。