详解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 dialog的用法详细解析
Dec 19 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python二分法搜索算法实例分析
2015/05/11 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python读取指定日期邮件的实例
2019/02/01 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Django在Model保存前记录日志实例
2020/05/14 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
个人校本研修方案
2014/05/26 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
环卫个人总结
2015/03/03 职场文书
村党组织公开承诺书
2015/04/30 职场文书
统招统分证明
2015/06/23 职场文书
正规欠条模板
2015/07/03 职场文书
医院病假条范文
2015/08/17 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
Python日志模块logging用法
2022/06/05 Python