先在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="1"> 女:<inputtype="radio" name="sex" value="0"></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="2" align="center"><td colspan="2"><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"}],

转载于:https://www.cnblogs.com/fpcbk/p/9868500.html

datagrid--新增相关推荐

  1. js datagrid新增一行_Django接口新增页面编写_2(十五)

    做一个好看的页面真的是一件困难的事情,所以还是遵循复制后修改的原则,首先是借鉴httpbin页面的方式进行块状展开. 块状 从模版中找到类似的html代码: 块状 我们可以看到一下它的动态效果,可以自 ...

  2. WPF之DataGrid控件使用

    WPF之DataGrid控件使用 一.DataGrid简介 二.DataGrid数据源绑定 三.DataGrid单元格编辑触发事件 四.DataGrid增加删除行 五.DataGrid数据触发器 参考 ...

  3. easyui treegrid php,easyUI TreeGrid

    @author YHC 从$.fn.datagrid.defaults.继承,覆盖默认值$.fn.treegrid.defaults. treegrid 是使用显示分层数据在grid中,treegri ...

  4. asp.net DataGridTree表格树控件 下拉树 DropTree c# .net

    1.下拉树 DropTree c# .net 下拉树实现原理 输出json到客户端 客户端实现动态加载 中间不会和服务端交互 数据量支持上 经测试 几千 还是很快的 本下拉树控件是用c#+js树实现 ...

  5. 程序员面试技巧:如何讲解自己做过的项目

    程序员面试干货:如何讲解自己做过的项目 说到简历,对于IT这种比较偏重技术的岗位,企业最看重的就是项目经验,尤其是曾经做过的项目,用过的技术越匹配越好! 一封好的简历就是事业的敲门砖,如果你目前正在处 ...

  6. easyui treegrid php,easyUI TreeGrid | 学步园

    @author YHC 从$.fn.datagrid.defaults.继承,覆盖默认值$.fn.treegrid.defaults. treegrid 是使用显示分层数据在grid中,treegri ...

  7. SG-UAP平台 : MX框架总结

    1.在Panel 的标题右边添加LinkEditor ? 2. mappath的路径 3. Dataform设置某个属性的背景色 4. Dataform表单验证? 5. 多表头GroupHeaderG ...

  8. Jiangsheng的CSDN Digest(May 15, 2006)

    为了便于搜索(http://search.csdn.net),这里尽可能保留了论坛上讨论的原文,但是这并不表示本人赞同帖子中的表述方式和观点. CSDN 讨论总结系列: Jiangsheng的CSDN ...

  9. V.CodeGenerator WPF代码生成器

    V.CodeGenerator WPF代码生成器 Vampirewal.Core内容 1.AppConfig(程序的配置文件) 2.IoC容器 3.基础服务 4.Model基类 5.SimpleMVV ...

  10. 2022.10.EEP開發筆記-1

    做 IT 这么多年,一直都有工作笔记的习惯.可能是纸本,也可能是WORD档.因为 IT 真的要学很多很多东西.而且在不同公司的 IT 单位,使用不同的系统,不同的开发语言,不同的数据库.学习力太差,很 ...

最新文章

  1. python对象不接受参数什么意思___new\=TypeError:object()不接受参数
  2. How to resolve empty table CRMATAB issue in ERP gt_crmtab[]
  3. python import random 报错_Python import random报错处理办法
  4. css 相同的css属性_CSS中的order属性
  5. 学习思考之《编程之美》.
  6. java 数据结构之堆排序
  7. espcms简约版的表单,提示页,搜索列表页
  8. 芒果db怎么连mysql_MongoDB 芒果数据库的使用
  9. 非三星手机无法登录三星账号_如何解决所有三星手机的烦恼
  10. 获取短信验证码并实现登录
  11. 亿图图示EDraw Max,云的跨端思维导图
  12. 【算法千题案例】每日LeetCode打卡——92.最短补全词
  13. miui系统分身测试软件,【MIUI 8评测】手机分身初上手,黑科技值爆表!
  14. TWaver自动化设计平台Legolas —— 入门流程
  15. c语言指针部分上机,北科大C语言程序设计实验报告8-指针-练习题代码(2次上机课内容)--...
  16. 什么是非功能性测试?
  17. oracle11 资料,Oracle 11g入门资料与视频
  18. Win10局域网互传文件-wifi无线共享
  19. 向pdf文件中插入图片及文字 java实现
  20. linux命令统计文件行数据库,wc命令--Linux统计文件行数

热门文章

  1. 理解unittest(六)
  2. Codeforces Round #468 (Div. 2, based on Technocup 2018 Final Round)
  3. 〖Python〗-- 模块与包
  4. linux TCP协议(1)---连接管理与状态机
  5. 电梯控制项目设计报告-第十周
  6. Postgresql----libpq
  7. 用代码块在new对象时set属性
  8. [转]Mysql FROM_UNIXTIME as UTC
  9. 权值线段树BZOJ3224
  10. rsync 服务端和客户端 简单配置