写代码时遇到的知识点拿出来分享。
1.layer弹出层显示在top顶层
-
// 监听工具条
-
table.
on(
'tool(tb-book)',
function (
obj) {
-
var data = obj.
data;
-
// 修改
-
if (obj.
event ===
'edit') {
-
top.
layer.
open({
-
type:
2,
-
offset:
'10px',
-
title:
"修改图书",
-
area: [
'800px',
'660px'],
-
content: [
'bookEdit/'+data.
id]
-
});
-
}
-
});
2.刷新同级iframe中table数据
-
//监听表单提交
-
// 修改
-
form.
on(
'submit(saveBook)',
function (
data) {
-
//layer.alert(JSON.stringify(data.field));
-
data.
field.
categoryName=$(
"#categoryCode option:selected").
text();
-
data.
field.
languageName=$(
"#languageCode option:selected").
text();
-
data.
field.
locationName=$(
"#locationCode option:selected").
text();
-
data.
field.
publisherName=$(
"#publisherCode option:selected").
text();
-
$.
ajax({
-
url:
'/api/book/save',
-
type:
'POST',
-
contentType:
"application/json",
-
dataType:
"json",
-
data:
JSON.
stringify(data.
field),
-
success:
function (
result) {
-
if (result.
code ==
200) {
-
// layer.msg("修改成功！", {icon: 6});
-
cleanForm(
"#saveBook");
-
if (data.
field.
id.
length >
0) {
-
layer.
closeAll();
//关闭所有的弹出层
-
}
-
$(
".layui-show").
find(
"iframe")[
0].
contentWindow.
userTable.
reload();
-
}
else {
-
layer.
alert(result.
message);
-
}
-
}
-
});
-
-
return
false;
-
-
});
3.layui单选框radio的使用
-
<div class="layui-form-item">
-
<label class="layui-form-label">性别
</label>
-
<div class="layui-input-block">
-
<input type="radio" id="male" name="sex" value="男" title="男">
-
<input type="radio" id="female" name="sex" value="女" title="女">
-
</div>
-
</div>
-
if(data.
sex==
'男'){
-
$(
"#male").
prop(
"checked",
true);
-
$(
"#female").
prop(
"checked",
false);
-
}
-
if(data.
sex==
'女'){
-
$(
"#male").
prop(
"checked",
false);
-
$(
"#female").
prop(
"checked",
true);
-
}
-
-
form.
render();
//更新全部
4.使用日期控件
-
<div class="layui-inline">
-
<label class="layui-form-label">借出日期
</label>
-
<div class="layui-inline">
-
<input type="text" name="borrowDate" id="borrowDate" required lay-verify="required" autocomplete="off"
-
class=
"layui-input">
-
</div>
-
</div>
-
laydate.
render({
-
elem:
'#borrowDate',
-
type:
'date',
-
format:
"yyyy-MM-dd",
-
value:
new
Date()
-
});
5.表格中格式化日期列
{field: 'borrowDate', title: '借阅日期', width: 120,templet:'<div>{{ layui.util.toDateString(d.borrowDate, "yyyy-MM-dd") }}</div>'}
6.日期选择后的事件函数
-
laydate.
render({
-
elem:
'#borrowDate',
-
type:
'date',
-
format:
"yyyy-MM-dd",
-
value: borrowTime,
-
done:
function(
value, date, endDate){
-
returnTime=
plusDays(
new
Date(value),
30);
-
alert(returnTime.
Format(
"yyyy-MM-dd"));
-
$(
"#returnDate").
val(returnTime.
Format(
"yyyy-MM-dd"));
-
}
-
});
7.表格列不同值设置不同颜色
, {field: 'borrowStatus', title: '状态', width: 80,templet:showStatus}
-
// 借阅状态
-
function
showStatus(
data) {
-
var status = data.
borrowStatus;
-
var result;
-
if (status ==
0) {
-
result =
'<a class="" style="color:#FF5722">未还</a>';
-
}
-
if (status ==
1) {
-
result =
'<a class="" style="color:#009688">已还</a>';
-
}
-
if (status ==
2) {
-
result =
'<a class="" style="color:#FF5722">逾期</a>';
-
}
-
return result;
-
}
8.控制上传文件类型
这里以控制职能上传xls|xlsx文件为例。
-
upload.
render({
-
elem:
'#uploadExcel'
//绑定元素
-
,
url:
'api/student/upload'
//上传接口
-
,
accept:
'file'
//普通文件
-
,
acceptMime:
'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-
,
exts:
'xls|xlsx'
//只允许上传xls文件
-
,
before:
function (
obj) {
-
layer.
load();
//上传处理loading
-
}
-
,
done:
function(
res){
-
// 上传完毕回调
-
layer.
closeAll(
'loading');
//关闭loading
-
if(res.
code==
200){
-
userTable.
reload();
-
layer.
msg(
"导入成功！");
-
}
else {
-
layer.
msg(res.
message);
-
}
-
}
-
,
error:
function(
){
-
//请求异常回调
-
layer.
closeAll(
'loading');
//关闭loading
-
layer.
msg(
"导入失败！");
-
}
-
});
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
