1.富文本编辑器(在官方文档上的导航栏找不到,但是确实是存在,哈哈)
https://www.layui.com/doc/modules/layedit.html
2.layui的日期的限制(写法很多,以下为在整个项目中用的较多的一个方法)
开始日期选中后,结束日期必须在开始日期之后
layui.use('laydate', function () {
var laydate = layui.laydate;
//开始日期
var startDate = laydate.render({
elem: '#startTime'
, type: 'date'
, done: function (value, date) {
endDate.config.min = {
year: date.year,
month: date.month - 1,
date: date.date
};
}
});
//结束日期
var endDate = laydate.render({
elem: '#endTime'
, type: 'date'
, done: function (value, date) {
startDate.config.max = {
year: date.year,
month: date.month - 1,
date: date.date
}
}
});
})
3.layui分页
利用layui实现新闻列表的分页
//ajax请求后台数据
function getPageInfo(limit, current) {
$.ajax({
type: "post",
url: "/PolicyPublish/NewsTableList",
data: {
page: current,
rows: limit,
StartTime: $("#startTime").val(),
EndTime: $("#endTime").val(),
newsTitle: $(".titleInput").val(),
NewsType: $(".typeSelect").val(),
},
success: function (data, status) {
ContentRender(data);//渲染页面数据
toPage(data.count, limit, current);//然后进行分页的初始化
}
});
}
function ContentRender(data) {
$(".contentBox").html("");
$.each(data.data, function (i, v) {
$(".contentBox").append(" <div data=" + v.UUID + " class=\"layui-col-xs12 layui-col-sm12 layui-col-md12 newsList\"> <div class=\"layui-col-xs10 layui-col-sm10 layui-col-md10\"><div class=\"newsTop\"><input type=\"checkbox\" class=\"checked\"><a target=\"_parent\" href=\"/PolicyPublish/PolicyPublishContent?uuid=" + v.UUID + "&page=" + page + "&view=" + '政策' + "\"><h4>" + v.NewsTitle + "</h4></a> </div><div class=\"newsBottom\"> <p>" + v.NewsTextPlain + "</p><div><span>" + v.StrNewsTime + "</span><a target=\"_parent\" href=\"/PolicyPublish/PolicyPublishContent?uuid=" + v.UUID + "&page=" + page + "\">" + '阅读原文' + "</a></div></div></div><div class=\"layui-col-xs2 layui-col-sm2 layui-col-md2 toolbar\"><span class=\"read\">" + '解读' + "</span><span><a href=\"/PolicyPublish/EditPolicyPublish?uuid=" + v.UUID + "\" class=\"edit\">" + '编辑' + "</a></span><span class=\"delete\">" + '删除' + "</span></div></div>");
Power();
});
}
//分页
function toPage(total, limit, current) {
layui.use('laypage', function () {
var laypage = layui.laypage;
//调用分页
laypage.render({
elem: 'paged'
, count: total //这个是后台返回的数据的总条数
, curr: current
, hash: 'fenye' //自定义hash值
, layout: ['prev', 'page', 'next', 'skip']
, jump: function (obj, first) {
if (!first) { //一定要加此判断,否则初始时会无限刷新
var currentPage = obj.curr;
}
}
});
});
};
4.layui的弹出层
这边只有一个问题,就是右上角的按钮的样式,刚开始设置 closeBtn: 1或者 closeBtn: 2都不会改变样式,后来加上title:“导出”后才生效,具体原因不明,title不能为空;
5.layui动态赋值select下拉框
首次使用是明明已经ajax取到数据,并且append到select框,但下拉框中确实是没有,开发者模式下查看也显示已经渲染上去,后来仔细查看官方文档发现,需要form,render()一下才会渲染上去。详细用法可查看官方文档https://www.layui.com/doc/modules/form.html
$.ajax({
url: "/EnvironmentMonitor/GetAnalogSensor",
type: "GET",
dataType: "json",
data: {
mineCode: data.value,
},
success: function (data) {
if (data.code == 0) {
if (data.count == 0) {
layer.msg("当前煤矿没有传感器类型!")
} else {
for (var i = 0; i < data.data.length; i++) {
$("#equcode").append("<option value=" + data.data[i].Value + ">" + data.data[i].Text + "</option>")
}
//需要渲染一下
form.render();
}
}
},
error: function () {
console.log("error")
}
});
6.获取select下拉框选中的value和text
查看文档只有获取value的方法,没找到获取text的方法,以下为在项目中获取text和value的方法。
如若官方文档有获取text的方法,请大家留言提供,谢谢了;
<form class="layui-form" action="">
<div class="layui-inline" style="width:100%">
<div class="layui-input-inline" style="width:50%;">
<select name="modules" lay-verify="required" lay-search="" lay-filter="test" id="CoalSelect"></select>
</div>
</div>
</form>
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
,layer = layui.layer
form.on('select(test)', function (data) {
coalName = data.elem[data.elem.selectedIndex].text;//获取选中值的text
coalCode = data.value;//获取选中值的value
});
})
7.上传附件(此功能很好用,官方文档也很齐全)
<button type="button" class="layui-upload-button layui-btn" id="test1" style="padding:0 5px!important;flex-shrink:0;">
上传附件
<i class="layui-icon"></i>
</button>
<script>
//文件上传
var uploadFlag = 0;
var uploadInst = upload.render({
elem: '#test1' //绑定元素
, url: '/InsureStitution/Upload'//上传接口
, accept: 'file'
, exts: 'doc|docx|pdf|bmp|jpg|png'
, multiple: true
, size: 51200
, alldone: function (obj) {//上传完毕回调
console.log(obj.total);//得到总文件数
console.log(obj.successful);//请求修改成功的文件数
console.log(obj.aborted);//请求失败的文件数
}
, before: function (obj) {
layer.load(); //上传loading
//在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。
}
, done: function (res, index, upload) {
layer.closeAll('loading'); //关闭loading
//上传接口请求成功的回调,在上传接口请求完毕后触发,但文件不一定是上传成功的,只是接口的响应状态正常(200)
}
, error: function () {
//请求异常回调
layer.closeAll('loading');
}
});
</script>
未完,待续。。。