文档章节

EasyUI学习笔记7:MIS开发利器_ datagrid插件(中)

ooad
 ooad
发布于 2015/03/26 10:14
字数 1673
阅读 411
收藏 1
点赞 0
评论 7

一、引言

上篇笔记我们已经新建了datagrid,并能够读取本地json数据。表格上方有工具栏,有添加、修改、删除、刷新4个按钮。表格下方有分页栏。本篇将给这些按钮添加事件。

二、数据管理对话框

首先,我们需要一个对数据进行管理的对话框,那对话框放在哪个页面呢?

开发MIS系统中一般有两种方案:一是数据列表(包括删除操作)和数据管理(添加和修改)在一个页面,另一种数据列表和数据管理各建一个页面。分开的话职责相对清晰,代码也不用堆在一起,但会涉及到页面跳转和传递数据的问题,交互复杂点。

作为一个小白笔记,我们这里采用前者。

在customer.html中添加如下div

div id="dialog" data-options="closed:true" title="客户管理" style="width:250px;height:200px;text-align:center" >
              <form id="form" method="post">
                     <div>
                        <label>客户编号</label>
                        <input name="customerNo" data-options="required:true" />
                 </div>
                 <div>
                        <label>客户名称</label>
                        <input name="customerName" data-options="required:true" />
                 </div>
                 <div>
                        <label>联系电话</label>
                        <input name="telephone" data-options="required:false" />
                 </div>
                 <div>
                        <label>联系地址</label>
                        <input name="address" data-options="required:false"/>
                 </div>
              </form>
       </div>

对话框需要用到easyui-dialog插件。必要解释如下:

(1) closed用来定义该对话框默认是关闭的。也就是说,虽然这段div在页面上,但运行时其实是看不见的。

(2) easyui-validatebox插件可以让我们非常轻松地对文本输入框进行格式校验。比如这里的required属性表示是否可以为空,true代表必填字段。

(3) 请恕我啰嗦,代码中id诸如form、dialog、gird等一定要与js中#form,#dialog,#grid等一定要相同。

(4) 咦,怎么没有“保存”和“取消”那两个按钮。别着急,我们使用js代码实现的。

显示对话框的js代码如下:

/* 显示Dialog*/
		function openDialog(title){
			$("#dialog").dialog({
				resizable: false,
				modal: true,
				buttons: [{ //设置下方按钮数组
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                       save();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                    	closeDialog();
                    }
                }]
			});
			$("#dialog").dialog('setTitle', title);
			$("#dialog").dialog('open');
		}

我们将显示对话款封装成了一个函数,参数是title。显示对话框其实是不用参数的,即

$("#dialog").dialog('open');

那封装的方法为什么要设参数呢?因为添加操作和修改操作我们是用同一个对话框,这样可以让它根据操作不同显示不同标题。

modal属性学过swing同学都知道啦,设为true就是有模对话框,显示时就无法激活其他页面。两个按钮调用的方法分别是保存数据和关闭对话框。关闭对话框方法实现,其实就2句:

/* 关闭Dialog*/
		function closeDialog() {	
		    $("#form").form('clear'); // 清空form的数据
			$("#dialog").dialog('close');// 关闭dialog
		}

至于保存数据方法实现,请稍等片刻,和添加、修改操作一起奉上。

三、添加和修改操作

1. 添加操作

直接上js代码:

/* 添加数据*/
		function add() {
			openDialog('添加客户'); // 显示添加数据dialog窗口
			$("#form").form('clear'); // 清空form的数据
			url = 'customer!add.action'; //后台添加数据action
		}

显示对话框,标题为“添加客户”,清空表单数据。

customer!add.action(下篇奉上)是后台struts添加数据操作地址,这里改成你的服务器数据操作地址就可以了。

这里出现了一个新的easyui插件,form表单插件。

2. 修改操作

还是先贴代码:

/* 修改数据*/
		function edit() {
			var row = $('#grid').datagrid('getSelected'); //// 得到选中的一行数据
			//如果没有选中记录
			if(row == null){
				$.messager.alert("提示", "请选择一条记录",'info');
				return;
			}
			openDialog('修改客户'); // 显示更新数据dialog窗口
			$("#form").form('load', row); // 加载选择行数据
			url = 'customer!edit.action?id='+row.id; //后台更新数据action
		}

修改操作稍微复杂点,解释如下:

