详解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 相关文章推荐
一个简单的jquery进度条示例
Apr 28 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
JS实现小米轮播图
Sep 21 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
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
图片自动更新(说明)
2006/10/02 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
南京某公司笔试题
2013/01/27 面试题
保护环境建议书
2014/03/12 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
经费申请报告范文
2015/05/18 职场文书
妇产科护理心得体会
2016/01/22 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript