easyui1.4.1下的表格easyui-datagrid

最新推荐文章于 2024-04-13 07:06:41 发布
最新推荐文章于 2024-04-13 07:06:41 发布
阅读量1.4k 收藏
点赞数
分类专栏： jquery java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rzrenyu/article/details/51821042
版权
java 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
jquery
5 篇文章 0 订阅
订阅专栏

java技术框架springMVC

1.前台jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<table class="easyui-datagrid" id="roleList" title="岗位列表"
	data-options="singleSelect:false,collapsible:true,pagination:true,url:'/role/list',method:'get',pageSize:30,toolbar:toolbar">
	<thead>
		<tr>
			<th data-options="field:'ck',checkbox:true"></th>
			<!-- <th data-options="field:'id',width:200">ID</th> -->
			<th data-options="field:'name',width:200">岗位名称</th>
			<th data-options="field:'description',width:200">岗位描述</th>						
			<th data-options="field:'createTime',width:200,align:'center',formatter:TT.formatDateTime">创建日期</th>
            <th data-options="field:'updateTime',width:200,align:'center',formatter:TT.formatDateTime">更新日期</th>            
            <th data-options="field:'id',width:100,align:'center',formatter:TT.formatUrlRole">操作</th>
		</tr>
	</thead>
</table>
<script type="text/javascript" src="js/role/role-list.js"></script>

2.前台js 

/**
 * 选择岗位id
 * 
 * @returns {Array}
 */
function getSelectionsIds_role() {
	var roleid_str = $("#roleList");
	var sels = roleid_str.datagrid("getSelections");
	var ids = [];
	var names_br = [];
	var id_array=[];
	for ( var i in sels) {			
		ids.push(sels[i].id);
		names_br.push("<Br>"+sels[i].name);
	}	
	ids = ids.join(",");
	names_br = names_br.join(",");
	id_array.push(ids,names_br);	
	return id_array;
}

var toolbar = [
		{
			text : '新增',
			iconCls : 'icon-add',
			handler : function() {
				$(".tree-title:contains('新增岗位')").parent().click();
			}
		},
/*		{
			text : '查看',
			iconCls : 'icon-tip',
			handler : function() {	
				
				
				var id_array = getSelectionsIds_circle();
				var ids=id_array[0];	
				//console.log(ids.length);
				if (ids.length == 0) {
					$.messager.alert('提示', '未选中圈子!');
					return;
				}else if(ids.length >=20){//-------19位----------
					$.messager.alert('提示', '只能查看一个圈子!');
					return;
				}
				
				//--------给隐藏input赋值-----
				$("#circle_circleId").attr("value",ids);
				$('#tabs').tabs('close', "圈子用户列表");//先关闭"圈子用户列表"tab,然后再打开	
				//var pp = $('#tabs').tabs('getSelected'); 
				//console.log(pp);
				//var tab1 = pp.panel('options').tab;    // the corresponding tab object     
				//console.log(tab1);

				$('#tabs').tabs('add',{    
				    title:'圈子用户列表',    
				    content:'圈子用户列表',   
				    href: 'circle-users-list',
				    closable:true   
				   
				});  											
			}
		},*/
		{
			text : '删除',
			iconCls : 'icon-cancel',
			handler : function() {
				var id_array = getSelectionsIds_role();
				var ids=id_array[0];
				var names_br=id_array[1];
				if (ids.length == 0) {
					$.messager.alert('提示', '未选中岗位!');
					return;
				}
				$.messager.confirm('确认', '确定删除: ' + names_br + ' 的岗位吗？', function(
						r) {
					if (r) {						
						var params = {
							"ids" : ids,
							"deleteflag" : '0'
						};
						$.post("/role/delete", params, function(data) {
							if (data.status == 200) {
								$.messager.alert('提示', '删除岗位成功!', undefined,
										function() {
											$("#roleList").datagrid("reload");
										});
							}
						});
					}
				});
			}
		},

		'-', ];



/**
 * 修改岗位
 * @param id
 * @param name
 */
function modifyRole(id,name,des){
	$("#role_roleId_modify").attr("value",id);
	$("#role_name_modify").attr("value",name);
	$("#role_des_modify").attr("value",des);
	$('#tabs').tabs('close', "修改岗位");//先关闭"修改岗位"tab,然后再打开								  				
	$('#tabs').tabs('add',{    
	    title:'修改岗位',    
	    content:'修改岗位',   
	    href: 'role-modify',
	    closable:true   
	   
	});  
}
3.后台controller 

package org.bigdatacn.sfgk.jdpt.controller;

import java.util.Date;

