layui框架下的摸索与学习

一、table表格内的查询
1.单个条件查询：
主要代码:
  1 <%--
  2   Created by IntelliJ IDEA.
  3   User: Administrator
  4   Date: 2019/1/14
  5   Time: 18:38
  6   To change this template use File | Settings | File Templates.
  7 --%>
  8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9 
 10 
 11     
 12     
 13     
 14     
 15     
 16     
 17     用户管理
 18 
 19 class="layui-view-body">
 20 
 34 class="get_yzm_div" id="get_yzm_div" style="display: none;">
 35     class="yzm">
 36         手机号
 37         
 38     
 39     class="yzm">
 40         验证码
 41         
 42 
 43         class="get_yzm">
 44             
 45              <span
 46                 id="re_get">获取验证码
 47     
 48     
 50 
 51 class="layui-content">
 52     class="layui-page-header">
 53         class="pagewrap">
 54             class="layui-breadcrumb">
 55                 首页
 56                 用户管理
 57                 用户信息
 58             
 59             class="title">用户信息
 60         
 61     
 62     class="layui-row">
 63         class="layui-card">
 64             class="layui-card-body">
 65                 class="form-box">
 66                     class="layui-form layui-form-item">
 67                         class="layui-inline">
 68                             class="layui-form-mid">用户名:
 69                             class="layui-input-inline" style="width: 100px;">
 70                                 class="layui-input" name="username" id="username">
 71                             
 72                             <%--class="layui-form-mid">手机号:--%>
 73                             <%--class="layui-input-inline" style="width: 100px;">--%>
 74                                 <%--class="layui-input" name="phoneNumber">--%>
 75                             <%----%>
 76                             <%--class="layui-form-mid">邮箱:--%>
 77                             <%--class="layui-input-inline" style="width: 100px;">--%>
 78                                 <%--class="layui-input">--%>
 79                             <%----%>
 80                             
 81                             <%----%>
 82                             
 83                         
 84                     
 85                     
 86                 
 87             
 88         
 89     
 90 
 91 
 92     class="layui-form" action="" lay-filter="example" style="height: 400px; width: 400px; margin-left: 100px;">
 93         class="layui-form-item" style="margin-top: 20px;">
 94             class="layui-form-label">用户名
 95             class="layui-input-block">
 96                 class="layui-input">
 97             
 98         
 99         class="layui-form-item">
