图书管理系统之图书管理模块（六）_在线图书管理系统个人管理模块

图书管理系统之图书管理模块（六）

相关源码下载连接：https://download.csdn.net/download/baidu_39378193/85033291

前言：

1、在区域文件中创建书籍管理的控制器

一、创建视图

样式

<style>
        /*改掉所有的label标签的下外边距*/
        label {
   
            margin-bottom: 0px;
        }

        .subscriberData {
    /*编辑*/
            background: #f6f6f6;
            height: 300px;
        }

        .subscriberData2 {
    /*新增*/
            background: #f6f6f6;
            height: 335px;
        }

        .print {
   
            width: 200px;
            height: 200px;
            background: #c2c2c2;
        }

        .layui-form-checkbox i {
   
            height: 30px;
        }

        .BookBody {
   
            border: 1px solid #06f3b9;
            width: 100%;
            height: 500px;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

1.1、样式效果

使用了一种新的渲染layui表格的方法

后面不够用在进行修改

<div class="p-4">
        <!--顶部搜索-->
        <div>
            <form autocomplete="off">
                <div class="row align-items-center ml-auto">
                    <label>书籍搜索：</label>
                    <div class="cor-6 ml-3 mr-4">
                        <input type="text" name="selectBookU" id="selectBookU" class="form-control" placeholder="根据书籍名称去搜索" oninput="TableReload()" />
                    </div>
                    <button type="button" class="layui-btn layui-btn-radius" onclick="butExpert()">高级筛选</button>
                </div>
                <!--高级筛选-->
                <div id="butExpert" style="display:none;">
                    <div class="form-row mt-4 mb-4">
                        <!--类型-->
                        <div class="col-2">
                            <div class="row align-items-center ml-auto">
                                <label>书籍类型：</label>
                                <div class="cor-8 ml-3 mr-4">
                                    <select id="BookTypeU" class="form-control" onchange="TableReload()">
                                        <option value="0">-选择-</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--状态-->
                        <div class="col-2">
                            <div class="row align-items-center ml-auto">
                                <label>出版社：</label>
                                <div class="cor-6 ml-3 mr-4">
                                    <select id="publishingHouseU" class="form-control" onchange="TableReload()">
                                        <option value="0">-选择-</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--真实姓名-->
                        <div class="col-3">
                            <div class="row align-items-center ml-auto">
                                <label>作者名称：</label>
                                <div class="cor-6 ml-3 mr-4">
                                    <input type="text" name="AuthorNameU" id="AuthorNameU" class="form-control" placeholder="作者名称" oninput="TableReload()" />
                                </div>
                            </div>
                        </div>
                        <!--电话号码-->
                        <div class="col">
                            <div class="row align-items-center ml-auto">
                                <label>查询ISBN：</label>
                                <div class="cor-6 ml-3 mr-4">
                                    <input type="text" name="ISBNU" id="ISBNU" class="form-control" placeholder="查询ISBN" oninput="TableReload()" />
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <p style="color: #c2c2c2;">当输入值的时候触发查询功能</p>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!--表格渲染-->
        <table class="layui-table mt-3" lay-data="{url:'/Common/BookUpload/queryBook', id:'idTest',toolbar: '#toolbarDemo',page:{limit:5,limits:[5,10,15]}}" lay-filter="test">
            <thead>
                <tr>
                    <th lay-data="{type:'numbers'}">序号</th>
                    <th lay-data="{field:'bookName',align:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67