EasyUi Datagrid的基礎使用
阿新 • • 發佈:2018-12-31
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));
}
pageUtil相關程式碼
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()
<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利器,如果需要做很多前臺資料處理,強力推薦。
大三了,是不是該準備一下考研了,做些應用,將來能養活自己不?三五年後是不是又面臨二次就業?
還是喜歡做應用的,考哪個學校哪個專業的研究生好呢?