首先调用datagrid的getSelected方法选择一行。注意,如果采用这样的交互方式,建议把datagrid的singleSelect 属性设为true,代表最多只能选一行。把这一行数据存在row中。最爽的就是接下来这句了$("#form").form('load', row)。一句就能把数据加载到对话框里,想当年我们用jsp的时候…….不堪回首

3. 保存数据

依旧先上代码:

/* 保存数据*/
		function save(){
			$('#form').form('submit',{
				url: url,  //提交地址
				onSubmit: function(){
					return $(this).form('validate'); //前台字段格式校验
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.success){
						closeDialog();// 调用closeDialog;	
						reload();// 重新加载
						$.messager.show({    //显示正确信息
							title: '提示',
							msg: result.msg
						});
					} else {				
						$.messager.show({	//显示错误信息
							title: '错误',
							msg: result.msg
						});
					}
				}
			});
		}

这个好像更为复杂点。

查看http://www.jeasyui.net/表单插件如何提交数据。copy三段示例代码:

去做一个提交动作

1.	// call 'submit' method of form plugin to submit the form
2.	$('#ff').form('submit', {
3.	    url:...,
4.	    onSubmit: function(){
5.			// do some check
6.			// return false to prevent submit;
7.	    },
8.	    success:function(data){
9.			alert(data)
10.	    }
11.	});

通过额外的参数提交

1.	$('#ff').form('submit', {
2.	    url:...,
3.	    onSubmit: function(param){
4.			param.p1 = 'value1';
5.			param.p2 = 'value2';
6.	    }
7.	});

现在在 'success' 回调函数中处理 JSON 字符串。

1.	$('#ff').form('submit', {
2.	    success: function(data){
3.			var data = eval('(' + data + ')'); // change the JSON string to javascript object
4.			if (data.success){
5.				alert(data.message)
6.			}
7.	    }
8.	});

相信对照API你已经懂得七七八八了,不再解释。再次强调,看官方的api、教程、demo是灰常灰常灰常重要。

四、删除和刷新操作

1. 删除操作

依旧直接上代码:

/* 删除数据*/
		function remove(){
			var row = $('#grid').datagrid('getSelected');
			//如果没有选中记录
			if(row == null){
				$.messager.alert("提示", "请选择一条记录",'info');
				return;
			}
			$.messager.confirm('确认', '确定要删除吗?', function (r) {
					if (r) {
						//提交到后台的action
						$.post('customer!remove.action', { id: row.id }, function (result) { 
							if (result.success) {
								reload();
								$.messager.show({	//显示正确信息
									title: '提示',
									msg: result.msg
								});									
							} else {
								$.messager.show({	//显示错误信息
									title: '错误',
									msg: result.msg
								});
							}
						}, 'json');
					}
				});
			
		}

后台删除数据需要传一个id,即所选行的row.id。其余不解释。我已经越来越懒了,版式都懒得排了,可见我是一个极度缺乏耐心的人。

2.刷新操作

上述代码经常能看到一句,reload()。这是什么?这其实是自己封装的,作用刷新页面。其实就一句,脱裤子放P,一句你还封装。其实还是有必要的,为刷新按钮服务,我有对称强迫症,必须一个按钮调用一个方法。

/* 刷新grid*/
		function reload(){
			$('#grid').datagrid('reload');
		}

伸个懒腰,easyui的笔记终于临近尾声了,最后一篇就是与ssh的struts的action交换数据了。



© 著作权归作者所有

共有 人打赏支持
ooad
粉丝 93
博文 23
码字总数 17510
作品 0
广州
加载中

评论(7)

楷书
楷书
第八篇,打错
楷书
楷书
老师第七篇啥时候出?
ooad
ooad

引用来自“Alexgordon”的评论

貌似easyui-dialog的modal属性不兼容谷歌浏览器
没考虑兼容性。不过试了下谷歌浏览器这句是有效的。
Alexgordon
Alexgordon
貌似easyui-dialog的modal属性不兼容谷歌浏览器
楷书
楷书

引用来自“楷书”的评论

第一段代码的div是不是漏了class="easyui-dialog"?

引用来自“ooad”的评论

加上最好,不加其实也没关系。
不加的话好像第一次打开tab时,最下面会出现dialog,然后点击工具栏后会消失
ooad
ooad

引用来自“楷书”的评论

第一段代码的div是不是漏了class="easyui-dialog"?
加上最好,不加其实也没关系。
楷书
楷书
第一段代码的div是不是漏了class="easyui-dialog"?
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
0
3
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
Easyui的datagrid结合hibernate实现数据分页

Easyui的datagrid结合hibernate实现数据分页 最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,...

