网站后台发通知页面效果图

最新推荐文章于 2021-10-28 15:31:01 发布
最新推荐文章于 2021-10-28 15:31:01 发布
阅读量572 收藏
点赞数
文章标签： 后端 javascript json ViewUI
原文链接：http://www.cnblogs.com/yechangzhong-826217795/p/5948389.html
版权

网站后台发通知页面效果图：

代码：

@model Dw.Entity.Notifications
@using Dw.Web
@{
    ViewBag.Title = "Notifications》表单页面";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}

<script type="text/javascript">
    $(function () {
        GetUserGroupTree();

        var oRadios = document.getElementById('radios').getElementsByTagName('input');
        for (var i = 0, len = oRadios.length; i < len; i++) {
            oRadios[i].onclick = function () {
                var value = this.value;
                if (value == 0) { //显示相应的内容  
                    GetUserGroupTree();
                    document.getElementById('jiaoshi').style.display = "";
                    document.getElementById('xuesheng').style.display = "none";
                    document.getElementById('jiazhang').style.display = "none";
                } else if (value == 1) {
                    ClassInfoTree();
                    document.getElementById('jiaoshi').style.display = "none";
                    document.getElementById('xuesheng').style.display = "";
                    document.getElementById('jiazhang').style.display = "none";
                } else {
                    ClassInfoTree();
                    document.getElementById('jiaoshi').style.display = "none";
                    document.getElementById('xuesheng').style.display = "none";
                    document.getElementById('jiazhang').style.display = "";
                  
                }
            }
        }

    
    })

    function ReplyTypeSelect()
    {
        var s = $('select  option:selected').val();
        //0-无需回复 1-自由回复 2-选项回复
        if(s=="2"){
            document.getElementById('Option').style.display = "";
        }
        else {
            document.getElementById('Option').style.display = "none";
        }

    }
    //加载用户组
    function GetUserGroupTree() {
        var itemtree = {
            showcheck: true,
            url: "@Url.Content("~/School/Notifications/UserGroupList")"
        };
        $("#ConditionInstall").treeview(itemtree);
    }

    //加载学校班级
    function ClassInfoTree() {
        var itemtree = {
            showcheck: true,
            @*url: "@Url.Content("~/School/Notifications/ModuleTree")"*@
            url: "@Url.Content("~/School/Notifications/ModuleTree")?KeyValue="+ "",
    };
        $("#ConditionInstall1").treeview(itemtree);
        $("#ConditionInstall2").treeview(itemtree);
    }




//保存事件
    function AcceptClick() {
        if (!CheckDataValid('#form1')) {
            return false;
        }
        //alert("aa");
        Loading(true, "正在提交数据...");
        window.setTimeout(function () {

            var Id = $("#NotificationId").val();
            var postData = $("#form1").serialize();
            var a = $('input:radio[name=ReceiveObjects]:checked').val();
            if (a == 0)
            {
                //获取对什么资源Id:
                var ReceiveRange = ""; $('#ConditionInstall .bbit-tree-node-cb').each(function () {
                    var _src = $(this).attr('src');
                    _src = _src.substr(_src.lastIndexOf("/") + 1);
                    if (_src == 'checkbox_1.gif') {
                        var _ReceiveRange = $(this).attr('id').substring(17).replace(/_/g, "-");
                        _ReceiveRange = _ReceiveRange.substring(0, _ReceiveRange.length - 3);
                        ReceiveRange += _ReceiveRange + ",";
                    }
                });
            }
            else if (a == 1)
            {
                //获取对什么资源Id:
                var ReceiveRange = ""; $('#ConditionInstall1 .bbit-tree-node-cb').each(function () {
                    var _src = $(this).attr('src');
                    _src = _src.substr(_src.lastIndexOf("/") + 1);
                    if (_src == 'checkbox_1.gif') {
                        var _ReceiveRange = $(this).attr('id').substring(17).replace(/_/g, "-");
                        _ReceiveRange = _ReceiveRange.substring(1, _ReceiveRange.length - 3);
                        ReceiveRange += _ReceiveRange + ",";
                    }
                });
            }
            else if (a == 2) {
                //获取对什么资源Id:
                var ReceiveRange = ""; $('#ConditionInstall2 .bbit-tree-node-cb').each(function () {
                    var _src = $(this).attr('src');
                    _src = _src.substr(_src.lastIndexOf("/") + 1);
                    if (_src == 'checkbox_1.gif') {
                        var _ReceiveRange = $(this).attr('id').substring(17).replace(/_/g, "-");
                        _ReceiveRange = _ReceiveRange.substring(1, _ReceiveRange.length - 3);
                        ReceiveRange += _ReceiveRange + ",";
                    }
                });
            }
            else {
                alert("请选择要接收的对象");

                return false;
            }
           

            //获取选项表集合
            var contents = document.getElementById('Option').getElementsByTagName('input');
            var ReplyContent = "";
            for (var i = 0, len = contents.length; i < len; i++) {
                ReplyContent += contents[i].value + ",";
                //alert(ReplyContent);
            }

            AjaxJson("/School/Notifications/SubmitForm2?KeyValue=" + Id + "&ReceiveRange=" + ReceiveRange + "&ReplyContent=" + ReplyContent, postData, function (data) {
                tipDialog(data.Message, 3, data.Code);
                top.frames[tabiframeId()].windowload();
                closeDialog();
            });
        }, 200);
    }
