摘要 使用datagrid实现数据列表和CRUD操作，并实现与后台action交互，支持后台分页与排序。。

easyui datagrid dialog form

目录[-]

  • 一、引言
  • 二、数据管理对话框
  • 三、添加和修改操作
  • 1. 添加操作
  • 2. 修改操作
  • 3. 保存数据
  • 四、删除和刷新操作
  • 1. 删除操作
  • 2.刷新操作

一、引言

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

二、数据管理对话框

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

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

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

在customer.html中添加如下div

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 显示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句：

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

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

三、添加和修改操作

1. 添加操作

直接上js代码：

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

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

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

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

2. 修改操作

还是先贴代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
/* 修改数据*/
        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. 保存数据

依旧先上代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 保存数据*/
        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
2
3
4
5
6
7
8
9
10
11
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
2
3
4
5
6
7
1.  $('#ff').form('submit', {
2.      url:...,
3.      onSubmit: function(param){
4.          param.p1 = 'value1';
5.          param.p2 = 'value2';
6.      }
7.  });

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

?
1
2
3
4
5
6
7
8
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. 删除操作

依旧直接上代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 删除数据*/
        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，一句你还封装。其实还是有必要的，为刷新按钮服务，我有对称强迫症，必须一个按钮调用一个方法。

?
1
2
3
4
/* 刷新grid*/
        function reload(){
            $('#grid').datagrid('reload');
        }

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

EasyUI学习笔记7：MIS开发利器_ datagrid插件(中)相关推荐

  1. EasyUI学习笔记6：MIS开发利器_ datagrid插件(上)

    为什么80%的码农都做不了架构师?>>>    一.引言 终于来到easyui系列笔记的重点部分--数据网格datagrid插件.在MIS开发中,需要展示数据大量数据并且频繁地进行C ...

  2. EasyUI学习笔记8：MIS开发利器_ datagrid插件(下)(终结篇)

    为什么80%的码农都做不了架构师?>>>    一.引言 最后一篇是easyui与struts传递数据.拖了好多天,因为一直没想好怎么写.这部分代码参考了一个开源项目,很早之前写的, ...

  3. EasyUI学习笔记5：来点甜点_ menu和theme插件

    摘要 使用easyui-menu插件实现右键菜单关闭tab页,实现更改主题 easyui menu 目录[-] 一.引言 二.右键菜单关闭tab 1．绑定tabs的右键菜单 2. 处理菜单点击事件 三 ...

  4. 学习笔记：Java 并发编程①_基础知识入门

    若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 视频链接:https://www.bilibili.com/video/av81461839 视频下载: ...

  5. Polyworks脚本开发学习笔记(十)-互动式开发及出错控制

    Polyworks脚本开发学习笔记(十)-互动式开发及出错控制 第八章组合的各种命令,完成了一个对所选的测点名称进行命名的任务.但是,由于任务中没有交互环节,只能机械地将 曲面点 - 包边点改为Flu ...

  6. Polyworks脚本开发学习笔记(一)-脚本开发环境

    Polyworks脚本开发学习笔记(一)-脚本开发环境 背景 Polyworks的扫描尺寸测量分析模块是我工作中经常用到的一个模块,我不是做测量的,但是利用Polyworks对扫描获得的点云来进行尺寸 ...

  7. 学习笔记：Java 并发编程④_无锁

    若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 视频链接:https://www.bilibili.com/video/av81461839 配套资料: ...

  8. Python学习笔记：Day1-2 开发环境搭建

    前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...

  9. Python学习笔记：web开发3

    前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...

最新文章

  1. Matlab实现 sift 特征匹配（代码源自网络）
  2. UE4制作程序背景游戏 Make a game with Procedural Backgrounds in UE4
  3. Ubuntu安装LNMP
  4. 杭州某知名xxxx公司急招大量java以及大数据开发工程师
  5. 每天进步一点点：andriod学习从零开始
  6. python预测实例教程_手把手教你用Python库Keras做预测（附代码）-阿里云开发者社区...
  7. mysql建表后添加约束_MYSQL建表完成之后添加约束
  8. 判断拐点_一文教你“如何寻找拐点”——拐点判断，简单易懂，建议收藏
  9. HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。...
  10. 物联网核心安全系列——车载物联网的加密防盗版
  11. 从APNIC获取中国IP地址列表
  12. JAVA基本IO操作
  13. sqlite驱动加载失败的解决办法
  14. 如何破解加密相册密码四大方法
  15. 请求的操作需要提升 win10
  16. 计算机不能辨别汉字wifi,电脑搜不到带汉字的wi-fi怎么办
  17. STM32之RGB灯仿真
  18. 带你全面解析Android框架体系架构view篇，全网疯传
  19. 【优化求解】基于蝗虫算法（MOGOA）求解多目标问题matlab源码
  20. 2022年全球区块链审计公司排行榜

热门文章

  1. 无限流量与5G即将来临，我们距淘汰Wi-Fi还有多少时间？
  2. 如何利用Slack客户端漏洞窃取Slack用户下载的所有文件
  3. java 从入门到单身狗_java 的23种设计模式 之单身狗和隔壁老王的故事
  4. 微信小程序map展示
  5. C语言编写简单的走迷宫小游戏
  6. 设计网站中的精品，你可能需要它--第五期(Logo设计，助你提升效率)
  7. C语言文件之程序文件和数据文件
  8. 使用手机APP远程控制51单片机
  9. vue 圆形 水波_vuejs 水波纹框架
  10. 怎么用python画房子_用python画一个小房子