DaleCloud（原NFine）介绍：前端framework-UI之对话框使用分享

最新推荐文章于 2025-02-13 11:25:45 发布

小德尔

最新推荐文章于 2025-02-13 11:25:45 发布

阅读量3.4k

点赞数 8

分类专栏： DaleCloud框架 Web前端开发

本文链接：https://blog.youkuaiyun.com/wuyuander/article/details/104965998

版权

Web前端开发同时被 2 个专栏收录

18 篇文章

订阅专栏

DaleCloud框架

7 篇文章

订阅专栏

前言

一、对话框（alert，confirm，prompt)使用

3.1 Form表单提交$.submitForm

3.2 普通数据提交$.submitPost

3.3 记录删除$.deleteForm

3.4 针对easyUI的Form表单提交

前言

许多朋友拿着这套框架不知道该怎么用，特别是前端框架的一些UI简直一头雾水。这篇文章就给大家讲讲前端开发过程中常常用到的一些前端UI使用,这些前端方法都存放在Content/js/framework-ui.js文件中；下面我将用案例一一给大家讲讲如何在实际开发过程中使用；

这些内容包括：
1、对话框dialog。

2、弹出层modal。

3、数据请求submit；

一、对话框（alert，confirm，prompt)使用

1.2 alert消息提示框

$.modalAlert(content, type);
content	Type: String 提示对话框上显示的内容
type	Type: String 消息类型：success，error，warning

示例：

$.modalAlert("删除成功","success");

1.2 confirm确认对话框

$.modalConfirm = function (content, callBack)
content	Type: String 提示对话框上显示的内容
callBack	Type: function 回调方法：返回function (state){……} ；state值：true,false

示例：

$.modalConfirm("确定要执行删除吗？",
    function (state) {
        if (state == true) {
            //……
        }
    }
);

1.3 prompt输入对话框

$.modalPrompt = function (type, title, callBack)
type	Type: int 输入框类型：0 普通输入框，1 密码输入框，2 textarea文本框
title	Type: String 对话框标题
callBack	Type: function 回调方法：function (state,value){……} ；state:始终为true，value 为输入框返回内容；

示例：

$.modalPrompt(2,"请输入评论内容",
    function (state,value) {
        if (state == true) {
            alert(vaue)
        }
    }
);

1.4 message消息框

$.modalMsg = function (content, type)
content	Type: String 提示对话框上显示的内容
type	Type: String 消息类型：success，error，warning

示例：

 $.modalMsg("后台没有权限", "warning");

二、弹出层Model使用方法

2.1 打开弹出层

$.modalOpen = function (options)：option参数说明如下：
id	Type: String 弹出层id，id很重要，在涉及多层弹出层方法之间调用的时候会涉及到
title	Type: String 弹出层标题
width	Type: String 宽度：100px；
height	Type: String 高度：100px；
url	Type: String 宽度：弹出层页面地址；
shade	Type: Int 阴影效果：0~1之间；
btn	Type: String数组底部按钮名称：['确认', '关闭']；点击确认后会如果有回调方法会执行callBack内的方法；注意：当为null时，弹出层底部将无btn按钮。
btnclass	Type: String数组底部按钮样式：['btn btn-primary', 'btn btn-danger']；当btn为null时样式无效
callBack	Type: function 回调方法：function (iframeId){……} ；iframeId：当前弹出层的frame的id值，可通过top.frames[id]来调用当前弹出层子页面的方法；

示例：

$.modalOpen({
    id: "Form",
    title: "新增项目",
    url: "/ProjectManage/ProductionTask/Form",
    width: "600px",
    height: "680px",
    callBack: function (iframeId) {
        top.frames[iframeId].submitForm();
    }
});

在callBack方法中，我们可以调用弹出层子页面内的方法或变量值。比如当点击弹出层【确认】按钮时候，通过以下方法top.frames[iframeId].submitForm()可以调用弹出层子页面的submitForm()方法；

2.2 关闭弹出层

$.modalClose() ;会关闭当前iframe弹出层

示例：

$.modalClose()

2.3 多个弹出层交互应用