import org.bigdatacn.sfgk.jdpt.common.pojo.DatagridResult;
import org.bigdatacn.sfgk.jdpt.common.pojo.JdResult;
import org.bigdatacn.sfgk.jdpt.common.utils.ExceptionUtil;
import org.bigdatacn.sfgk.jdpt.common.utils.IDUtils;
import org.bigdatacn.sfgk.jdpt.pojo.JdptRole;
import org.bigdatacn.sfgk.jdpt.service.RoleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/role")
public class RoleController {

	@Autowired
	RoleService roleService;

	/**
	 * 
	 * @description 查询所有岗位
	 * @author 
	 * @creatime 2016年6月18日下午4:20:26
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日下午4:20:26
	 * @param page
	 * @param rows
	 * @param id
	 * @return
	 */
	@RequestMapping("/list")
	@ResponseBody
	DatagridResult getRoleList(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "30") Integer rows, Long id) {		
		try {
			return roleService.getRoleList(page, rows);			 
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}		
	}
	/**
	 * 
	 * @description 删除一个或多个岗位
	 * @author 
	 * @creatime 2016年6月18日下午4:20:45
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日下午4:20:45
	 * @param ids
	 * @return
	 */
	@RequestMapping(value = "/delete", method = RequestMethod.POST)
	@ResponseBody
	public JdResult delete(String[] ids) {
		try {
			return roleService.delete(ids);
		} catch (Exception e) {
			e.printStackTrace();
			return JdResult.build(500, ExceptionUtil.getStackTrace(e));
		}	

	}
	/**
	 * 
	 * @description 新增岗位
	 * @author renzong
	 * @creatime 2016年6月20日上午10:43:23
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月20日上午10:43:23
	 * @param role
	 * @return
	 */
	@RequestMapping(value = "/save", method = RequestMethod.POST)
	@ResponseBody
	public JdResult save(JdptRole role) {
		try {
			Date time = new Date();
			role.setId(IDUtils.get19NumID());
			role.setCreateUserId("11111");
			role.setCreateTime(time);
			role.setUpdateUserId("11111");
			role.setUpdateTime(time);
			return roleService.create(role);
		} catch (Exception e) {
			e.printStackTrace();
			return JdResult.build(500, ExceptionUtil.getStackTrace(e));
		}

	}
	/**
	 * 
	 * @description 修改岗位
	 * @author renzong
	 * @creatime 2016年6月20日上午10:43:39
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月20日上午10:43:39
	 * @param role
	 * @return
	 */
	@RequestMapping(value = "/modify", method = RequestMethod.POST)
	@ResponseBody
	public JdResult modify(JdptRole role) {
		try {
			Date time = new Date();								
			role.setUpdateUserId("11111");//-------?
			role.setUpdateTime(time);
			return roleService.update(role);
		} catch (Exception e) {
			e.printStackTrace();
			return JdResult.build(500, ExceptionUtil.getStackTrace(e));
		}

	}

}

4.后台service 

package org.bigdatacn.sfgk.jdpt.service;

import org.bigdatacn.sfgk.jdpt.common.pojo.DatagridResult;
import org.bigdatacn.sfgk.jdpt.common.pojo.JdResult;
import org.bigdatacn.sfgk.jdpt.pojo.JdptRole;
import org.bigdatacn.sfgk.jdpt.pojo.JdptUser;

public interface RoleService {
	/**
	 * 
	 * @description 分页获取岗位列表
	 * @author renzong
	 * @creatime 2016年6月18日上午10:33:45
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日上午10:33:45
	 * @param page
	 * @param rows
	 * @return
	 */
	DatagridResult getRoleList(Integer page, Integer rows) throws Exception;

	/**
	 * 
	 * @description 删除一个或多个岗位
	 * @author renzong
	 * @creatime 2016年6月18日下午3:46:11
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日下午3:46:11
	 * @param ids
	 * @return
	 */
	JdResult delete(String[] ids) throws Exception;

	/**
	 * 
	 * @description 新增岗位
	 * @author renzong
	 * @creatime 2016年6月18日下午5:10:23
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日下午5:10:23
	 * @param role
	 * @return
	 */
	JdResult create(JdptRole role) throws Exception;

	/**
	 * 
	 * @description 修改岗位
	 * @author renzong
	 * @creatime 2016年6月20日上午10:45:07
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月20日上午10:45:07
	 * @param role
	 * @return
	 */
	JdResult update(JdptRole role);

}
5.后台serviceimpl 
package org.bigdatacn.sfgk.jdpt.service.impl;

import java.util.Date;
import java.util.List;

import org.bigdatacn.sfgk.jdpt.common.pojo.DatagridResult;
import org.bigdatacn.sfgk.jdpt.common.pojo.JdResult;
import org.bigdatacn.sfgk.jdpt.common.utils.IDUtils;
import org.bigdatacn.sfgk.jdpt.mapper.JdptRoleMapper;
import org.bigdatacn.sfgk.jdpt.pojo.JdptRole;
import org.bigdatacn.sfgk.jdpt.pojo.JdptRoleExample;
import org.bigdatacn.sfgk.jdpt.pojo.JdptRoleExample.Criteria;
import org.bigdatacn.sfgk.jdpt.pojo.JdptUser;
import org.bigdatacn.sfgk.jdpt.service.RoleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

