Layui常用的
layui 頁面彈出
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
$('#addMonthSafe').click(function() {
layui.use('layer', function() {
var layer = layui.layer;
layer.open({
type: 2,
title: '新增預警資訊',
maxmin: true,
shadeClose: true, //點選遮罩關閉層
area: ['960px', '600px'],
content: 'addmonthsafe.html', //也可以寫$("#id屬性).html();
cancel: function() {
}
});
})
});
表頭加分頁
<table class="layui-hide" id="test" lay-filter="demo"></table>
<div id="test1" Style="text-align: center"></div>
layui.use([ 'table', 'laypage' ],function() {
var table = layui.table;
//第一個例項
table.render({
elem : '#test', //table標籤的id
id : 'testpage', //下面父頁面重新整理用的id
data : list, //資料介面
align:'center',
cols : [ [
{
field : 'warningId', //data裡面的屬性
title : 'ID',
width : 20,
align : 'center'
},
{
field : 'warningClass',
title : '預警等級',
width : 30,
align : 'center',
},
{
field : 'warningTitle',
title : '預警標題',
width : 60,
align : 'center',
},
{
field : 'powerName',
title : '電廠名',
width : 60,
align : 'center'
},
{
field : 'warningFrom',
title : '預警來源',
width : 60,
align : 'center'
},
{
field : 'warningTime',
title : '釋出時間',
width : 120,
align : 'center'
},
{
field : 'warningWriter',
title : '釋出人',
width : 100,
align : 'center'
},
{
field : 'warningCharge',
title : '預警負責人',
width : 60,
align : 'center'
},
{
field : 'emergencyInstruction',
title : '突發事件介紹',
width : 460,
align : 'center'
},
{
field : 'emergencyStatus',
title : '預警狀態',
width : 200,
align : 'center',
toolbar : '#switchTpl'
},
{
field : '',
title : '操作',
width : 200,
align : 'center',
toolbar : '#barDemo'
} ] ]
})
laypage.render({
elem : 'test1',//注意，這裡的 test1 是 ID，不用加 # 號,
count : data.data.total, //資料總數，從服務端得到
jump : function(
obj, first) {
//obj包含了當前分頁的所有引數，比如：
console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的資料。
console.log(obj.limit); //得到每頁顯示的條數
//首次不執行
if (!first) {
$.ajax({
type : "GET",
url : baseurl+ "/warning/queryWarningManager",
data : {
pageNum : obj.curr,
token : token,
powerId:powerId,
warningTitle:warningTitle
},
success : function(data) {
if (data.meta.code == 200) {
table.reload('testpage',
{
data : data.data.list
})
}
}
})
}
}
});
})
}
}
})
}
普通的標籤和按鈕
<div class="layui-inline"
Style="width: 100%; text-align: center; margin-right: 10px">
<span id="addMonthSafe" class="layui-btn layui-btn-normal">新增預警資訊</span>
<input type="text" style="width: 345px; display: inline"
class="layui-input" id="test3" placeholder="請輸入標題" /> <span
id="search" class="layui-btn layui-btn-normal">查詢</span>
</div>
是否離職/評論通過之類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>所有作品</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="static/css/style.css">
<style>
.layui-table-cell {
height: auto;
}
</style>
</head>
<body>
<div class="container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>南方口腔醫生列表</legend>
</fieldset>
<form class="layui-form">
<table class="layui-hide" id="test"></table>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 -->
<table id="demo" lay-filter="test"></table>
<div id="test1"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="layui/layui.js"></script>
<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="dimission">離職</a>
</script>
<script type="text/html" id="barDemo2">
<a class="layui-btn layui-btn-sm layui-btn-xs layui-btn-normal " lay-event="assume">上崗</a>
</script>
<script>
var list;
var userType;
var vip;
var laypage;
var backrole=localStorage.getItem("backRole");
$(function() {
layui.use(['form', 'laypage'], function() {
var form = layui.form;
laypage = layui.laypage;
userlist();
})
})
function userlist() {
$.ajax({
type: "GET", //提交方式
url: baseurl + "/backuser/doctorlist", //路徑
dataType: 'json',
data: {
backrole:localStorage.getItem("backRole"),
}, //資料，這裡使用的是Json格式進行傳輸
success: function(data) { //返回資料根據結果進行相應的處理
console.log(data.data);
list = data.data.rows;
layui.use('table', function() {
var table = layui.table;
//第一個例項
table.render({
elem: '#demo',
id: 'testReload',
data: list, //資料介面
cols: [
[{
field: 'cavityDid',
title: 'ID',
width:80,
}, {
field: 'cavityDname',
title: '姓名',
width: 120
}, {
field: 'cavityHdpath',
title: '頭像',
width: 180
}, {
field: 'cavityPosition',
title: '職位',
width: 100
}, {
field: 'cavityHospital',
title: '所屬醫院',
width: 160
}, {
field: 'cavityProfile',
title: '醫生簡介',
width: 180
}, {
field: 'cavityStatus',
title: '在職狀態',
width: 100,
templet:"#barDemo" //ID下面的js需要
}, {
title: '離職',
width: 200,
align: 'center',
toolbar: '#barDemo1'
}, {
title: '上崗',
width: 200,
align: 'center',
toolbar: '#barDemo2'
}]
]
});
laypage.render({
elem: 'test1' //注意，這裡的 test1 是 ID，不用加 #號
,
count: data.data.total, //資料總數，從服務端得到
jump: function(obj, first) {
//obj包含了當前分頁的所有引數，比如：
console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的資料。
console.log(obj.limit); //得到每頁顯示的條數
//首次不執行
if(!first) {
//do something
$.ajax({
type: "get", //提交方式
url: baseurl + "/backuser/doctorlist", //路徑
dataType: 'json',
data: {
backrole:localStorage.getItem("backRole"),
pageNum: obj.curr
}, //資料，這裡使用的是Json格式進行傳輸
success: function(data) {
if(data.meta.code == 200) {
table.reload('testReload', {
data: data.data.rows
});
}
}
})
}
}
});
table.on('tool(test)', function(obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行資料
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM物件
var cavityDid = obj.data.cavityDid;
if(layEvent === 'dimission') { //醫生離職 修改狀態為1
var backrole=localStorage.getItem('backRole');
var cavityDid=data.cavityDid
//do something
$.ajax({
type: "post", //提交方式
url: baseurl + "/backuser/doctordimission", //路徑
dataType: 'json',
data: {
backrole:backrole,
cavityDid:cavityDid
}, //資料，這裡使用的是Json格式進行傳輸
success: function(data) {
if(data.meta.code == 200) {
layer.msg("該醫生成功下崗");
setTimeout(function () {
window.location.reload()
}, 500);
}else{
layer.msg("該醫生已經下崗狀態,不要重複操作");
}
}
})
}else if(layEvent === 'assume') { //醫生離職 修改狀態為1
var backrole=localStorage.getItem('backRole');
var cavityDid=data.cavityDid
//do something
$.ajax({
type: "post", //提交方式
url: baseurl + "/backuser/doctorassume", //路徑
dataType: 'json',
data: {
backrole:backrole,
cavityDid:cavityDid
}, //資料，這裡使用的是Json格式進行傳輸
success: function(data) {
if(data.meta.code == 200) {
layer.msg("該醫生成功上崗");
setTimeout(function () {
window.location.reload()
}, 500);
}else{
layer.msg("該醫生已經上崗狀態,不要重複操作");
}
}
})
}
});
});
}
});
}
</script>
<script type="text/html" id="barDemo">
{{# if (d.cavityStatus=== 0) { }}
<span>在崗</span> {{# } else { }}
<span>離職</span> {{# } }}
</script>
</body>
</html>
頭像點選放大
field: 'path',
title: '輪播圖',
width: 150,
templet: '#barDemo1', //獲取圖片
event: 'aaaa', //點選放大圖片需要
align: 'center',
aaaa是根據 event判斷
else if(layEvent === 'aaaa') {
layer.photos({
photos: {
"data": [ //相簿包含的圖片，陣列格式
{
"alt": "使用者頭像",
"pid": 666, //圖片id
"src": user_headimg, //原圖地址
"thumb": user_headimg //縮圖地址
}
],
},
anim: 3 //0-6的選擇，指定彈出圖片動畫型別，預設隨機（請注意，3.0之前的版本用shift引數）
});
日期選擇器
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">開始時間</label>
<div class="layui-input-inline">
<input type="text" class="layui-input activity_starttime" id="test5" placeholder="請輸入開始時間">
</div>
</div>
</div>
$(function() {
activity_id = getQueryString("activity_id");
layui.use(['element', 'form', "upload", 'laydate'], function() {
var $ = layui.jquery,
element = layui.element;
var upload = layui.upload;
var laydate = layui.laydate;
form = layui.form;
getProListxuanze();
//日期時間選擇器
laydate.render({
elem: '#test5',
type: 'datetime'
});
輪播圖讀取
<script type="text/html" id="barDemo1">
<img src="{{d.path}}" />
</script>
field: 'path',
title: '輪播圖',
width: 150,
templet: '#barDemo1', //獲取圖片
event: 'aaaa', //點選放大圖片需要
align: 'center',
相關文章
- 頁面佈局 layui與 layui的匯入UI
- LayUi的簡單使用UI
- LayUI框架UI框架
- layui 的基本使用介紹UI
- layui的增刪改查UI
- layui 的 select 資料追加UI
- layui修改select的值的方法UI
- Layui-buttonUI
- layUI前端框架使用詳解_layUI前端框架最新最完整UI前端框架
- layui用法總結UI
- layui select 相關UI
- LayUI—tree樹形結構的使用UI
- Django python 基於Layui的分頁DjangoPythonUI
- Layui(十一) Layui Tree點選元件則載入相關資料UI元件
- 快速上手前端框架layui前端框架UI
- layui 的 GitHub 及 Gitee (碼雲) 倉庫UIGithubGitee
- 使用layui框架的select獲取選中的值UI框架
- Layui引起的對前端的一次記錄UI前端
- js返回頁面頂部的實現(layui)JSUI
- layui下的三大分類產品UI
- Layui 官網要下線了！！！基於layui開發的後端系統該何去何從UI後端
- Layui表格日期格式顯示UI
- layui 資料表格匯出UI
- layui資料表格搜尋UI
- layui垂直導航用法大全UI
- layui更新版本UI
- Laravel6.0 最新開源後臺系統，整合了大部分常用功能，後臺模板 LayuiLaravelUI
- 最新最全的 layUI 框架使用教程視訊教程分享UI框架
- 呼叫layui.use中function的正確姿勢UIFunction
- Layui三方外掛OPTable的回撥UI
- layui-admin 表單 store 操作UI
- 前端框架——Layui（樹形表格treeGrid ）前端框架UI
- layui豎版tab選項卡UI
- Jfinal+layui增刪改查UI
- Laravel 使用 layui 分頁過長LaravelUI
- layui tree資料格式轉換UI
- Thinkphp5.9+layui+bootstrap後臺PHPUIboot
- layui使用者新增實現UI