Jquery Easy UI初步学习(三)数据增删改
第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了。

Pannel 属性
名称 | 类型 | 说明 | 默认值 |
title | string | 显示在Panel头部的标题文字。 | null |
iconCls | string | 在Panel里显示一个16x16图标的CSS类。 | null |
width | number | 设置Panel的宽度。 | auto |
height | number | 设置Panel的高度。 | auto |
left | number | 设置Panel的左边位置。 | null |
top | number | 设置Panel的顶部位置。 | null |
cls | string | 给Panel增加一个CSS类。 | null |
headerCls | string | 给Panel头部增加一个CSS类。 | null |
bodyCls | string | 给Panel身体增加一个CSS类。 | null |
style | object | 给Panel增加自定义格式的样式。 | {} |
fit | boolean | 当设为true时,Panel的 尺寸就适应它的父容器。 | FALSE |
border | boolean | 定义了是否显示Panel的边框。 | TRUE |
doSize | boolean | 设置为true,创建时Panel就调整尺寸并做成布局。 | TRUE |
noheader | boolean | 要是设置为true,Panel的头部将不会被创建。 | FALSE |
content | string | Panel身体的内容。 | null |
collapsible | boolean | 定义了是否显示折叠按钮。 | FALSE |
minimizable | boolean | 定义了是否显示最小化按钮。 | FALSE |
maximizable | boolean | 定义了是否显示最大化按钮。 | FALSE |
closable | boolean | 定义了是否显示关闭按钮。 | FALSE |
tools | array | 自定义工具组,每个工具包含两个特性: | [ ] |
iconCls和handler | |||
collapsed | boolean | 定义了初始化Panel是不是折叠的。 | FALSE |
minimized | boolean | 定义了初始化Panel是不是最小化的。 | FALSE |
maximized | boolean | 定义了初始化Panel是不是最大化的。 | FALSE |
closed | boolean | 定义了初始化Panel是不是关闭的。 | FALSE |
href | string | 一个URL,用它加载远程数据并且显示在Panel里。 | null |
cache | boolean | 设置为true就缓存从href加载的Panel内容。 | TRUE |
loadingMessage | string | 当加载远程数据时在Panel里显示的一条信息。 | Loading… |
extractor | function | 定义了如何从ajax响应抽出内容,返回抽出的数据。 extractor: function(data){ var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // 只抽出 body 的内容 } else { return data; } } |
Pannel 事件
名称 | 参数 | 说明 |
onLoad | none | 当远程数据被加载时触发。 |
onBeforeOpen | none | Panel打开前触发,返回false就停止打开。 |
onOpen | none | Panel打开后触发。 |
onBeforeClose | none | Panel关闭前触发,返回false就取消关闭。 |
onClose | none | Panel关闭后触发。 |
onBeforeDestroy | none | Panel销毁前触发,返回false就取消销毁。 |
onDestroy | none | Panel销毁后触发。 |
onBeforeCollapse | none | Panel折叠前触发,返回false就停止折叠。 |
onCollapse | none | Panel折叠后触发。 |
onBeforeExpand | none | Panel展开前触发,返回false就停止展开。 |
onExpand | none | Panel展开后触发。 |
onResize | width, height | Panel调整尺寸后触发。 |
width:新的外部宽度。 | ||
height:新的外部高度 | ||
onMove | left,top | Panel移动后触发。 |
left:新的左边位置 | ||
Top:新的顶部位置 | ||
onMaximize | none | 窗口最大化后触发。 |
onRestore | none | 窗口还原为它的原始尺寸后触发。 |
onMinimize | none | 窗口最小化后触发。 |
Pannel 方法
名称 | 参数 | 说明 |
options | none | 返回选项特性。 |
panel | none | 返回Panel对象。 |
header | none | 返回Panel头部对象。 |
body | none | 返回Panel身体对象。 |
setTitle | title | 设置头部的标题文字。 |
open | forceOpen | 当forceOpen参数设为true,就绕过onBeforeOpen回调函数打开Panel。 |
close | forceClose | 当forceClose参数设为true,就绕过onBeforeClose回调函数关闭Panel。 |
destroy | forceDestroy | 当forceDestroy参数设为true,就绕过onBeforeDestroy回调函数销毁Panel。 |
refresh | href | 当设置了href特性时,刷新Panel加载远程数据。 |
resize | options | 设置Panel尺寸并做布局。Options对象包含下列特性: |
width:新的Panel宽度 | ||
height:新的Panel高度 | ||
left:新的Panel左边位置 | ||
top:新的Panel顶部位置 | ||
move | options | 移动Panel到新位置。Options对象包含下列特性: |
left:新的Panel左边位置 | ||
top:新的Panel顶部位置 | ||
maximize | none | Panel适应它的容器的尺寸。 |
minimize | none | 最小化Panel。 |
restore | none | 把最大化的Panel还原为它原来的尺寸和位置。 |
collapse | animate | 折叠Panel身体。 |
expand | animate | 展开Panel身体。 |
转自:http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407047.html
Window 属性
参数名 | 类型 | 描述 |
modal | boolean | 是否生成模态窗口。默认false |
shadow | boolean | 是否显示窗口阴影。默认false |
Dialog 属性
参数名 | 类型 | 描述 |
title | string | 该对话框标题文本。默认"New Dialog" |
collapsible | boolean | 当True时可显示折叠按钮。默认false |
minimizable | boolean | 当True时可显示最小化按钮。默认false |
maximizable | boolean | 当True时可显示最大化按钮。默认false |
resizable | boolean | 当True时能重绘对话框大小。默认false |
toolbar | array | 该工具栏置于对话框的顶部,每个工具栏包含:text, iconCls, disabled, handler等属性 |
buttons | array | 这个按钮置于对话框的底部,每个按钮包含:text, iconCls, handler等属性 |
修改数据


@model GroupItem.Model.CrmUserEntity
<style type="text/css">
tr{ height: 30px;}
.td_txt{ text-align:right;}
</style>
<script type="text/javascript">
function closeForm () {
$('#EditDig').dialog('close');
}
</script>
<form id="toUpdate" method="POST">
<table style="width: 100%; padding: 0 10px;">
<tr>
<td width="10" class="td_txt">登陆邮箱:</td>
<td width="40">@Html.TextBoxFor(t => t.LoginEmail)</td>
<td width="30">@Html.ValidationMessageFor(t=>t.LoginEmail)</td>
</tr>
<tr>
<td class="td_txt">真实姓名:</td>
<td>@Html.TextBoxFor(t => t.TrueName)</td>
<td>@Html.ValidationMessageFor(t => t.TrueName)</td>
</tr>
<tr>
<td class="td_txt">昵称:</td>
<td>@Html.TextBoxFor(t => t.NickName)</td>
<td></td>
</tr>
<tr>
<td class="td_txt">手机号码:</td>
<td>@Html.TextBoxFor(t => t.Phone)</td>
<td></td>
</tr>
<tr>
<td class="td_txt">身份证:</td>
<td>@Html.TextBoxFor(t => t.UserCard)</td>
<td></td>
</tr>
<tr>
<td class="td_txt">QQ号码:</td>
<td>@Html.TextBoxFor(t => t.QQ)</td>
<td></td>
</tr>
<tr>
<td class="td_txt">最后登陆时间:</td>
<td>@Html.TextBoxFor(t => t.LastLoginTime)</td>
<td></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="button" value="保存" onclick="toSubmit()" />
<input type="button" value="取消" onclick=" closeForm() "/>
</td>
</tr>
</table>
</form> <script type="text/javascript">
function toSubmit() {
var posData = $("#toUpdate").serializeArray();
$.post("/CrmUser/Edit", posData, function (date) {
if (date == "ok") {
closeForm();
$("#grid").datagrid('reload');
} else {
$.messager.alert("友情提示", "操作失败,请您检查", "error");
}
});
}
</script>
控制器:
/// <summary>
/// 用户信息修改
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Edit(int? id)
{
var model = new CrmUserEntity();
if (id.HasValue)
{
model = new CrmUserBll().Get(id.Value);
}
return View(model);
}
/// <summary>
/// 用户信息修改
/// </summary>
/// <param name="crmUser"></param>
/// <returns></returns>
[HttpPost]
[ValidateInput(false)]
public ActionResult Edit(CrmUserEntity crmUser)
{
if (crmUser.Id>)
{
//修改
if (new CrmUserBll().Update(crmUser) > )
{
return Content("ok");
}
}
}
Jquery Easy UI初步学习(三)数据增删改的更多相关文章
- Jquery Easy UI初步学习(一)
Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了 ...
- Jquery Easy UI初步学习(二)datagrid的使用
第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样cl ...
- Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jquery easy ui 1.3.4 数据表格(DataGrid)(8)
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
- JQuery Easy Ui (Tree树)详解(转)
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
随机推荐
- mysql 数据库优化第一篇(基础)
Mysql数据库优化 1. 优化概述 存储层:存储引擎.字段类型选择.范式设计 设计层:索引.缓存.分区(分表) 架构层:多个mysql服务器设置,读写分离(主从模式) sql语句层:多个sql语句都 ...
- Kettle 使用入门
Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定. 本文介绍一个入门例子:使用Kettle从动态指定的文件名对应的文本文件里抽取 ...
- Android UI/UX 工具
Zeplin 用于界面图片自动导出. 图标 : https://material.io/icons/
- 面试题-一个列表向右移动k位
def sort(lst,k): length = len(lst) left =lst[:-k] right =lst[-k:] lst.clear() lst.extend(right) lst. ...
- CentOS 7 - 最小化安装以及引发的问题!
一,操作系统和虚拟机 操作系统:CentOS 7 官方网站:https://www.centos.org 下载地址:https://www.centos.org/download/ 下载版本分三个:D ...
- jquery移动端一个按钮两个事件
当一个按钮已经有一个事件,如点击,弹窗显示,若还要加个事件,可以用touchstart 如: var videoCover = $("#videoCover");//视频封面 $( ...
- 【转】目标检测之YOLO系列详解
本文逐步介绍YOLO v1~v3的设计历程. YOLOv1基本思想 YOLO将输入图像分成SxS个格子,若某个物体 Ground truth 的中心位置的坐标落入到某个格子,那么这个格子就负责检测出这 ...
- clang 编译 OC
clang -fobjc-arc -framework Foundation helloworld.m -o helloworld.out OVERVIEW: clang LLVM compiler ...
- sublime-text-how-to-jump-to-file-from-find-results-using-keyboard
http://209.116.186.231/#newwindow=1&q=sublime+text+find+results+jump http://stackoverflow.com/qu ...
- Linux之开源软件移植
移植环境 Utuntu 15.04 1.mplayer移植 版本:mplayer-export-snapshot.tar.bz2 /mplayer-export-2015-11-26 Linux PC ...