MiniUI 快速上手

最新推荐文章于 2024-05-22 13:30:53 发布

快乐少年郎_

最新推荐文章于 2024-05-22 13:30:53 发布

阅读量1.4w

点赞数 7

分类专栏：工作学习文章标签： MiniUI入门 MiniUI表单 MiniUI表格

本文链接：https://blog.csdn.net/github_34889651/article/details/51325140

版权

工作学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 下载安装

下载地址
安装
1. 在使用过程中也只需要在页面中引用jquery.js、boot.js，如下所示

<head>
    <title>Hello MiniUI!</title>
    <script src="scripts/jquery-1.6.2.min.js"type="text/javascript"></script>
    <script src="scripts/boot.js"type="text/javascript"></script>
</head>

好啦，已经安装好啦，接下来我们开始写一个简单地 Hello Mini吧…

2. 新手村第一步 ~“Hello Mini”

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入必要的两个js文件 -->
<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="scripts/boot.js" type="text/javascript"></script>
<!-- 引入MiniUI的样式 -->
<link href="scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />       
</head>
<body>
    <input id="btnHello" class="mini-button" text="Hello" onclick="onHelloClick"/>
    <script type="text/javascript">
        function onHelloClick(e) {
            mini.alert("Hello MiniUI!");
        }
    </script>
</body>
</html>

效果如下
这里写图片描述
是不是突然觉得 MiniUI 并没有什么卵用，jquery 也能做弹出框啊！那么下一步我将带你见识下 MuniUI 强大的表单和表格控件。

3. MiniUI 的表单和表格

1. 表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入必要的两个js文件 -->
<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="scripts/boot.js" type="text/javascript"></script>
<!-- 引入MiniUI的样式 -->
<link href="scripts/miniui/themes/default/miniui.css" rel="stylesheet"
    type="text/css" />
</head>
<body>
    <form action="#" id="formid">
        <table class="form-table" border="0" cellpadding="1" cellspacing="2">
            <tr>
                <td class="form-label" style="width: 60px;">姓名：</td>
                <td style="width: 150px"><input name="name" name="name"
                    class="mini-textbox" onvalidation="userNameValidation"
                    require="true" /></td>
                <td class="form-label" style="width: 60px;">地址：</td>
                <td style="width: 150px"><input name="addr"
                    class="mini-textbox" /></td>
            </tr>
            <tr>
                <td class="form-label">性别：</td>
                <td><input name="gender" class="mini-radiobuttonlist"
                    data="[{id: 1, text: '男'}, {id: 2, text: '女'}]" /></td>
                <td class="form-label">年龄：</td>
                <td><input name="age" class="mini-spinner" /></td>
            </tr>
            <tr>
                <td class="form-label">备注：</td>
                <td colspan="3"><input name="remarks" class="mini-textarea"
                    style="width: 343px; height: 60px;" /></td>
            </tr>
        </table>
    </form>

</body>
</html>

代码展示如下
这里写图片描述

数据验证
MiniUI 中“validation”事件，可自定义验证规则和描述信息：

<input id="username" name="username" 
    onvalidation="onUserNameValidation" class="mini-textbox" required="true" />

function onUserNameValidation(e) {
    if (e.isValid) {
        e.errorText = "必须输入姓名";
    }
}

使用 mini.form 组件对多个控件进行验证

var form = new mini.Form("#formid");
form.validate();

加载表单

$.ajax({
    url: "后台访问地址",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});

提交表单

//提交表单数据
var form = new mini.Form("#formId");            
var data = form.getData();      //获取表单多个控件的数据
var json = mini.encode(data);   //序列化成JSON
$.ajax({
    url: "后台访问地址",
    type: "post",
    data: { submitData: json },
    success: function (text) {
        alert("提交成功，返回结果:" + text);
    }
});

清除表单

form.clear();

重置表单

form.reset();

弹出面板：子页面

  mini.open({
                url: bootPATH + "../demo/CommonLibs/EmployeeWindow.html", //子页面的链接地址
                title: "新增员工", width: 600, height: 400,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {

                    grid.reload();
                }
            });

行内编辑

 function editRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
            if (row) {
                //显示行详细
                grid.hideAllRowDetail();
                grid.showRowDetail(row);

                //将editForm元素，加入行详细单元格内
                var td = grid.getRowDetailCellEl(row);
                td.appendChild(editForm);
                editForm.style.display = "";

                //表单加载员工信息
                var form = new mini.Form("editForm1");
                if (grid.isNewRow(row)) {                    
                    form.reset();
                } else {
                    form.loading();
                    $.ajax({
                        url: "../data/AjaxService.jsp?method=GetEmployee&id=" + row.id,
                        success: function (text) {
                            var o = mini.decode(text);
                            form.setData(o);                            

                            form.unmask();
                        }
                    });
                }

                grid.doLayout();

            }
        }

2. 表格

快乐少年郎_

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
1
评论
MiniUI 快速上手

1. 下载安装下载地址安装在使用过程中也只需要在页面中引用jquery.js、boot.js，如下所示<head> <title>Hello MiniUI!</title> <script src="scripts/jquery-1.6.2.min.js"type="text/javascript"></script> <script src="scripts/
复制链接

扫一扫