</script>

<form id="form1" style="height:100%; overflow:hidden;">
    <div style="float:left; width:490px;  border-right:5px #333 solid; height:100%;">
        <table class="form">
            @Html.HiddenFor(m => m.NotificationId)
            <tr>
                <th class='formTitle'>通知标题: </th>
                <td class='formValue'>
                    @Html.TextBoxFor(m => m.Title, new { @class = "txt required", datacol = "yes", err = "通知标题", checkexpession = "NotNull" })
                </td>
            </tr>
            <tr>
                <th class='formTitle'>有效期: </th>
                <td class='formValue'>
                    @Html.TextBoxFor(m => m.ValuableDate, new { @class = "txt Wdate", datacol = "yes", err = "有效期", checkexpession = "NotNull", style = "width:370px", onfocus = "WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d'})" })
                </td>
            </tr>
            <tr>
                <th class='formTitle'>通知正文: </th>
                <td class='formValue'>
                    @Html.TextAreaFor(m => m.Content, new { @class = "txt required", datacol = "yes", err = "通知正文", checkexpession = "NotNull", style = "height:100px;width:370px" })
                </td>
            </tr>
            <tr>
                <th class='formTitle'>附件: </th>
                <td class='formValue' style="text-align: center;margin-top:10px;">
                    <input type="file" id="file_uploadattachment" name="file_uploadattachment" value='附件管理' />
                    @Html.TextBoxFor(m => m.Attachment, new { @class = "txt", style = "display:none" })
                </td>
            </tr>
            @*<tr>
                <th class='formTitle'>回复类型: </th>
                <td class='formValue'>
                    @Html.DropDownList("ReplyType", ViewBag.rList as IEnumerable<SelectListItem>, "--请选择--", new { @class = "txtselect required", onchange = "ReplyTypeSelect()",checkexpession = "NotNull", type= "txtselect", datacol = "yes", err = "回复类型" })
                </td>
            </tr>*@
            <tr>

            </tr>
        </table>
        @*<table class="form" id="Option" style="display:none;margin-top:10px" >
            <tr>
                <th class='formTitle'>选项1：</th>
                <td class='formValue'>
                    <input id="ReplyContent" type="text" class="txt"/>
                </td>
            </tr>
            <tr>
                <th class='formTitle'>选项2：</th>
                <td class='formValue'>
                    <input id="ReplyContent" type="text" class="txt"/>
                </td>
            </tr>
            <tr>
                <th class='formTitle'>选项3：</th>
                <td class='formValue'>
                    <input id="ReplyContent" type="text" class="txt"/>
                </td>
            </tr>
            <tr>
                <th class='formTitle'>选项4：</th>
                <td class='formValue'>
                    <input id="ReplyContent" type="text" class="txt"/>
                </td>
            </tr>
            <tr>
                <th class='formTitle'>选项5：</th>
                <td class='formValue'>
                    <input id="ReplyContent" type="text" class="txt" />
                </td>
            </tr>
           
            <tr></tr>
        </table>*@
    </div>
    <div style="overflow:auto; height:200px;scrollbar-face-color:#f60;scrollbar-highlight-color:#F60;scrollbar-3dlight-color:#f60;scrollbar-darkshadow-color:#f60;scrollbar-Shadow-color:#f60;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;">
        <table   class="form" id="radios">
            <tr style="margin-top:10px">
                <th class='formTitle'>接收对象 : </th>
                <td class='formValue'>
                    @Html.RadioButtonFor(Model => Model.ReceiveObjects, 0, new { @id = "ReceiveObjects0", @name = "ReceiveObjects" , @checked=true })教师
                </td>
                <td class='formValue'>
                    @Html.RadioButtonFor(Model => Model.ReceiveObjects, 1, new { @id = "ReceiveObjects1", @name = "ReceiveObjects" })学生
                </td>
                <td class='formValue'>
                    @Html.RadioButtonFor(Model => Model.ReceiveObjects, 2, new { @id = "ReceiveObjects0", @name = "ReceiveObjects" })家长
                </td>
            </tr>
        </table>

        <div id="jiaoshi" style="margin-left:95px;margin-top:10px">
            @*<div id="ConditionInstall" style="height: auto; overflow: auto">*@
            <div id="ConditionInstall">
            </div>
        </div>

        <div id="xuesheng" style="display:none;margin:0 auto;margin-left:95px;margin-top:10px">
            <div><img src="/Content/Images/Icon16/rosette.png" />选择要发送的班级</div>
            @*<div id="ConditionInstall1" style="height: 372px; overflow: auto;">*@
                <div id="ConditionInstall1">
                </div>
            </div>

        <div id="jiazhang" style="display:none;margin:0 auto;margin-left:95px;margin-top:10px">
            <div><img src="/Content/Images/Icon16/rosette.png" />选择要发送的班级</div>
            @*<div id="ConditionInstall2" style="height: 372px; overflow: auto;">*@
                <div id="ConditionInstall2">
                </div>
        </div>

    </div>
