详解datagrid使用方法(重要)

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文件

<!-- 方式二:发送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>

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变为: 请求     响应:    
   3、案例:取派员分页查询     (1)页面调整              修改页面中datagrid的URL地址             
    
    (2)服务端实现

分装分页相关属性

/**
	 * 通用分页查询方法
	 */
	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);
	}

//属性驱动,接收页面提交的分页参数
	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)页面调整

//修改删除按钮绑定的事件:
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)页面调整    第一步:为数据表格绑定双击事件第二步:复制页面中添加取派员窗口,获得修改取派员窗口
第三步:定义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使用方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解jquery easyui之datagrid使用参考

    本文介绍了jquery easyui之datagrid使用,具体如下: 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上的div标签: <div id="magazineGrid"> </div> js代码: $('#magazineGrid').datagrid({ height: 340, url: 'url', method: 'POST', queryParam

  • JQueryEasyUI datagrid框架的基本使用

    今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码 代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引

  • DataGridView - DataGridViewCheckBoxCell的使用介绍

    Datagridview是.net中最复杂的控件,由于人们对表格的格式要求多种多样,所以编写一个通用的Datagridview(类似JSF中的datatable)非常困难的. Datagridview中,用户可以对行.列.单元格进行编程.如行中可以插入下拉列表.复选框.编辑框.单选框等多种控件.每种控件都以DataGridView开头.如:单选框类为DataGridViewCheckBoxCell. DataGridViewCheckBoxCell有一些恶心的属性折磨了我很久,下加以详细说明.

  • 实现DataGridView控件中CheckBox列的使用实例

    复制代码 代码如下: /// <summary>        /// 实现DataGridView控件中CheckBox列的使用        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>        private void dgvTradList_Ce

  • jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them

  • C#中datagridview使用tooltip控件显示单元格内容的方法

    本文实例讲述了C#中datagridview使用tooltip控件显示单元格内容的方法.分享给大家供大家参考,具体如下: 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;

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

    1.将静态HTML渲染为datagrid样式 <!-- 方式一:将静态HTML渲染为datagrid样式 --> <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'id'">编号</th> <th data-options="field:'name'">姓名</th&g

  • mysql 5.7.20解压版安装方法步骤详解(两种方法)

    我来讲解下window64位下MySQL的安装,MySQL是在5.7开始安装版就只有32位下载服务了,这里我讲解解压版的MySQL如何安装,在安装MySQL解压版时对于新手的小编来说也是头疼得很,各种问题各种来没有安装版的一键轻松搞定的方便,安装时需要注意三点:1.路径配置,2.安装时MySQL端口被占用这时需要关闭被占用端口,3.cmd必须是在管理员环境下设置MySQL信息. MySQL官网: https://www.mysql.com/downloads/ http://www.jb51.n

  • Android AsyncTask详解及使用方法

     Android AsyncTask详解及使用方法  简介: AsyncTask就是一个封装过的后台任务类,顾名思义就是异步任务. AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的结果给UI主线程. 一.如果想自定义一个AsyncTask,可以写一个类,继承AsyncTask. eg: . //第一个参数为doInBackground中传入的类型,第二个为

  • 详解Struts2动态方法调用

    动态方法就是一个Action对应多个请求,减少Action的数量 1.指定method属性 <action name="addAction" method="add" class="com.venn.action.HelloWorldAction"> <result>/jsp/add.jsp</result> </action> 2.感叹号(!)方式(不推荐使用) <action name=&

  • 详解Python import方法引入模块的实例

    详解Python import方法引入模块的实例 在Python用import或者from-import或者from-import-as-来导入相应的模块,作用和使用方法与C语言的include头文件类似.其实就是引入某些成熟的函数库和成熟的方法,避免重复造轮子,提高开发速度. python的import方法可以引入系统的模块,也可以引入我们自己写好的共用模块,这点和PHP非常相似,但是它们的具体细节还不是很一样.因为php是在引入的时候指明引入文件的具体路径,而python中不能够写文件路径进

  • IOS中Json解析实例方法详解(四种方法)

    作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有的json代码格式比较混乱,可以使用此"http://www.bejson.com/"网站来进行JSON格式化校验(点击打开链接).此网站不仅可以检测Json代码中的错误,而且可以以视图形式显示json中的数据内容,很是方便. 从IOS5开始,APPLE提供了对json的原生支持(NSJSONSerialization),但是为了兼容以前的iOS版本,可以使用第三方库来解析Json. 本文将介绍Tou

  • 详解C#扩展方法原理及其使用

    1.写在前面 今天群里一个小伙伴问了这样一个问题,扩展方法与实例方法的执行顺序是什么样子的,谁先谁后(这个问题会在文章结尾回答).所以写了这边文章,力图从原理角度解释扩展方法及其使用. 以下为主要内容: 什么是扩展方法 扩展方法原理及自定义扩展方法 扩展方法的使用及其注意事项 2.什么是扩展方法 一般而言,扩展方法为现有类型添加新的方法(从面向对象的角度来说,是为现有对象添加新的行为)而无需修改原有类型,这是一种无侵入而且非常安全的方式.扩展方法是静态的,它的使用和其他实例方法几乎没有什么区别.

  • 详解Java中NullPointerException异常的原因详解以及解决方法

    NullPointerException是当您尝试使用指向内存中空位置的引用(null)时发生的异常,就好像它引用了一个对象一样. 当我们声明引用变量(即对象)时,实际上是在创建指向对象的指针.考虑以下代码,您可以在其中声明基本类型的整型变量x: int x; x = 10; 在此示例中,变量x是一个整型变量,Java将为您初始化为0.当您在第二行中将其分配给10时,值10将被写入x指向的内存中. 但是,当您尝试声明引用类型时会发生不同的事情.请使用以下代码: Integer num; num

  • 详解MyBatis-Plus updateById方法更新不了空字符串/null解决方法

    最近遇到了Mybatis-Plus updateById(),更新某一个字段为null,却发现没有更新成功,发现有一个博客记录挺好的.转载过来,方便自己看. 一.简介 因为最近在忙项目,好久都没有更新博客,最近在项目中刚好遇到一个问题,就是在使用MyBatis-Plus updateById(xxx)的时候,居然更新不了字符串或者null,本文分享两种解决方案,具体大家可以根据自己的需求选择一种方法解决. 二.原理 在实际项目中,难免更新的时候,有可能会把已有的值更新成空字符串或者null,但是

  • 详解Java中方法next()和nextLine()的区别与易错点

    1.基本语法 1.1基本使用方法 本篇博客重点nextLine()会读取换行('\r'),但是不会进行输出. Java中Scanner类中的方法next()和nextLine()都是吸取输入台输入的字符,区别: next()不会吸取字符前/后的空格/Tab键,只吸取字符,开始吸取字符(字符前后不算)直到遇到空格/Tab键/回车截止吸取: nextLine()吸取字符前后的空格/Tab键,回车键截止. 输入两行字符串: 我爱学JAVA 我真的很爱爱学JAVA 我真的很爱很爱学JAVA 期望输出结果

随机推荐