CRUD之:弹出面板编辑
参考示例:
CRUD之:弹出面板编辑
一:创建弹出编辑面板
<div id="editWindow" class="mini-window" title="Window" style="width:650px;"
showModal="true" allowResize="true" allowDrag="true">
<div id="editform" class="form" >
<input class="mini-hidden" name="id"/>
<table style="width:100%;">
<tr>
<td style="width:80px;">员工帐号:</td>
<td style="width:150px;"><input name="loginname" class="mini-textbox" /></td>
<td style="width:80px;">姓名:</td>
<td style="width:150px;"><input name="name" class="mini-textbox" /></td>
<td style="width:80px;">薪资:</td>
<td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input name="gender" class="mini-combobox" url="mini_JSPath + '../../demo/data/genders.txt'"/></td>
<td>年龄:</td>
<td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25" /></td>
<td>出生日期:</td>
<td><input name="birthday" class="mini-datepicker" /></td>
</tr>
<tr>
<td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
<a class="Update_Button" href="javascript:updateRow()">Update</a>
<a class="Cancel_Button" href="javascript:cancelRow()">Cancel</a>
</td>
</tr>
</table>
</div>
</div>
二:面板操作
弹出加载面板数据:
var editWindow = mini.get("editWindow");
editWindow.show();
var form = new mini.Form("#editform");
form.loading();
$.ajax({
url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
success: function (text) {
var o = mini.decode(text);
form.setData(o);
form.unmask();
},
error: function () {
alert("表单加载错误");
}
});
保存提交面板数据:
var form = new mini.Form("#editform");
var o = form.getData();
grid.loading("保存中,请稍后......");
var json = mini.encode([o]);
$.ajax({
url: "../data/DataService.aspx?method=SaveEmployees",
data: { employees: json },
success: function (text) {
grid.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
editWindow.hide();
分享到:
相关推荐
本文将详细介绍jquery miniui 教程 表格控件 合并单元格的应用,需要的朋友可以参考下
使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。 产品定位: 快速开发WEB界面 ...
MiniUI - 专业WebUI控件库 1.快速开发,减少50%代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 2.丰富组件库,高性能、低内存 3.支持 IE6+、FireFox、Chrome
利用jquery miniui会让网页编写更加方便简单,还有jquery mini 的使用手册,能够很好的帮助使用,同时还有一些写好的实例可供参考。
弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...
jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框
jQuery MiniUI 实例下载 js web框架,简单易懂 实例 代码 API 等
JQUERY基础教程实例(表格编辑) JQUERY基础教程实例(表格编辑)
jQuery miniui_php 绑定表单 绑定控件 创建表单 加载表单 清除表单 重置表单
jquery div 弹出框 jquery div 弹出框 jquery div 弹出框 jquery div 弹出框
jQuery AJAX表格控件(初版)源码 测试版 JQUERY 实现的AJAX表格操作控件 设计上需要改进 初步功能已实现 边个实现了数据库的添加 编辑 删除等基本功能 详细请查看代码
jQuery响应式弹出层控件+图片放大插件支持模态窗口,不过经过测试发现,在IE8下有错误,火狐和Chrome下都正常,可能兼容性有待修复。它可以弹出图片放大框、文字框等,并可以关闭弹出框,响应式、模态弹出框插件,...
jQuery MiniUI-Web快速开发框架,包含datagrid、TreeView、button等多种控件,快速开发,减少50%代码量,组件标签化,学习曲线低,支持 Java、.NET、PHP,支持 IE6+、FireFox、Chrome
基于jquery和miniui的前端快速开发框架
jquery 自动补全搜索框控件 jquery 自动补全搜索框控件 jquery 自动补全搜索框控件
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头,编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框
好看的jquery弹出框样式代码!
弹出框 jquery 真实案例