Layui常用的

qq_41884232發表於2018-11-13

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',

在這裡插入圖片描述
在這裡插入圖a妞妞片描述

相關文章