Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据，数据的增删改还没有做，今天主要是解决这个问题了。

在做增删改前需要弹出对应窗口，这就需要了解一下EasyUi的弹窗控件。

我的理解，就是panel有的属性Window、dialog都有，同时保留自己的扩展属性方法 , 所以主要展示pannel的属性。

Pannel 属性

Pannel 事件

Pannel 方法

转自：http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407047.html

Window 属性

Dialog  属性

这里我用的是Dialog，这里也只说修改，因为修改解决了，其他也就没问题了.

修改数据

先看看dome中怎么用的

现在要实现点击Datagrid中一行把数据加载到表单上，有两种方案

用户修改页面：

<div id="grid" class="easyui-grid" ></div>

<div id="EditDig" class="easyui-dialog" style="width:400px;height:350px;" 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 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()" />&nbsp;&nbsp;
                <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>0)
            {
                //修改
                if (new CrmUserBll().Update(crmUser) > 0)
                {
                    return Content("ok");
                }
            }
}

来自为知笔记(Wiz)

Jquery Easy UI初步学习(三)数据增删改