EasyUi Datagrid的基础使用
转自:http://blog.csdn.net/qzshiyongjie123/article/details/19563249
Datagride的初始化方式
方式1 :class类型创建,这个创建方式比较简单,如果在已知表格内容的情况下可以使用,还是挺漂亮的
- <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
- <table id="dg">
- </table>
2:在Js中实现
- $('#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
- 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
- @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()
- @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));
- }
4:mapper层
getall()
- <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的全部内容
- 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层全部
- 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层实现
- 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层
- <?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>
效果截图
人在山中,才知道,白云也可以抓上一把,苍翠竟有清甜的味道。
人在山中,才知道,高度永远是一个变量,而快乐则是附于中跋涉过程的函数。
人在山中,才知道,庄严是望远时的一种心境,高处才能指点江山。