先在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. pid 控制算法

    http://blog.csdn.net/huangkangying/article/details/78129148 https://zh.wikipedia.org/wiki/PID%E6%8E% ...

  2. tmux 共享窗口大小

    http://www.cnblogs.com/bamanzi/p/tmux-share-windows-between-sessions.html

  3. JVM的7种垃圾收集器:主要特点 应用场景 设置参数 基本运行原理

    原文地址:https://blog.csdn.net/tjiyu/article/details/53983650 下面先来了解HotSpot虚拟机中的7种垃圾收集器:Serial.ParNew.Pa ...

  4. 获取代理电脑的https证书方法

    1.打开fiddler,tools->fiddler options 勾选check for certificate revocation 2.手机打开浏览器 输入fiddler所在电脑ip及端 ...

  5. 关于redis性能问题分析和优化

    一.如何查看Redis性能 info命令输出的数据可以分为10个分类,分别是: server,clients,memory,persistence,stats,replication,cpu,comm ...

  6. 【C#】详解C#异常

    目录结构: contents structure [+] 异常处理机制 try块 catch块 finally块 自定义异常 CLS异常和非CLS异常 在这篇文章中,笔者会阐述C#中的异常.C#是一门 ...

  7. 11g新特性-自动sql调优(Automatic SQL Tuning)

    11g新特性-自动sql调优(Automatic SQL Tuning) 在Oracle 10g中,引进了自动sql调优特性.此外,ADDM也会监控捕获高负载的sql语句. 在Oracle 11g中, ...

  8. mysql 5.7中的threads

    >desc threads; +---------------------+---------------------+------+-----+---------+-------+ | Fie ...

  9. 1 翻译系列:什么是Code First(EF 6 Code First 系列)

    原文链接:http://www.entityframeworktutorial.net/code-first/what-is-code-first.aspx EF 6 Code-First系列文章目录 ...

  10. 2.Swift快速浏览

    传统认为,在一个新的语言的第一个程序要在屏幕上显示“Hello world!”.在Swift,可以用一行代码来完成: println("Hello, world!") 如果你已经在 ...