详解datagrid使用方法(重要)


Posted in Javascript onNovember 06, 2020

1、将静态HTML渲染为datagrid样式     

<!-- 方式一:将静态HTML渲染为datagrid样式 -->
	<table class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">编号</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>小明</td>
				<td>90</td>
			</tr>
			<tr>
				<td>002</td>
				<td>老王</td>
				<td>3</td>
			</tr>
		</tbody>
	</table>

2、发送ajax请求获取json数据创建datagrid     提供json文件         

详解datagrid使用方法(重要)

<!-- 方式二:发送ajax请求获取json数据创建datagrid -->
	<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" 
			class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">编号</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年龄</th>
			</tr>
		</thead>
	</table>

详解datagrid使用方法(重要) 

2、使用easyUI提供的API创建datagrid(掌握)    

<!-- 方式三:使用easyUI提供的API创建datagrid -->
	<script type="text/javascript">
		$(function(){
			//页面加载完成后,创建数据表格datagrid
			$("#mytable").datagrid({
				//定义标题行所有的列
				columns:[[
				 {title:'编号',field:'id',checkbox:true},
				 {title:'姓名',field:'name'},
				 {title:'年龄',field:'age'},
				 {title:'地址',field:'address'}
				 ]],
				//指定数据表格发送ajax请求的地址
				url:'${pageContext.request.contextPath }/json/datagrid_data.json',
				rownumbers:true,
				singleSelect:true,
				//定义工具栏
				toolbar:[
				 {text:'添加',iconCls:'icon-add',
				 	 //为按钮绑定单击事件
				 	 handler:function(){
				 	 	alert('add...');
				 	 }
				 },
				 {text:'删除',iconCls:'icon-remove'},
				 {text:'修改',iconCls:'icon-edit'},
				 {text:'查询',iconCls:'icon-search'}
				 ],
				//显示分页条
				pagination:true
			});
		});
	</script>

如果数据表格中使用了分页条,要求服务端响应的json变为:

详解datagrid使用方法(重要) 

请求  

   详解datagrid使用方法(重要)

响应:    

详解datagrid使用方法(重要)   

 3、案例:取派员分页查询    

(1)页面调整             

修改页面中datagrid的URL地址             

详解datagrid使用方法(重要)
     详解datagrid使用方法(重要) 
   

(2)服务端实现

            详解datagrid使用方法(重要)

        分装分页相关属性

            详解datagrid使用方法(重要)

    详解datagrid使用方法(重要)

/**
	 * 通用分页查询方法
	 */
	public void pageQuery(PageBean pageBean) {
		int currentPage = pageBean.getCurrentPage();
		int pageSize = pageBean.getPageSize();
		DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria();
		
		//查询total---总数据量
		detachedCriteria.setProjection(Projections.rowCount());//指定hibernate框架发出sql的形式----》select count(*) from bc_staff;
		List<Long> countList = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);
		Long count = countList.get(0);
		pageBean.setTotal(count.intValue());
		
		//查询rows---当前页需要展示的数据集合

(3)detachedCriteria.setProjection(null);//指定hibernate框架发出sql的形式----》select * from bc_staff    

int firstResult = (currentPage - 1) * pageSize;
		int maxResults = pageSize;
		List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults);
		pageBean.setRows(rows);
	}

详解datagrid使用方法(重要)

//属性驱动,接收页面提交的分页参数
	private int page;
	private int rows;
	
	/**
	 * 分页查询方法
	 * @throws IOException 
	 */
	public String pageQuery() throws IOException{
		PageBean pageBean = new PageBean();
		pageBean.setCurrentPage(page);
		pageBean.setPageSize(rows);
		//创建离线提交查询对象
		DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class);
		pageBean.setDetachedCriteria(detachedCriteria);
		staffService.pageQuery(pageBean);
		
		//使用json-lib将PageBean对象转为json,通过输出流写回页面中
		//JSONObject---将单一对象转为json
		//JSONArray----将数组或者集合对象转为json
		JsonConfig jsonConfig = new JsonConfig();
		//指定哪些属性不需要转json
		jsonConfig.setExcludes(new String[]{"currentPage","detachedCriteria","pageSize"});
		String json = JSONObject.fromObject(pageBean,jsonConfig).toString();
		ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
		ServletActionContext.getResponse().getWriter().print(json);
		return NONE;
	}

