datagrid--新增
先在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--新增相关推荐
- js datagrid新增一行_Django接口新增页面编写_2(十五)
做一个好看的页面真的是一件困难的事情,所以还是遵循复制后修改的原则,首先是借鉴httpbin页面的方式进行块状展开. 块状 从模版中找到类似的html代码: 块状 我们可以看到一下它的动态效果,可以自 ...
- WPF之DataGrid控件使用
WPF之DataGrid控件使用 一.DataGrid简介 二.DataGrid数据源绑定 三.DataGrid单元格编辑触发事件 四.DataGrid增加删除行 五.DataGrid数据触发器 参考 ...
- easyui treegrid php,easyUI TreeGrid
@author YHC 从$.fn.datagrid.defaults.继承,覆盖默认值$.fn.treegrid.defaults. treegrid 是使用显示分层数据在grid中,treegri ...
- asp.net DataGridTree表格树控件 下拉树 DropTree c# .net
1.下拉树 DropTree c# .net 下拉树实现原理 输出json到客户端 客户端实现动态加载 中间不会和服务端交互 数据量支持上 经测试 几千 还是很快的 本下拉树控件是用c#+js树实现 ...
- 程序员面试技巧:如何讲解自己做过的项目
程序员面试干货:如何讲解自己做过的项目 说到简历,对于IT这种比较偏重技术的岗位,企业最看重的就是项目经验,尤其是曾经做过的项目,用过的技术越匹配越好! 一封好的简历就是事业的敲门砖,如果你目前正在处 ...
- easyui treegrid php,easyUI TreeGrid | 学步园
@author YHC 从$.fn.datagrid.defaults.继承,覆盖默认值$.fn.treegrid.defaults. treegrid 是使用显示分层数据在grid中,treegri ...
- SG-UAP平台 : MX框架总结
1.在Panel 的标题右边添加LinkEditor ? 2. mappath的路径 3. Dataform设置某个属性的背景色 4. Dataform表单验证? 5. 多表头GroupHeaderG ...
- Jiangsheng的CSDN Digest(May 15, 2006)
为了便于搜索(http://search.csdn.net),这里尽可能保留了论坛上讨论的原文,但是这并不表示本人赞同帖子中的表述方式和观点. CSDN 讨论总结系列: Jiangsheng的CSDN ...
- V.CodeGenerator WPF代码生成器
V.CodeGenerator WPF代码生成器 Vampirewal.Core内容 1.AppConfig(程序的配置文件) 2.IoC容器 3.基础服务 4.Model基类 5.SimpleMVV ...
- 2022.10.EEP開發筆記-1
做 IT 这么多年,一直都有工作笔记的习惯.可能是纸本,也可能是WORD档.因为 IT 真的要学很多很多东西.而且在不同公司的 IT 单位,使用不同的系统,不同的开发语言,不同的数据库.学习力太差,很 ...
最新文章
- python对象不接受参数什么意思___new\=TypeError:object()不接受参数
- How to resolve empty table CRMATAB issue in ERP gt_crmtab[]
- python import random 报错_Python import random报错处理办法
- css 相同的css属性_CSS中的order属性
- 学习思考之《编程之美》.
- java 数据结构之堆排序
- espcms简约版的表单,提示页,搜索列表页
- 芒果db怎么连mysql_MongoDB 芒果数据库的使用
- 非三星手机无法登录三星账号_如何解决所有三星手机的烦恼
- 获取短信验证码并实现登录
- 亿图图示EDraw Max,云的跨端思维导图
- 【算法千题案例】每日LeetCode打卡——92.最短补全词
- miui系统分身测试软件,【MIUI 8评测】手机分身初上手,黑科技值爆表!
- TWaver自动化设计平台Legolas —— 入门流程
- c语言指针部分上机,北科大C语言程序设计实验报告8-指针-练习题代码(2次上机课内容)--...
- 什么是非功能性测试?
- oracle11 资料,Oracle 11g入门资料与视频
- Win10局域网互传文件-wifi无线共享
- 向pdf文件中插入图片及文字 java实现
- linux命令统计文件行数据库,wc命令--Linux统计文件行数