先在datagrid中添加toolbar配置项,增删改差的按钮,有3个属性,按钮名称,图标,回调函数,点击按钮会弹出一个对话框dialog,
dialog是关闭的,closed=true, toolbar:[ {text:"新增用户",
iconCls:"icon-add",
handler:function(){
$("#dd").dialog("open"); } },
{text:"编辑用户",
iconCls:"icon-edit" }, {text:"查询用户",
iconCls:"icon-search" }, {text:"删除用户",
iconCls:"icon-remove" } ],
dialog中有个form表单,注意form表单的method=true,不然提交表单的url携带的参数会被覆盖,只能在html指定,在form组件ajax请求中type指定不起作用
<div id="dd" title="用户新增" class="easyui-dialog" style="width:400px;height:400px;" closed=true>
<form id="userform" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"
required="true" class="easyui-validatebox" validType="namerules"
missingMessage="用户名不能为空"
></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间"
></td>
</tr>
<tr>
<td>性别</td>
<td>男:<input type="radio" name="sex" value=""> 女:<input
type="radio" name="sex" value=""></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet1?method=getcity" valueField="id" textField="name"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary" id="salary" validType="salrules[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td>
</tr>
<tr>
<td>起始时间</td>
<td><input type="text" name="starttime" id="starttime"></td>
</tr>
<tr>
<td>结束时间</td>
<td><input type="text" name="endtime" id="endtime"></td>
</tr> </table>
<tr colspan="" align="center">
<td colspan=""><a class="easyui-linkbutton" id="btn">点击</a></td>
</tr>
</form>
提交表单
$("#btn").click(function() { $("#userform").form("submit", {
url : "servlet1/userServlet1?method=save",
onSubmit : function() { //结合form组件的validate校验
if (!$("#userform").form("validate")) {
$.messager.show({
type : "post",
title : "提示信息",
msg : "验证没有通过,请重新提交表单"
})
return false
} }, success : function(data) {
var data = $.parseJSON(data);
$("#dd").dialog("close");//成功后要关闭对话框
$("#tableid").datagrid("reload");//同时刷新表格
$.messager.show({
title : data.status,
msg : data.message
})
},
error : function(data) {
var data = $.parseJSON(data);
$.messager.show({
title : data.status,
msg : data.message
})
}
}) })

新增之后,再次点击新增,表格会有原先新增的数据,所以再次点击新增时,需要清空一下表单:

清空表单的方法:

1、

$("#userform").find("input[name!=sex]").val(""); //一定要筛选下name!=sex,不然单选按钮或者有什么默认选项的也会被清空/

2、dom清空

$("#userform").get(0).reset();//调用dom的reset方法重置下

3、easyui form组件clear方法