取派员的批量删除  

  在取派员表中存在一个删除标识位deltag,1表示已删除,0表示未删除   

(1)页面调整    

详解datagrid使用方法(重要)    

//修改删除按钮绑定的事件:
function doDelete(){
		//获取数据表格中所有选中的行,返回数组对象
		var rows = $("#grid").datagrid("getSelections");
		if(rows.length == 0){
			//没有选中记录,弹出提示
			$.messager.alert("提示信息","请选择需要删除的取派员!","warning");
		}else{
			//选中了取派员,弹出确认框
			$.messager.confirm("删除确认","你确定要删除选中的取派员吗?",function(r){
				if(r){
					
					var array = new Array();
					//确定,发送请求
					//获取所有选中的取派员的id
					for(var i=0;i<rows.length;i++){
						var staff = rows[i];//json对象
						var id = staff.id;
						array.push(id);
					}
					var ids = array.join(",");//1,2,3,4,5
					location.href = "staffAction_deleteBatch.action?ids="+ids;
				}
			});
		}
	}

(2)服务端实现第一步:在StaffAction中创建deleteBatch批量删除方法    

//属性驱动,接收页面提交的ids参数
	private String ids;
	
	/**
	 * 取派员批量删除
	 */
	public String deleteBatch(){
		staffService.deleteBatch(ids);
		return LIST;
	}

第二步:在Service中提供批量删除方法

/**
	 * 取派员批量删除
	 * 逻辑删除,将deltag改为1
	 */
	public void deleteBatch(String ids) {//1,2,3,4
		if(StringUtils.isNotBlank(ids)){
			String[] staffIds = ids.split(",");
			for (String id : staffIds) {
				staffDao.executeUpdate("staff.delete", id);
			}
		}
	}

第三步:在Staff.hbm.xml中提供HQL语句,用于逻辑删除取派员

<!-- 取派员逻辑删除 -->
 <query name="staff.delete">
 	UPDATE Staff SET deltag = '1' WHERE id = ?
 </query>

取派员修改功能

(1)页面调整    第一步:为数据表格绑定双击事件

详解datagrid使用方法(重要)

第二步:复制页面中添加取派员窗口,获得修改取派员窗口

详解datagrid使用方法(重要)

第三步:定义function

//数据表格绑定的双击行事件对应的函数
	function doDblClickRow(rowIndex, rowData){
		//打开修改取派员窗口
		$('#editStaffWindow').window("open");
		//使用form表单对象的load方法回显数据
		$("#editStaffForm").form("load",rowData);
	}

(2)服务端实现    在StaffAction中创建edit方法,修改取派员信息

/**
	 * 修改取派员信息
	 */
	public String edit(){
		//显查询数据库,根据id查询原始数据
		Staff staff = staffService.findById(model.getId());
		//使用页面提交的数据进行覆盖
		staff.setName(model.getName());
		staff.setTelephone(model.getTelephone());
		staff.setHaspda(model.getHaspda());
		staff.setStandard(model.getStandard());
		staff.setStation(model.getStation());
		staffService.update(staff);
		return LIST;
	}

到此这篇关于详解datagrid使用方法(重要)的文章就介绍到这了,更多相关datagrid使用方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
javascript学习之json入门
Dec 22 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 #Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 #Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 #Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
You might like
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
JQuery1.6 使用方法三
2011/11/23 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python2和python3哪个使用率高
2020/06/23 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
21岁生日感言
2014/02/27 职场文书
社区服务活动总结
2014/05/07 职场文书
公司慰问信范文
2015/03/23 职场文书
电工生产实习心得体会
2016/01/22 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python