首页 > 学院 > 开发设计 > 正文

JqueryEasyUI初步学习(三)数据增删改

2019-11-14 16:36:51
字体:
来源:转载
供稿:网友

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

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

摘自:http://philoo.VEVb.com/
我的理解,就是panel有的属性Window、dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性。

Pannel 属性

名称类型说明默认值
titlestring显示在Panel头部的标题文字。null
iconClsstringPanel里显示一个16x16图标的CSS类。null
widthnumber设置Panel的宽度。auto
heightnumber设置Panel的高度。auto
leftnumber设置Panel的左边位置。null
topnumber设置Panel的顶部位置。null
clsstringPanel增加一个CSS类。null
headerClsstringPanel头部增加一个CSS类。null
bodyClsstringPanel身体增加一个CSS类。null
styleobjectPanel增加自定义格式的样式。{}
fitboolean当设为true时,Panel 尺寸就适应它的父容器。FALSE
borderboolean定义了是否显示Panel的边框。TRUE
doSizeboolean设置为true,创建时Panel就调整尺寸并做成布局。TRUE
noheaderboolean要是设置为truePanel的头部将不会被创建。FALSE
contentstringPanel身体的内容。null
collapsibleboolean定义了是否显示折叠按钮。FALSE
minimizableboolean定义了是否显示最小化按钮。FALSE
maximizableboolean定义了是否显示最大化按钮。FALSE
closableboolean定义了是否显示关闭按钮。FALSE
toolsarray自定义工具组,每个工具包含两个特性:[ ]
iconClshandler
collapsedboolean定义了初始化Panel是不是折叠的。FALSE
minimizedboolean定义了初始化Panel是不是最小化的。FALSE
maximizedboolean定义了初始化Panel是不是最大化的。FALSE
closedboolean定义了初始化Panel是不是关闭的。FALSE
hrefstring一个URL,用它加载远程数据并且显示在Panel里。null
cacheboolean设置为true就缓存从href加载的Panel内容。TRUE
loadingMessagestring当加载远程数据时在Panel里显示的一条信息。Loading…
extractorfunction定义了如何从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 事件

 

名称参数说明
onLoadnone当远程数据被加载时触发。
onBeforeOpennonePanel打开前触发,返回false就停止打开。
onOpennonePanel打开后触发。
onBeforeClosenonePanel关闭前触发,返回false就取消关闭。
onClosenonePanel关闭后触发。
onBeforeDestroynonePanel销毁前触发,返回false就取消销毁。
onDestroynonePanel销毁后触发。
onBeforeCollapsenonePanel折叠前触发,返回false就停止折叠。
onCollapsenonePanel折叠后触发。
onBeforeExpandnonePanel展开前触发,返回false就停止展开。
onExpandnonePanel展开后触发。
onResizewidth, heightPanel调整尺寸后触发。
width:新的外部宽度。
height:新的外部高度
onMoveleft,topPanel移动后触发。
left:新的左边位置
Top:新的顶部位置
onMaximizenone窗口最大化后触发。
onRestorenone窗口还原为它的原始尺寸后触发。
onMinimizenone窗口最小化后触发。

Pannel 方法

名称参数说明
optionsnone返回选项特性。
panelnone返回Panel对象。
headernone返回Panel头部对象。
bodynone返回Panel身体对象。
setTitletitle设置头部的标题文字。
openforceOpen当forceOpen参数设为true,就绕过onBeforeOpen回调函数打开Panel。
closeforceClose当forceClose参数设为true,就绕过onBeforeClose回调函数关闭Panel。
destroyforceDestroy当forceDestroy参数设为true,就绕过onBeforeDestroy回调函数销毁Panel。
refreshhref当设置了href特性时,刷新Panel加载远程数据。
resizeoptions设置Panel尺寸并做布局。Options对象包含下列特性:
width:新的Panel宽度
height:新的Panel高度
left:新的Panel左边位置
top:新的Panel顶部位置
moveoptions移动Panel到新位置。Options对象包含下列特性:
left:新的Panel左边位置
top:新的Panel顶部位置
maximizenonePanel适应它的容器的尺寸。
minimizenone最小化Panel。
restorenone把最大化的Panel还原为它原来的尺寸和位置。
collapseanimate折叠Panel身体。
expandanimate展开Panel身体。
转自:http://www.VEVb.com/hantianwei/archive/2012/03/19/2407047.html

Window 属性

参数名类型描述
modalboolean是否生成模态窗口。默认false
shadowboolean是否显示窗口阴影。默认false

Dialog  属性

参数名类型描述
titlestring该对话框标题文本。默认"New Dialog"
collapsibleboolean当True时可显示折叠按钮。默认false
minimizableboolean当True时可显示最小化按钮。默认false
maximizableboolean当True时可显示最大化按钮。默认false
resizableboolean当True时能重绘对话框大小。默认false
toolbararray该工具栏置于对话框的顶部,每个工具栏包含:text, iconCls, disabled, handler等属性
buttonsarray这个按钮置于对话框的底部,每个按钮包含:text, iconCls, handler等属性
这里我用的是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>
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
来自为知笔记(Wiz)

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表