ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
全选异步,一般都是用于列表的批量操作,如批量删除,批量置顶,批量审核等。那如何使用呢? #### 引入ajax模块 如果你自定义一个新的js页面需要使用ajax模块,则需要先引入,如果用模板原有的,此步可跳过 ~~~javascript layui.define(['jquery', 'layer', 'ajax'], function(exports) { jqMain = function() {}; var main = new jqMain(); main.init(); exports('main', {}); }); ~~~ #### 配置模板,这个文件一般在tpl目录,下面代码是tpl/article.html的 ~~~html <table id="example" class="layui-table lay-even"> <thead> <tr> <th width="30"><input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check" lay-skin="primary"></th> <th width="60">序号</th> <th>标题</th> <th>连接</th> <th width="70">排序</th> <th width="80">审核</th> <th width="152">操作</th> </tr> </thead> <tbody> {{# layui.each(d.list, function(index, item){ }} <tr> <td><input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"></td> <td>{{ item.id}}</td> <td>{{ item.title}}</td> <td>{{ item.url}}</td> <td><input type="text" class="layui-input ajax-blur" name="order" value="{{ item.id}}" data-params='{"url":"/php/test.php","data":"id=1&name=paco","loading":"false"}'> </td> <td><input type="checkbox" name="switch" lay-skin="switch" lay-text="已审|未审" {{#if (item.switch){ }}checked="checked" {{# } }} lay-filter="ajax" data-params='{"url":"/php/test.php","confirm":"true","data":"id={{ item.id}}&name=paco","complete":"test"}'> </td> <td> <button class="layui-btn layui-btn-mini modal-iframe" data-params='{"content": "article-add.html", "title": "{{item.title}}","full":"true"}'> <i class="iconfont">&#xe653;</i>编辑 </button> <button class="layui-btn layui-btn-mini layui-btn-danger ajax" data-params='{"url": "/php/test.php","confirm":"true","data":"id=1&name=ni"}'> <i class="iconfont">&#xe626;</i>删除 </button></td> </td> </tr> {{# }); }} </tbody> </table> ~~~ 这里需要注意两个地方: #### 1、全选按钮加上全选事件 ~~~html <input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check" lay-skin="primary"> ~~~ **lay-filter:**必须是check,不要问为什么是check,因为模板里封装就是用这个名称 **data-name:**这里的值必须是列表中每一个复选框的name值,如这里填的是checkbox,那么列表复选框的代码是 ~~~html <input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"> ~~~ 全选事件是根据data-name这个值来查找列表中的复选框来实现选中的 #### 2、给删除按钮添加异步删除事件 这里按钮需要三个参数:ajax-all,data-name,data-params ~~~html <button class="layui-btn layui-btn-small layui-btn-danger ajax-all" data-name="checkbox" data-params='{"url": "/php/test.php","data":"id=1&name=ni&va=23","confirm":"true"}'> <i class="iconfont">&#xe626;</i> 删除 </button> ~~~ **ajax-all:**此样式是给按钮绑定全选的单击事件 **data-name:**列表复选框的name值,道理与上面全选的一样,根据这个name值找出当前列表选中的复选框 **data-params:**这里有默认的参数,也可以添加自己的参数,用于后台获取,默认参数如表: | 参数 | 默认值 | 说明 | | -------- | ----- | ---------------------------------------- | | method | get | 提交的方法 | | data | | 提交到服务端的数据,格式为id=1&name=jqcool | | dataType | json | 服务器返回数据类型 | | complete | | 服务器返回数据后调用的自定义方法(注意影响的域,建议全局)name=jqcool&complete=test | | url | | 请求的服务端地址 | | loading | true | 是否启用loading图片 | | confirm | false | 是否弹出窗口确认操作(注:switch、select和text不适用) | | title | |当confirm为true时,弹出窗口的标题 | | close | false | 是否关闭回调函数| 比如说我要用post请求,传递参数id=1,name=jqcool,服务端地址为:delall.php,不使用loading动画,弹出确认窗口,代码如下: ~~~html data-params='{"url": "delall.php","data":"id=1&name=jqcool","confirm":"true","loading":"false"}' ~~~ 这里要注意参数的单引号与双引号,不能返了,要不会报错。 提交到服务端处理完成后,服务端需返回以下json数据格式 ~~~php $data['status'] = 200; $data['msg'] ="更新成功"; $data['url'] = ""; echo header("content-type:text/html; charset=utf-8"); echo json_encode($data); ~~~ | 参数 | 必填 | 说明 | | ------ | ---- | ----------------------------------- | | msg | 否 | 返回的提示信息 | | url | 否 | 1、空或不定义时不操作 2、地址时跳转到该地址 3、reload时刷新页面 | | status | 是 | 状态,成功时为200,其它均为错误 | 上面返回代码是弹出提示更新成功,页面不做任何操作。 如果想刷新页面呢,把url设成reload即可,代码如下 ~~~php $data['status'] = 200; $data['msg'] ="更新成功"; $data['url'] = "reload"; echo header("content-type:text/html; charset=utf-8"); echo json_encode($data); ~~~ ###### 跳转到地址 ~~~php $data['status'] = 200; $data['msg'] ="更新成功"; $data['url'] = "jqadmin.jqcool.net"; echo header("content-type:text/html; charset=utf-8"); echo json_encode($data); ~~~ ##### 自定义返回方法 如果上面三种情况都不通满足需求,那肿么办呢?定义complete方法, 1、首先在data-params的参数里添加complete参数,如我需要返回时调用test()方法,那代码如下 ~~~html data-params='{"url": "delall.php","data":"id=1&name=jqcool","confirm":"true","loading":"false","complete":"test"}' ~~~ 2、在当前模块定义一个ajax模块的方法便可调用了,代码如下 ~~~javascript var ajax = layui.ajax; ajax.test = function(ret, options, that) { alert("这是ajax回调方法"); } ~~~ 注意这里的test方法名可自定义,但不要覆盖了模块的内容方法。 **ret:**后端返回的json数据 **options:**请求的配置参数 ** that:**当前操作的元素对象