</form>



<script src="~/Content/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="~/Content/Scripts/Uploadify/uploadify.css" rel="stylesheet" />
<script src="~/Content/Scripts/Uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
    //上传附件
    $(document).ready(function () {
        $('#file_uploadattachment').uploadify({
            'swf': '@Url.Content("~/Content/Scripts/Uploadify/uploadify.swf")',
            'uploader': '/School/Notifications/UploadAttachment',
            'buttonText': '请选择上传的附件',
            //'sizeLimit': '2048000',                         //最大允许的文件大小为2M
            //'auto': false,                                  //需要手动的提交申请
            'multi': false,                                 //一次只允许上传一个附件
            'onUploadSuccess': function (file, data, response) {
                var obj = jQuery.parseJSON(data); //把返回的Json序列转化为obj对象
                if (obj.Success) {
                    //alert(obj.FilePath);
                    $('#Attachment').val(obj.FilePath);
                }
                else
                    alert(obj.Message);
            }
        });
    });

</script>

 

转载于:https://www.cnblogs.com/yechangzhong-826217795/p/5948389.html

weixin_30809173
关注
公告栏
02-12
公告栏
新闻公告WEB网页设计
06-14
通过新闻公告系统，可以明了的查询相关内容
后台模板 管理后台 好看的后台样式
05-31
后台模板，管理后台，好看的样式，结合了很多样式，基本上项目中用到的页面都可以
租房网站 预定、登录、用户后台页面模板 .xd素材下载
04-20
本话题主要围绕"租房网站 预定、登录、用户后台页面模板 .xd素材下载"这一主题展开，我们将深入探讨相关的设计理念和技术实现。 首先，租房网站的预定功能是吸引用户的关键。这种功能通常包括房源搜索、筛选、查看...
几种网站后台全套页面
03-28
【标题】：“几种网站后台全套页面” 在网页设计与开发领域，后台页面是网站管理员用于管理网站内容、用户数据和系统设置的界面。本资源提供的是多种网站后台的全套页面设计，涵盖了各种功能模块，旨在帮助开发者...
SuperAdmin商业网站后台管理bootstrap页面html模板.zip
10-05
"SuperAdmin商业网站后台管理bootstrap页面html模板.zip"是一个用于构建商业网站后台管理界面的HTML模板，基于流行的Bootstrap框架。Bootstrap是一个开源的前端框架，它提供了丰富的组件、响应式布局和移动设备优先...
效果图效果图.zip.zip
12-03
标题和描述中的"效果图效果图.zip.zip"可能是指一个压缩包文件，其中包含了一系列关于设计效果的图像文件。这通常意味着我们正在处理一个包含UI设计、网页设计或者应用程序界面设计的资源集合。这些图像可能代表了...
网站后台模板
12-04
网站后台模板是构建Web应用程序管理界面的关键元素，它为管理员提供了一个有组织且美观的界面，以便高效地执行各种管理任务。这些模板通常包括登录页面、控制面板、数据表、图表、表单以及一系列用于内容管理和用户...
公告系统（非常实用的公告系统）
11-19
公告系统 简单实用 带后台，希望大家踊跃下载和关注，谢谢支持
html 一个漂亮的网站公告 带图片和css
06-10
html 一个漂亮的网站公告 带图片和css
发布公告页面搭建
热门推荐
JSZY-YYDS的博客
10-28 1万+
发布公告页面搭建 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： VS、C# 作者：韩日九儿 撰写时间：2021/10/28 1、点击发布公告按钮，执行页面的嵌套，其中通知正文是通过ckeditor富文本编辑器来初始化，页面跳转后通过HTML代码来实现页面搭建，具体页面结构下面有参照。 2、页面跳转后的页面。 3、通过绑定发布
通用后台管理系统UI模板-AdminLTE简介及构造动态菜单栏
weixin_30293135的博客
01-14 1167
AdminLTE是一款基于bootstrap的后台管理系统的通用模板UI，它的样式美观且较为符合大多数后台管理系统的需求，典型的上|左右|下的布局形式。并且提供了一整套我们开发的时候可能用到的UI样式，比如表格，表单，图表，日历等。非常适合像我这样对样式编排不太擅长的后端开发者。有了它，我们可以不用自己去写很多复杂的html，css。而把更多时间和精力留在后台的开发上。 话不多说，接下来我简要的...
html 通知页面,消息通知页面.html
weixin_28867333的博客
06-03 2337
消息通知页面$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
HTML发布通知页面代码,使用HTML5的Notification API制作web通知的教程
weixin_30588655的博客
06-10 1329
在使用网页版Gmail的时候，每当收到新邮件，屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification API，我们也可以轻松实现这样的功能。确保浏览器支持如果你在特定版本的浏览器上进行开发，那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况，避免你将宝贵时间浪费在了一个无法使用的API上。如何开始JavaScript Code复制内容到...
公告的发布
weixin_44538225的博客
05-04 1731
做一个网站，公告的发布也是比较常见的，想要在这个网站里面发布一下想要发的公告，就得要这个发布公告的这一个模块，这个跟新闻、广告这一类应该是差不多的，就是发一些自己觉得好的文章，又或者发布一下比如在一个学校或者公司，发布一些需要全校或者整个厂区都需要知道的一些公告。 当然，要发布公告还得查询一下公告，由于公告内容会涉及很多张不同的表，内容不少，所以得分一下页。 而要用到分页就得创建两个实体类，类的名...
一个跳转提示页面---JS
weixin_30383279的博客
10-28 95
//一个跳转提示页面 <script type="text/javascript"> var s=5; function go(){ document.getElementById("chan").innerHTML=s; s=s-1; if (s==0){ window.location.href="ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值