EasyUi Datagrid的基础使用

发布时间:2016-12-11 10:19:08 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"EasyUi Datagrid的基础使用",主要涉及到EasyUi Datagrid的基础使用方面的内容,对于EasyUi Datagrid的基础使用感兴趣的同学可以参考一下。

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> 效果截图 总结: 这是看过孙宇的EasyUI 中关于Datagrid的部分,算是一个总结吧,稍微实现了一下后台,其中还有些bug,比如分页那地方。EasyUi还是比较好用的一款前台html利器,如果需要做很多前台数据处理,强力推荐。 大三了,是不是该准备一下考研了,做些应用,将来能养活自己不?三五年后是不是又面临二次就业? 还是喜欢做应用的,考哪个学校哪个专业的研究生好呢?

上一篇:为什么不能使用Thread.stop()方法?
下一篇:守护进程的编程规则(学fork必看)

相关文章

相关评论