<%--
Created by IntelliJ IDEA.
User: WDD
Date: 2019/6/15
Time: 10:25
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> //meta標簽用來描述一個HTML頁面文檔的一個屬性
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>圖書管理系統</title>
<style>
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<jsp:include page="/WEB-INF/jsp/common/header.jsp" flush="true"/> //<jsp:include page="被包含文件的路徑" flush="true/false">, page屬性是必填的（絕對或相對路徑），但它及支持表達式也 可傳遞參數。flush屬性為緩沖區滿時，清空緩沖區。
<!-- 搜索條件表單 -->
<div class="demoTable layui-form">
<div class="layui-inline">
<input class="layui-input" name="bname" id="bname" autocomplete="off" placeholder="請輸入書名"> //autocomplete禁止瀏覽器自動填充，
placeholder 屬性規定可描述輸入字段預期值的簡短的提示信息（比如：一個樣本值或者預期格式的短描述）。
該提示會在用戶輸入值之前顯示在輸入字段中。
注意：placeholder 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。
</div>
<div class="layui-inline"> // class="layui-inline" 可以用來div強制不換行，而且比較好看~
<input class="layui-input" name="author" id="author" autocomplete="off" placeholder="請輸入作者">
</div>
<div class="layui-inline">
<div class="layui-input-block"> // "layui-input-block是一個表單元素占一行，豎着，以例表的形式排列。
layui-input-inline 這個允許，多個表單控件占一行，橫着，一行可以放置多個表單元素。
<select name="cid" id="cid">
<option value="">請選擇書本類別</option>
<c:forEach items="${category}" var="ctg"> //<c:foreach>是類似於for和for each的循環。
items 用於接收集合對象，var 定義對象接收從集合里遍歷出的每一個元素。同時元素會自動轉型。
varStatus的屬性可以方便實現一些與行數相關的功能，varStatus 是循環索引。
<option value="${ctg.cid}">${ctg.cname}</option>
</c:forEach>
</select>
</div>
</div>
<button class="layui-btn" data-type="reload">搜索</button> //data-type="reload"綁定事件,可以理解為事件名
<a style="margin-left: 70px" class="layui-btn layui-btn-normal" onclick="add();">添加圖書</a> //margin-left：100px是左邊距100px，-100px就是邊距不僅為0，還要想左移動100px.
</div>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<%--<div class="layui-tab-item layui-show">--%>
<%--<div id="pageDemo"></div>--%>
<%--</div>--%>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-sm" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">刪除</a>
</script>
<script src="${APP_path}/js/layui.js"></script>
<script>
layui.config({
version: '1554901098009' //為了更新 js 緩存，可忽略
});
function add(){//添加
layer.open({
type: 2,
title: '添加圖書',
skin: 'layui-layer-demo', //加上邊框
area: ['800px', '600px'], //寬高
content: '${APP_PATH}/library/addBook.do'
});
}
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
var laydate = layui.laydate //日期
,laypage = layui.laypage //分頁
,layer = layui.layer //彈層
,table = layui.table //表格
,carousel = layui.carousel //輪播
,upload = layui.upload //上傳
,element = layui.element //元素操作
,slider = layui.slider //滑塊
//執行一個 table 實例
table.render({
elem: '#demo'
,height: 550
,url: '${APP_path}/library/listBook.do' //數據接口
,title: '圖書表'
,page: true
,limit: 5
,limits: [5,10,15,20]
,cols: [[ //表頭
{type: 'checkbox', fixed: 'left'}
,{field: 'book_id', title: '書本編號', width:150, sort: true}
,{field: 'name', title: '書名', width:200}
,{field: 'author', title: '作者', width: 200, sort: true}
,{field: 'publish', title: '出版社', width:200, sort: true}
,{field: 'ISBN', title: 'ISBN', width: 150, sort: true}
,{field: 'pubdate', title: '出版日期', width: 120, sort: true}
,{field: 'stock', title: '庫存', width: 100}
,{field: 'price', title: '價格', width: 100, sort: true}
// ,{field: 'introduction', title: '簡介', width:150}
,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
]]
//用於搜索結果重載
,id: 'testReload'
});
var $ = layui.$, active = {
reload: function(){
var bname = $('#bname');
var author = $('#author');
var cid = $('#cid');
//執行重載
table.reload('testReload', {
//一定要加不然亂碼
method: 'post'
,page: {
curr: 1 //重新從第 1 頁開始
}
,where: {
//bname表示傳到后台的參數,bname.val()表示具體數據
bname: bname.val(),
author: author.val(),
cid: cid.val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//監聽行工具事件
table.on('tool(test)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
var data = obj.data //獲得當前行數據
,layEvent = obj.event; //獲得 lay-event 對應的值
if(layEvent === 'detail'){
find(data);
} else if(layEvent === 'del'){
layer.confirm('真的刪除行么', function(index){
del(data.book_id,obj,index);
});
} else if(layEvent === 'edit'){
edit(data);
}
});
//后邊兩個參數僅僅是因為要執行動態刪除dom
function del(book_id,obj,index){
$.ajax({
url:'${APP_path}/library/delBook.do?book_id='+book_id,
dataType:'json',
type:'post',
success:function (data) {
if (data.success){
obj.del(); //刪除對應行（tr）的DOM結構
layer.close(index);
}else{
layer.msg(data.message);
}
}
})
}
function edit(data){//修改
layer.open({
type: 2,
title: '修改圖書信息',
skin: 'layui-layer-demo', //加上邊框
area: ['800px', '600px'], //寬高
method: 'post',
content: '${APP_PATH}/library/editBook.do?'
+'book_id='+data.book_id
});
}
function find(data){
layer.open({
type: 2,
title: '查看圖書信息',
skin: 'layui-layer-demo', //加上邊框
area: ['800px', '600px'], //寬高
method: 'post',
content: '${APP_PATH}/library/findBook.do?'
+'book_id='+data.book_id
});
}
});
</script>
</body>
</html>
1.
禁止瀏覽器表單自動填充
1、普通文本框添加 autocomplete="off"
<input type="text" autocomplete="off" name="userName"/>
2、密碼輸入框添加 autocomplete="new-password"。
<input type="password" autocomplete="new-password" name="password"/>
3、如果是整個表單可以設置：
<form method="post" action="/form" autocomplete="off">[…]</form>
勉勉強強看完，有點懵