详解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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
用vue设计一个日历表
Dec 03 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如何实现只替换一次或N次
2015/10/29 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
pycharm设置注释颜色的方法
2018/05/23 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python如何实现复制目录到指定目录
2020/02/13 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python开发一款翻译工具
2020/10/10 Python
用python写PDF转换器的实现
2020/10/29 Python
pandas 数据类型转换的实现
2020/12/29 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
策划创业计划书
2014/02/06 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
买卖车协议书
2014/04/21 职场文书
2014年英语工作总结
2014/12/20 职场文书
先进个人自荐书
2015/03/06 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python