Jquery Easy UI初步学习，三数据增删改
第二篇只是学了加载用datagrid加载数据，数据的增删改还没有做，今天主要是解决这个问题了。
在做增删改前需要弹出对应窗口，这就需要了解一下EasyUi的弹窗控件。
我的理解，就是panel有的属性Window、dialog都有，同时保留自己的扩展属性方法 , 所以主要展示pannel的属性。
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身体。 |
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等属性 |
这里我用的是Dialog，这里也只说修改，因为修改解决了，其他也就没问题了.
修改数据
先看看dome中怎么用的
现在要实现点击Datagrid中一行把数据加载到表单上，有两种方案
用户修改页面：
<div class="easyui-grid" ></div>
<div class="easyui-dialog" closed="true" ></div>
> 一种用easyui Datagird中自带方法，获取选中行，将选中行的数据加载到dialog的from表单中
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#EditDig').dialog('open');
$('#toUpdate').form('load', row);
}
}
用这种需要Datagrid中field的值与form中name对应就可以加载了。
> 还有就是只是获取选中行id，然后根据id去查询加载数据，我觉得这个更贴进mvc
function edit(Id) {
$("#EditDig").dialog({
title: '用户修改',
href: '/CrmUser/Edit?id=' + pId,
iconCls: 'icon-edit',
modal: true,
closed: false
});
}
弹出窗口页面：
@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 method="POST">
<table >
<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" >
<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>
View Code
控制器：
/// <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>0)
{
//修改
if (new CrmUserBll().Update(crmUser) > 0)
{
return Content("ok");
}
}
}
View Code