在开发在线周测系统的时候写了一个发布公告的功能,这也是常见的功能,特此记录一下。
先看下成品。
这里使用的是layui的富文本编辑器与layDate控件。这里实现的功能是,管理员可以选择日期发布公告,通过提交按钮将标题,富文本框和laydate的数据发送到后台。
直接上代码
<form action="" class="layui-form">
<fieldset class="layui-elem-field">
<legend>基本信息</legend>
<div class="layui-field-box">
<label class="layui-from-label"><span>*</span>文章标题</label>
<div class="layui-inline">
<input type="text" placeholder="文章标题" class="layui-input"
id="title" name="title" />
</div>
<span>标题字数限制在35个字符</span> <br>
<div>
<label class="layui-from-label"><span>*</span>发布时间</label>
<div class="layui-inline">
<input class="layui-input" placeholder="发布时间" id="time"
name="time"
onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>文章内容</legend>
<div class="layui-field-box">
<textarea class="layui-textarea" id="LAY_demo1" lay-verify="content" name="text"
style="display: none">
请输入您的公告
</textarea>
</div>
<button type="submit" class="layui-btn" lay-submit
lay-filter="fromsumbit">提交</button>
<input type="hidden" id="input" name="input">
</fieldset>
</form>
<script src="static/admin/layui/layui.js" type="text/javascript"
charset="utf-8"></script>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
var start = {
min : laydate.now(),
max : '2099-06-16 23:59:59',
istoday : false,
choose : function(datas) {
end.min = datas; //开始日选好后,重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
min : laydate.now(),
max : '2099-06-16 23:59:59',
istoday : false,
choose : function(datas) {
start.max = datas; //结束日选好后,重置开始日的最大日期
}
};
});
</script>
<script>
layui.use(['layedit','form'], function() {
var form = layui.form();
var layedit = layui.layedit,
$ = layui.jquery;
//构建一个默认的编辑器
var index = layedit.build('LAY_demo1');
form.verify({
content : function(value) {
return layedit.sync(index);
document.getElementById("input").innerText = layedit
.getContent(index); //给hidden赋值
}
})
form.on('submit(fromsumbit)', function(data) {
console.log(data.field);
alert("111")
$.ajax({
url:'${pageContext.request.contextPath}/addnotice.action',
method:'post',
data:data.field,
dataType:'JSON',
success:function(res){
alert("公告添加成功");
},
error:function (data) {
alert("公告添加失败");
}
}) ;
})
});
</script>
var index = layedit.build(‘LAY_demo1’);的意思是定义一个富文本编辑器。这里特别要注意的是 lay-verify=“content” 一定要写上
与之对应的是 form.verify
这是后端的接法。使用的是ssm框架。
希望对用到的猿猿们有所帮助。