@Service
public class RoleServiceImpl implements RoleService {
	@Autowired
	JdptRoleMapper roleMapper;

	/**
	 * 
	 * @description 分页获取岗位列表
	 * @author renzong
	 * @creatime 2016年6月18日上午10:33:45
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日上午10:33:45
	 * @param page
	 * @param rows
	 * @return
	 */
	@Override
	public DatagridResult getRoleList(Integer page, Integer rows) throws Exception {
		JdptRoleExample example = new JdptRoleExample();
		example.setOrderByClause("update_time desc");//排序
		Criteria criteria = example.createCriteria();		
		// 设置分页插件
		PageHelper.startPage(page, rows);
		List<JdptRole> list = roleMapper.selectByExample(example);

		DatagridResult datagrid = new DatagridResult();
		datagrid.setRows(list);
		// 获取总记录数
		PageInfo<JdptRole> pageInfo = new PageInfo<>(list);
		datagrid.setTotal(pageInfo.getTotal());
		return datagrid;
	}

	/**
	 * 
	 * @description 删除一个或多个岗位
	 * @author renzong
	 * @creatime 2016年6月18日下午4:11:14
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日下午4:11:14
	 * @param ids
	 * @return
	 */
	@Override
	public JdResult delete(String[] ids) throws Exception {
		JdptRoleExample example = null;
		for (String value : ids) {
			example = new JdptRoleExample();
			Criteria criteria = example.createCriteria();
			criteria.andIdEqualTo(value);
			roleMapper.deleteByExample(example);
		}
		return JdResult.ok();
	}

	/**
	 * 
	 * @description 新增岗位
	 * @author renzong
	 * @creatime 2016年6月18日下午5:11:08
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月18日下午5:11:08
	 * @param role
	 * @return
	 */
	@Override
	public JdResult create(JdptRole role) throws Exception {

		int n = roleMapper.insert(role);
		if (n > 0) {
			return JdResult.ok();
		} else {
			return JdResult.build(404, "保存失败");
		}

	}

	/**
	 * 
	 * @description 修改岗位
	 * @author renzong
	 * @creatime 2016年6月20日上午10:48:59
	 * @user renzong
	 * @update
	 * @updatetime 2016年6月20日上午10:48:59
	 * @param role
	 * @return
	 */
	@Override
	public JdResult update(JdptRole role) {
		JdptRoleExample example = new JdptRoleExample();
		Criteria criteria = example.createCriteria();
		criteria.andIdEqualTo(role.getId());
		
		int n = roleMapper.updateByExample(role, example);
		if (n > 0) {
			return JdResult.ok();
		} else {
			return JdResult.build(404, "修改失败");
		}	
	}

}

6.中间用到的实体类 
package org.bigdatacn.sfgk.jdpt.common.pojo;


/**
 * 
*     
* 类名称：Datagrid   
* 类描述：   
* 创建人：
* 创建时间：2016年6月21日 上午11:10:31   
* 修改人：   
* 修改时间：2016年6月21日 上午11:10:31   
* 修改备注：   
* @version    
*
 */
public class DatagridResult {
	private Long total;// 总数
	// 响应中的数据
	private Object rows;

	public Long getTotal() {
		return total;
	}

	public void setTotal(Long total) {
		this.total = total;
	}

	public Object getRows() {
		return rows;
	}

	public void setRows(Object rows) {
		this.rows = rows;
	}
}



package org.bigdatacn.sfgk.jdpt.pojo;

import java.util.Date;

public class JdptRole {
    private String id;

    private String name;

    private String description;

    private Date createTime;

    private String createUserId;

    private Date updateTime;

    private String updateUserId;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id == null ? null : id.trim();
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name == null ? null : name.trim();
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description == null ? null : description.trim();
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public String getCreateUserId() {
        return createUserId;
    }

    public void setCreateUserId(String createUserId) {
        this.createUserId = createUserId == null ? null : createUserId.trim();
    }

    public Date getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }

    public String getUpdateUserId() {
        return updateUserId;
    }

    public void setUpdateUserId(String updateUserId) {
        this.updateUserId = updateUserId == null ? null : updateUserId.trim();
    }
}



