記錄layui使用之彈出層

layui官方彈出層文檔 https://www.layui.com/doc/modules/layer.html#use
記錄layui彈出層使用
導入以下兩個js

<script th:src="@{/lib/layuiadmin/layui/layui.all.js}"></script>
<script th:src="@{/lib/jquery/jquery-1.11.3.min.js}"></script>

普通的確認,提示彈出層

//刪除方法
	function deleteData(id) {
		var commonvo = {
			"id" : id,
			"bean" : "com.xny.base.model.RsysUser"
		};
		var url = basePath + "/sysComEdit/comDeleteInfo";
		//詢問框
		layer.confirm('真的刪除?', {//詢問

		}, function() {//確定後執行的事件
			$.ajax({
				type : "post",
				url : url,
				contentType : 'application/json;charset=UTF-8',
				datatype : "json",
				data : JSON.stringify(commonvo),//轉化爲json字符串
				success : function(data) {
					if ($.trim(data) == "true") {
						layer.msg('操作成功', {//提示
							icon : 1
						});
						window.setTimeout("javascript:location.href='/usersz'",
								20);
					} else {
						layer.msg('刪除失敗', {
							icon : 2
						});
					}
				}
			});

		}, function() {//取消

		});
	}

layer

注意使用layer時,下拉選,單選按鈕,時間控件等需要重新渲染

		layer.open({
			type :1,
			title : "高峯低谷修改",
			closeBtn : 0,
			area : ['40%', '45%' ],
			anim : 2,
			shadeClose : false,//點擊遮罩不能消失
			closeBtn : 1,
			content : $("#editOne"),
			success : function(layero, index) {
				$("#editId").val(id);
				$("#editName").val(name);
				$("#editType").val(type);
				laydate.render({//渲染
					elem : '#stime',
					type : 'time',
					format : 'HH:mm',
					value : start,
					isInitValue : true
					,trigger: 'click'
				})
				laydate.render({
					elem : '#etime',
					type : 'time',
					format : 'HH:mm',
					value : end,
					isInitValue : true
					,trigger: 'click'
				})
				form.render();
			},
			cancel : function(index, layero) {
				//if (confirm('確定要關閉麼')) { //只有當點擊confirm框的確定時,該層纔會關閉
					layer.close(index);
				//}
				return false;
			},
			end : function() {
				$("#editOne").css("display", "none");
			}
		})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章