积分系统(5)-初步接触EasyUI

来源：互联网发布：泛微协同办公软件编辑：程序博客网时间：2024/06/04 18:03

之前总是在听大家说这 “EasyUI” 这个东西，自己也没有去查一下到底是干嘛的，还有它跟 Jquery 是什么关系；

上周因为 “积分系统” 里面的一个功能实现自己实在是不知道怎么搞了，张婷童鞋说川哥你可以在 EasyUI 上看看有没有自己需要的东西，这才正式开始认识它。

这是 Jquery EasyUI 中文网的官网首页里面的 Banner 很漂亮；

也就是上面的一句话全权解释了 Jquery EasyUI 到底是做什么的，“帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面”！另一个层面来说Easyui是一种基于jQuery的用户界面插件集合。

下面记录分享一下这次积分系统里面的 “提交公告” 我是怎么通过 EasyUI 来完成 View 层也就是界面的编写整合的；

当进入官网到处点了之后对整个官网的构造也清晰了，对于下来怎么去用，怎么去学 EasyUI 这个东西心里也有了一定的思路，为了更快更好的解决系统里面的问题我就直接进入 Demo 页面，如下：

相继都点开看了之后决定使用 “表单Form” ；

了解每一行代码起什么作用，都用什么功能，代表什么，千万记得，拒绝“Ctrl + C + V” 之后就完事了，那样的话就跟我之前一样，完事之后也就完了那一件事；去读去理解每一行代码，用学习的心态接触这些东西，哪怕是觉得很简单。

OK，不怕不知道，就怕不知道；

这样一次又一次的使用 EasyUI 的过程中相信会越来越熟练，下面把“积分系统”里面自己用到 EasyUI 地方的代码以及 View 层的样子贴出来，也算是给自己一个记录。

代码 View层：

<html><body>    @*<h2>Basic Form</h2>*@    @*<p>Fill the form and submit it.</p>*@    <div style="margin: 20px 0;"></div>    <div class="easyui-panel" title="编辑区域" style="width: 400px">        <div style="padding: 50px 60px 50px 60px">            <form id="ff" method="post">                <table cellpadding="5">                         <td>公告内容:</td>                        <td>                            <input id="notice" class="easyui-textbox" name="message" data-options="multiline:true" style="height: 60px"></input></td>                    </tr>                    <tr>                        <div style="margin: 20px 0;"></div>                        <input id="times" class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width: 200px">                    </tr>                </table>            </form>            <div style="text-align: end; padding: 10px">                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>            </div>        </div>    </div>    <script type="text/javascript">        function submitForm() {            var times = $("#times").textbox('getValue');            var noticeID = $("#noticeID").textbox('getValue');            var notice = $("#notice").textbox('getValue');            //debugger;  +上它可以在调试过程中停止；            $.ajax({                type: "post",                url: "/AddAnnounce/add",                data: "times=" + times + "¬iceID=" + noticeID + "¬ice=" + notice,                success: function (data) {                    //if (data == 'True') {                    if (data == 'True') {                        $.messager.show({                            title: '提示',                            msg: '公告提交成功',                            timeout: 5000,                            showType: 'slide'                        });                    }                    else {                        $.messager.alert("警告", "提交失败！请联系管理员");                    }                }            })            function submitForm() {                $('#ff').form('提交');            }            function clearForm() {                $('#ff').form('清空');            }        }    </script></body></html>

界面显示如下：

这就是使用 EasyUI 的一个大概的过程，很简单当然也有复杂深入的地方只是还没有接触到，在这个过程中也用到了部分 CSS+JS+Bootstrap 的东西，下篇博客会有详细的介绍怎么去用这些已经封装好了的红利。

阅读全文

0 0