rzrenyu
关注
专栏目录
EasyUI1.4.1API中文版.zip
09-02
这个压缩包“EasyUI1.4.1API中文版.zip”包含了EasyUI 1.4.1版本的中文文档，对于国内开发者来说，这是一个非常实用的资源，因为它解决了语言障碍，帮助我们更好地理解和使用EasyUI。 在EasyUI中，`tree`组件是一个...
使用jquery、EasyUI 实现可编辑表格复杂功能
weixin_33801856的博客
08-18 456
2019独角兽企业重金招聘Python工程师标准>>> ...
五、easyUI中的datagrid（数据表格）组件
weixin_44230693的博客
05-18 5707
五、easyUI中的datagrid（数据表格）组件
easyui动态控制表格字段显示、导出表格数据
沐雨橙风ιε的博客
08-06 3483
通过easyui实现动态控住表格字段显示、导出表格数据
easyUI数据表格
chiyangj的博客
06-27 1882
easyUI数据表格（DataGrid）DataGrid的使用二级目录三级目录 DataGrid的使用 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 通过js来创建 二级目录 三级目录 ...
使用easyui的可编辑数据表格(editable datagrid)
热门推荐
BoringError的博客
07-18 1万+
相关的参考属性、方法和事件： 1、列属性： 2、datagrid事件： 3、datagrid方法： 4、示范代码： &lt;table id="myTable"&gt;&lt;/table&gt; &lt;script type="text/javascript"&gt; $(function(){ //定义被编辑的行号 var rowNu...
jQuery EasyUI 1.4.1 离线简体中文API文档
12-16
jQuery EasyUI 1.4.1版本更新内容： Bug（修复） combogrid：修复combogrid组件和其他combo组件高度不一致的问题； datagrid：修复在datagrid行元素调用“updateRow”方法的时候丢失某些类样式的问题； ...
JQuery EasyUI 1.4.1 离线简体中文API文档
02-06
datagrid：修复在datagrid行元素调用“updateRow”方法的时候丢失某些类样式的问题； menubutton：修复在被禁用的按钮上使用“enable”方法无效的问题； form：修复在form组件中调用“clear”方法以后导致firebox...
jquery-easyui-1.4.1
01-21
EasyUI 提供了一系列预定义的 CSS 样式和 JavaScript 控件，覆盖了网页交互设计的各个方面，如窗口（window）、表单（form）、菜单（menu）、按钮（button）、表格（datagrid）、树形结构（tree）等。它的主要优点...
jQuery EasyUI-1.4.1
01-21
在表格（datagrid）组件中，EasyUI 提供了数据分页、排序、过滤、编辑等功能。开发者可以轻松地将后端数据源绑定到表格，实现数据的动态加载。此外，表格还支持行选择、行操作和自定义列模板，满足各种显示和交互...
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 3209
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
easyUI之datagrid（数据表格）使用，前端高级工程师面试实战
m0_v648374的博客
03-18 1055
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
JQuery Easy Ui dataGrid 数据表格
码农的技术专栏
11-14 2125
数据表格 - DataGrid 内容 概况 使用方法 数据表格属性 数据列属性 编辑 数据视图 事件 方法  继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。. 数据表格显示的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的支持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰
easyUI之datagrid（数据表格）使用(1)，灵魂拷问
2401_84093780的博客
04-03 961
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取获取！！（备注：前端）**整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版。
easyuI中datagrid控件讲解
weixin_41563376的博客
05-24 2114
datagrid控件：在VisualStudio中Razor视图引擎中使用datagrid控件实现对应的效果
easyUI-04（DataGrid数据查询）
m0_67777597的博客
05-07 448
1.DataGrid 1.1 DataGrid基本属性 1.1.1 基本属性 url : '', // 初始化请求路径 fitcolumns : false, // 列宽自适应 singleSelect : true, // 是否选中单行 checkOnSelect : true, // 点击行选中时该checkbox选中或取消选中 rownumbers:true, // 行号...
IDEA 使用EasyUI的Datagrid鼠标悬停显示单元格内容很简单
beiback的博客
03-29 3039
表头可能用到 1.easyui table表 html文件代码 关注里边的formatter属性 <table id="findAll" class="easyui-datagrid" title="用户数据信息" style="width: auto;height: auto" data-options="singleSelect:true,toolbar:'#yuangong_toolbar', stripe.
easyUI之datagrid（数据表格）使用
03-18 910
‘">’,**在界面中添加数据表格添加相关依赖每个表都需要建立相应的js建立book.js将demo文件中的datagrid.data1.json复制到WebContent目录下book.js代码如下：/*** 注意：js文件中不支持el表达式*/columns:[[{field:‘productname’,title:‘名称’,width:100},{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}]]});})
EasyUI Jquery 学习笔记 ——DataGrid（数据网格）与 Tree（树）详细版
最新发布
cccloveforever的博客
04-13 2225
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
个性化定制easyui-datagrid开发实践与技巧
本文是一篇关于easyui-datagrid开发实践的详细介绍，作者在文章中分享了自己在项目中使用easyui组件的经验。首先，作者回顾了早期项目开发环境与现在的对比，指出当时前端选择相对有限。随着技术的发展，easyui已经...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值