layUI实现列表查询功能

layUI可以直接使用本地的json文件进行列表数据渲染，但，我们会发现，官网ctr+c，ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作，但实际操作无效，百度了一大圈也没找到具体的原因，无奈继续回去看官网，后面总结出只有一点，也是大家比较容易忽略的一点： 官网说在查询时的url必须设置异步接口，so，如果我们不借助后台看起来这个效果好像是单靠前端是出不来，但，为了本地演示，这里写了一个很low的方法，单靠show()，hide()方法来实现查询效果（效果演示可以单不建议实际开发中使用该方法）

以下代码粘贴复制便可直接使用：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>   
 4     <meta charset="UTF-8">
 5     <title>更正地址</title>
 6     <style>
 7     </style>
 8     <link href="layui/css/layui.css" rel="stylesheet" />
 9 </head>
10 <body>
11 
12     <div class="demoTable">
13         搜索ID：
14         <div class="layui-inline">
15             <input class="layui-input" name="id" id="demoReload" autocomplete="off">
16         </div>
17         <button class="layui-btn" data-type="reload">搜索</button>
18     </div>
19 
20     <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
21 
22     <script src="layui/layui.js" charset="utf-8"></script>
23     <script>
24         layui.use('table', function () {
25             var table = layui.table;
26             //方法级渲染
27             var tabins = table.render({
28                 elem: '#LAY_table_user'
29                 , url: 'demo/table/user.json'                 
30                 , cols: [[
31                     { checkbox: true, fixed: true }
32                     , { field: 'id', title: 'ID', width: 80, sort: true, fixed: true }
33                     , { field: 'username', title: '用户名', width: 80 }
34                     , { field: 'sex', title: '性别', width: 80, sort: true }
35                     , { field: 'city', title: '城市', width: 80 }
36                     , { field: 'sign', title: '签名' }
37                     , { field: 'experience', title: '积分', sort: true, width: 80 }
38                     , { field: 'score', title: '评分', sort: true, width: 80 }
39                     , { field: 'classify', title: '职业', width: 80 }
40                     , { field: 'wealth', title: '财富', sort: true, width: 135 }
41                 ]]
42                 , id: 'testReload'
43                 , page: true
44                 , height: 315
45                 , done: function (res) {
46                 }
47             });
48 
49             var $ = layui.$, active = {
50                 reload: function () {
51                     var demoReload = $('#demoReload');
52 
53                     //执行重载
54                     table.reload('testReload', {
55                         page: {
56                             curr: 1 //重新从第 1 页开始
57                         }
58                         , where: {
59                             key: {
60                                 id: demoReload.val()
61                             }
62                         }
63                     });
64                 }
65             };
66             $('.demoTable .layui-btn').on('click', function () {
67                 search = $('#demoReload').val();
68                 $('.layui-table-fixed tbody tr').each(function (i) {
69                     var id = $(this).children('td').eq(1).children('div').html();
70                     if (id.indexOf(search) >= 0) {
71                         $(this).show()
72                         $('.layui-table-main tbody tr').eq(i).show()
73                     } else {
74                         $('.layui-table-main tbody tr').eq(i).hide()
75                         $(this).hide();
76                     }
77                 });
78             });
79 
80         });
81     </script>
82 
83 </body>
84 </html>

 

posted @ 2021-03-27 18:59  每天进步多一点  阅读(1719)  评论(0)  编辑  收藏  举报