示例举例：系统中的系统管理=》数据字典管理中有三个页面：ItemDta / Index(1数据字典首页），ItemsType / Index(2字典分类列表页），ItemsType / Form(3字典分类添加页面）；

执行流程：【1数据字典首页】中通过弹出层打开【字典分类列表页】，再在【2字典分类列表页】中通过弹出层打开【3字典分类添加页面】，添加完成之后，需要刷新【2字典分类列表页】；

那么如何调用对应的方法呢：

1、第一个页面方法，打开第一个弹出层【字典分类列表页】

function btn_itemstype() {
    $.modalOpen({
        id: "ItemsType",// 第一个弹出框的id
        title: "字典分类",
        url: "/SystemManage/ItemsType/Index",
        width: "800px",
        height: "550px",
        btn: null,
    });
}

2、第一个弹出层页面方法，打开第二个弹出层【字典分类添加页面】

function btn_add() {
    $.modalOpen({
        id: "Form",//第二个弹出层的ID
        title: "新增分类",
        url: "/SystemManage/ItemsType/Form",
        width: "450px",
        height: "380px",
        callBack: function (iframeId) {
            top.frames[iframeId].submitForm();
        }
    });
}

3、第二个弹出层页面保存数据后刷新第一个弹出层的方法

function submitForm() {
    if (!$('#form1').formValid()) {
        return false;
    }
    $.submitForm({
        url: "/SystemManage/ItemsType/SubmitForm?keyValue=" + keyValue,
        param: $("#form1").formSerialize(),
        success: function () {
            top.ItemsType.$('#dg').treegrid('reload');//top.ItemsType 表示第一个弹出层对象
        }
    })
}

top.ItemsType.$('#dg').function(); function为第一个弹出层的刷新方法，可以替换成任意你写的方法；

三、后台交互Ajax操作请求

3.1 Form表单提交$.submitForm

$.submitForm= function (options)：option参数说明如下：
url	Type: String 宽度：数据提交的后台地址；
param	Type: 数组附带提交的传入参数；[keyValue:"001",UserId:"001"]
loading	Type: String 数据提交时的提示内容：
success	Type: function 回调方法：function (data){……} ；data：后台返回的值
close	Type: bool 是否关闭当前弹出层frame：true，false

示例：

function submitForm() {
    if (!$('#form1').formValid()) {
        return false;
    }
    var postData = $("#form1").formSerialize();
    postData["F_ItemId"] = itemId;
    $.submitForm({
        url: "/SystemManage/ItemsData/SubmitForm?keyValue=" + keyValue,
        param: postData,
        success: function () {
            $.currentWindow().$('#dg').datagrid('reload');
        }
    })
}

3.2 普通数据提交$.submitPost

$.submitPost= function (options)：option参数说明如下：
title	Type: String 宽度：提交前弹出的提示框内容；
url	Type: String 宽度：数据提交的后台地址；
param	Type: 数组传入参数；[keyValue:"001",UserId:"001"]
loading	Type: String 数据提交时的提示内容：
success	Type: function 回调方法：function (data){……} ；data：后台返回的值
close	Type: bool 是否关闭当前弹出层frame：true，false

示例：

$.submitPost({
    title: "确定要结束该生产任务吗？",
    url: "/ProjectManage/ProductionTask/SubmitFinishForm",
    param: { keyValue: keyValue },
    success: function () {
        initControl();
    }
})

3.3 记录删除$.deleteForm

$.deleteForm= function (options)：option参数说明如下：
title	Type: String 宽度：删除数据时的提示内容；
url	Type: String 宽度：数据提交的后台地址；
param	Type: 数组附带提交的传入参数；[keyValue:"001",UserId:"001"]
loading	Type: String 数据提交时的提示内容：
success	Type: function 回调方法：function (data){……} ；data：后台返回的值
close	Type: bool 是否关闭当前弹出层frame：true，false

示例：

$.deleteForm({
    url: "/ProjectManage/ProductionTask/DeleteForm",
    param: { keyValue: selected.T_Id },
    success: function () {
        $('#dg').datagrid('load');
    }
})

3.4 针对easyUI的Form表单提交

$.submitEasyUIForm= function (options)：option参数说明如下：
url	Type: String 宽度：数据提交的后台地址；
param	Type: 数组附带提交的传入参数；[keyValue:"001",UserId:"001"]
loading	Type: String 数据提交时的提示内容：
success	Type: function 回调方法：function (data){……} ；data：后台返回的值
close	Type: bool 是否关闭当前弹出层frame：true，false

示例：

$.submitEasyUIForm({
    form: "form1",
    url: "/ProjectManage/ProductionTask/SubmitForm?keyValue=" + keyValue,
    success: function () {
        $.currentWindow().$('#dg').datagrid('load');
    }
});

四、其他通用常用JS方法

$.currentWindow()

获取当前打开的tab选项卡页面。可通过$.currentWindow().function() 执行当前选项卡页内的方法

$.request(参数key)

获取当前页面的请求参数：

页面URL:/ProjectManage/ProductionTask/Form?keyValue=0001

var keyValue = $.request("keyValue");//得到001值

$.fn.formValid()

验证当前form表单字段

以上就是现在次框架常用的一些方法。原来的select下拉框，jqgrid数据表格等常用方法大家可以自己摸索；