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

最新推荐文章于 2022-03-10 17:44:54 发布

爱听民谣的王川

最新推荐文章于 2022-03-10 17:44:54 发布

阅读量369

点赞数

分类专栏：大米时代积分系统文章标签： jquery easyui

本文链接：https://blog.csdn.net/u010282984/article/details/72846698

版权

大米时代积分系统专栏收录该内容

10 篇文章 0 订阅

订阅专栏

之前总是在听大家说这 “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" οnclick="submitForm()">提交</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="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>

界面显示如下：