$("#userform").form("clear");//这里不可用,会将sex默认值清空

 toolbar:[

                      {text:"新增用户",
iconCls:"icon-add",
handler:function(){
$("#userform").get(0).reset();//先清空表格
$("#dd").dialog("open");//弹出表格 } },
{text:"编辑用户",
iconCls:"icon-edit" }, {text:"查询用户",
iconCls:"icon-search" }, {text:"删除用户",
iconCls:"icon-remove" } ],

datagrid--新增的更多相关文章

  1. DataGrid新增行数据

    本文将介绍一下,如何通过Jquery MiniUI来添加Datagrid一行. 1.效果展示: ↓ 2.具体代码: <script type="text/javascript" ...

  2. 学习日记6、easyui datagrid 新增一行,编辑行,结束编辑和删除行操作记录

    1.新增一行并进入编辑状态 var index=$('#Numbers').datagrid('appendRow', { CardInformation: '开户行', CardNumber: '银 ...

  3. datagrid 新增,并行内编辑,提交保存

    <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain= ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

    http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  5. EasyUI_Datagrid学习总结

    EasyUI_Datagrid学习总结 2016年7月25日星期一 一.简介 Easyui中的datagrid从总的作用上讲,就是在列表上显示数据,类似于table,但是在table的基础上,此控件更 ...

  6. (转)使用Jquery+EasyUI 进行框架项目开发案例讲解之四---组织机构管理源码分享

    原文地址:http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码 ...

  7. Editable DataGrid 实现列表新增编辑功能

    今天在开发一个功能时候,需要直接在列表实现新增.编辑等功能.于是查看easyui 相关文档,找到相关解决办法. easyui的datagrid支持可编辑功能.它使用户能够向数据网格中添加一个新行.用户 ...

  8. 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能

    在我前面一篇分页的基础上,新增了添加功能和添加过程中的Ajax与Validate的验证功能.其他的功能在后面的博客写来,如果对您有帮助,敬请关注. 先看一下实现的效果: (1)点击添加学生信息按键后跳 ...

  9. Easyui datagrid绑定数据,新增,修改,删除方法(一)

    @{ ViewBag.Title = "UsersList"; } <script type="text/javascript"> $(functi ...

  10. 基于Easyui框架的datagrid绑定数据,新增,修改,删除方法(四)

    @{ ViewBag.Title = "xxlist"; } <script type="text/javascript" language=" ...

随机推荐

  1. MDX Cookbook 03 - MDX 查询中负数,零和空值 NULL 的格式化处理

    FORMAT_STRING 属性在处理计算成员(通常是度量值成员)的时候会经常使用到,比如指定标准 Standard, 货币 Currency 或者 Percent 百分比格式.除此之外,还可以自定义 ...

  2. rman输出日志的几种方法(转)

    在使用rman的时候经常会碰到以下两种场景,需要把rman的日志输出到文件中: 1.显示的日志太多,导致一个屏幕显示不完,影响了问题的诊断,这时候需要把rman的log输出到文本中,整个的诊断过程就相 ...

  3. 【HTML打印】HTML直接调用window下的打印机并执行打印任务(简单打印任务生成)

    1.<button onclick="preview('data');" id="print">打印</button> 2. 3.js: ...

  4. 【tp5】ThinkCMF5框架,配置使其支持不同终端PC/WAP/Wechat能加载不同配置和视图

    1.版本 5.0.18 2.在data/conf/ 新增config.php文件,内容如下: <?php //ThinkCMF5区别不同客户端加载不同配置文件和模块.视图 $default_mo ...

  5. 高性能IO之Reactor模式(转载)

    讲到高性能IO绕不开Reactor模式,它是大多数IO相关组件如Netty.Redis在使用的IO模式,为什么需要这种模式,它是如何设计来解决高性能并发的呢? 最最原始的网络编程思路就是服务器用一个w ...

  6. HDU_3746 Cyclic Nacklace(KMP)

    题目请点我 题解: 题目大意:有一个字符串s.能够在前后加入字符,使字符串成为一个循环次数至少为2的循环字符串.输出最少须要加入的字符数目. 首先能够证明题目能够等价为仅仅在末尾加入字符使满足题意.要 ...

  7. [docker]docker4种网络最佳实战

    参考: http://hicu.be/docker-container-network-types docker默认3中网络类型 参考: https://docs.docker.com/engine/ ...

  8. 物联网架构成长之路(9)-双机热备Keepalived了解

    1. 前言 负载均衡LB,高可用HA,这一小结主要讲双机热备方案保证高可用.这里选择Keepalived作为双机热备方案,下面就对具体的配置进行了解.2. 下载Keepalived wget http ...

  9. Python序列化之Json基础

    python的序列化就是将python的基本对象转换为字符串的过程,反之则是反序列化. 序列化类型: -> import json import pickle 序列化定义: 序列化:对象.列表. ...

  10. Sphinx 2.2.11-release reference manual

    1. Introduction 1.1. About 1.2. Sphinx features 1.3. Where to get Sphinx 1.4. License 1.5. Credits 1 ...