详解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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
Yii清理缓存的方法
2016/01/06 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
python数组过滤实现方法
2015/07/27 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
开放系统互连参考模型
2016/06/29 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
小学生读书感言
2014/02/12 职场文书
海洋科学专业求职信
2014/08/10 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
关于开学的感想
2015/08/10 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python