100             class="layui-form-label">手机号
101             class="layui-input-block">
102                 class="layui-input">
103             
104         
105         class="layui-form-item">
106             class="layui-form-label">头像
107             class="layui-input-inline">
108                 class="layui-input">
109             
110             class="layui-input-inline layui-btn-container" style="width: auto; margin: 14px 0 0 76px;">
111                 
115                 class="layui-upload-file" type="file" accept="undefined" name="file">
116                 
117             
118         
119         class="layui-form-item">
120             class="layui-form-label">邮箱
121             class="layui-input-block">
122                 class="layui-input">
123             
124         
125         class="layui-form-item">
126             class="layui-form-label">角色
127             class="layui-input-block">
128                 class="layui-unselect layui-form-select">
129                     class="layui-select-title">
130                         class="layui-input layui-unselect">
131                         class="layui-edge">
132                     
133                 
134             
135         
136         class="layui-form-item">
137             class="layui-form-label">部门
138             class="layui-input-block">
139                 class="layui-unselect layui-form-select">
140                     class="layui-select-title">
141                         class="layui-input layui-unselect">
142                         class="layui-edge">
143                     
144                 
145             
146         
147         class="layui-form-item">
148             class="layui-form-label">备注
149             class="layui-input-block">
150                 class="layui-input">
151             
152         
153     
154 
155 <script src="js/layui.js"></script>
156 <script src="js/layui.js"></script>
157 <script type="text/html" id="bardemo">
158     
159     
160 </script>
161 <script>
162     var element = layui.element;
163     var table = layui.table;
164     var form = layui.form;
165 
166     layui.use([ 'table'],function () {
167         var reqJson = {};
168         var table = layui.table;
169         var $ = layui.$;
170         var url = "getUserInfo";
171         var col = [[ //标题栏
172             {field: 'id', title: 'ID', width: '5%', sort: true}
173             ,{field: 'bg_roleName', title: '用户姓名',width: '6%',align: 'center'}
174             ,{field: 'bg_Create', title:'创建人',width: '7%',align: 'center'}
175             ,{field: 'name', title: '用户名', minWidth: 120,align: 'center'}
176             ,{field: 'phonenumber', title: '手机号', minWidth: 150,align: 'center'}
177             ,{field: 'avatar', title: '头像', minWidth: 80,align: 'center'}
178             ,{field: 'bg_email',title:'邮箱', mindWidth: 80,align: 'center'}
179             ,{field: 'bg_branch',title: '部门',minWidth:80,align: 'center'}
180             ,{field: 'bg_content',title: '备注',minWidth: 80,align: 'center'}
181             ,{field: 'right',title: '操作',toolbar: '#bardemo', minWidth: 80,align: 'center'}
182             ]];
183         table.render({
184             elem: '#userTable'
185             , url: 'getUserInfo'
186             , where: {
187 
188             }
189             , response: {
190                 statusName: 'status' //数据状态的字段名称，默认：code
191                 , statusCode: 200 //成功的状态码，默认：0
192                 , msgName: 'msg' //状态信息的字段名称，默认：msg
193             }
194             , request: {
195                 pageName: "page"
196                 , limitName: "limit"
197             }
198             , skin: 'line' // 表格风格
199             , even: true
200             , page: true // 是否显示分页
201             , limits: [10, 20, 30]
202             , limit: 10 // 每页默认显示的数量
203             , cols: col
204         });
205 
206         // 工具栏事件
207         table.on('tool(user)',function (obj) {
208             var data = obj.data;
209             var tr = obj.tr;
210             var layEvent = obj.event;
211             if (layEvent == 'edit'){
212                 layer.open({
213                     type:1,
214                     area:['600px','520px'],
215                     btn:["确定","取消"],
216                     btnAlign:'c',
217                     content: $("#formdemo").html(),
218                     success : function (index,layero) {
219                         $("input[name='username']").val(data.name);
220                         $("input[name='phoneNumber']").val(data.phonenumber);
221                         $("input[name='avatar']").val(data.avatar);
222                         $("input[name='email']").val(data.bg_email);
223                         $("input[name='role']").val(data.bg_roleName);
224                         $("input[name='note']").val(data.bg_content);
225                     }
226                 })
227             } else if (layEvent == 'del'){
228                 layer.confirm("确定删除该用户吗")
229             }
230         });
231         // function user_manage() {
232         //     layer.msg('加载中', {
233         //         icon: 16
234         //         ,time:0
235         //         ,shade: 0.01
236         //
237         //     });
238         //     $.post("getGoodsBtName", reqJson, function (data) {
239         //         if (reqJson.username != "") {
240         //             reqJson.username = null;
241         //         }
242         //         setLaypage(eval("(" + data + ")").total);
243         //         var rows = eval("(" + data + ")").rows;
244         //         console.dir(rows);
245         //         rows = translate(rows, ceJson, language);
246         //         var col = getTitle();
247         //
248         //         var tb_data = getTableData("admin_h", col, rows);
249         //
250         //         table.render(tb_data);
251         //         layer.closeAll();
252         //     });
253         //
254         // }
255         // $("#search").click(function () {
256         //     reqJson.username = $("#username").val();
257         //     user_manage();
258         // });
259 
260 
261         active = {
262             reload:function () {
263                 //执行重载
264                 table.reload('userTable',{
265                     url: 'getUserInfoByName',
266                     page:{
267                         curr:1 //重新从第一页开始
268                     }
269                     ,where:{
270                         username: $("#username").val() //设定异步数据接口的额外参数，任意设
271                     }
272                 })
273             }
274         };
275         //查询按钮
276         $('#find').on('click',function () {
277             active["reload"] ? active["reload"].call(this) : '';
278         });
279 
280         //重置搜索栏内容
281         $("#reset").on('click',function () {
282             $("#username").val();
283             $("#phoneNumber").val();
284             $("#email").val();
285         });
286     });
287 </script>
288 
289
2.多个条件的查询:
layui
layui框架下的摸索与学习

class="title">用户信息

相关

layui穿梭框内容溢出解决办法

.Net Core3.1 MVC + EF Core+ AutoFac+LayUI+Sqlserver的框架搭建--------极光推送

layui框架各种小结

layui 上传文件限制文件

layui中文离线文档PDF下载

SpringBoot基于layui实现文件上传

layui时间戳转换-util

layui 根据状态判断是否显示操作按钮

基于Layui + .net mvc Excel导入功能

layui switch开关按钮

layui的layer.close(index)无法关闭弹出层一种可能

【layui】layui与JQuery冲突的解决方法Init($)找不到

标签