岁月无痕
2015/06/01
0
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
0
0
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
0
8
jquery easyui tab加载内容的几种方法

两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体...

文文1
2015/03/26
0
0
jquery easyui的datagrid在初始化的时候会请求两次URL?

html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决...

五毛钱的饼
2014/09/19
0
0
easyui datagrid plunges 扩展 插件

项目使用 springmvc4.x spring4.x hibernate4.x easyui 为了便于开发,扩展了easyui 的 datagrid 功能,下面直接贴上扩展代码: 具体的实现项目可见 : https://git.oschina.net/alexgaoyh/...

alexgaoyh
2014/09/23
0
0
解决JQuery EasyUI 加载两次url的问题

解决JQuery EasyUI 加载两次url的问题 1、传统方式 1 $(function () { 2 var url = "../Source/Query/jhDataQry.ashx?action=query"; 3 $(dg).datagrid({ 4 url: url, 5 queryParams: { 6 q......

地瓜2013
2014/07/09
0
1
easyui datagrid deleteRow(删除行)的BUG!

项目中又用到easyui 的datagrid做数据展示。功能很强大,很实用,但bug也很多。今天这个就够让人头疼。 如图,现在有个删除功能,选中一行,点击就可以删除。 easyui datagrid 提供了deleteR...

铂金小鸟
2012/09/06
0
17

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux服务器下的HTTP抓包分析

说到抓包分析,最简单的办法莫过于在客户端直接安装一个Wireshark或者Fiddler了,但是有时候由于客户端开发人员(可能是第三方)知识欠缺或者其它一些原因,无法顺利的在客户端进行抓包分析,...

mylxsw
10分钟前
0
0
mybatis3-javaapi

sqlSessionFactoryBuilder->sqlSessionFactory->sqlSession<-rowbound<-resultHandler myBatis uses a Java enumeration wrapper for transaction isolation levels, called TransactionIsol......

writeademo
13分钟前
0
0
Java NIO:浅析I/O模型

也许很多朋友在学习NIO的时候都会感觉有点吃力,对里面的很多概念都感觉不是那么明朗。在进入Java NIO编程之前,我们今天先来讨论一些比较基础的知识:I/O模型。下面本文先从同步和异步的概念...

yzbty23
13分钟前
0
0
了解iOS消息推送一文就够:史上最全iOS Push技术详解

本文作者:陈裕发, 腾讯系统测试工程师,由腾讯WeTest整理发表。 1、引言 开发iOS系统中的Push推送,通常有以下3种情况: 1)在线Push:比如QQ、微信等IM界面处于前台时,聊天消息和指令都会...

JackJiang-
15分钟前
0
0
Mysql汉子转拼音

update t_app_city SET CITY_NAME_BEGIN = ELT(INTERVAL(CONV(HEX(LEFT(CONVERT(CITY_NAME USING gbk),1)),16,10), 0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7, 0xBFA......

尘叙缘
17分钟前
0
0
大数据构建智慧城市“新引擎”,加速推进新旧动能转换

——“大数据与智慧城市”技术交流分享会——济南站召开 7月13日,“大数据携手智慧城市,助力山东新旧动能转换”技术交流分享会——济南站在山东信息通信技术研究院会议室成功举办,此次会议...

左手的倒影
19分钟前
2
0
tomcat 学习笔记之 Session管理

1、Catalina 通过一个 Session 管理器的组件来管理建立的Session 对象 该组件由 org.apache.catalina.Manager 接口表示 Session 管理器必须与一个 Context 关联 Session 管理器负责,创建、更...

职业搬砖20年
19分钟前
0
0
jquery获取input框的几种方式

//如何用jquery获取<input id="test" name="test" type="text"/>中输入的值?$(" #test ").val()$(" input[ name='test' ] ").val()$(" input[ type='text' ] ").val()$(" input[ ......

gulf
22分钟前
0
0
gradle的环境变量的配置

gradle的环境变量的配置 1.首先下载jdk,并且配置jdk的环境变量. 2.找到自己AS安装gradle的目录 我自己的目录为:F:\Android Studio3.1.3\gradle\gradle-4.4 创建环境变量:GRADLE_PATH: F:\A...

android-key
28分钟前
0
0
saltstack配置apache

1.相关配置 #vim /etc/salt/master //打开如下内容的注释 file_roots: base: - /srv/salt #mkdir /srv/salt #vim /srv/salt/top.sls base: 'slaver.test.com': - apache 注意:若换成 '*',则......

硅谷课堂
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部