Layui 使用问题 table的重载(reload)和toolbar 渲染问题 ---重载后toolbar中定义的数据或按钮方法失效

如果你在layui的toolbar中定义了按钮方法,你会发现使用table.reload之后,这些方法不能用 或者不执行了。

首先看看你在toolbar中定义的方法是不是写在了 layui.use之中?

如图 ,我的这个查询只有更新页面之后才能使用,table.reload方法执行之后就不能用了

但是如果你单独定义onclick 方法在layui.use之外,如图

这种方式就不会被 toolbar 头部工具所约束,可以正常的使用。

那么如何在toolbar中使用查询按钮,或执行其他方法呢?

首先在<button> class 中设置查询按钮的别名 search_btn,id有没有都不影响

<button type="button" class="layui-btn search_btn" data-type="reload"  id="find">查询</button>

然后在layui.use中进行定义,toorbar()方法,并将toolbar中的方法放在这里面,这样每次reload()都会再调用这个方法,并再render中渲染 

<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        //table 表数据
        table.render({
            //此处为table的ID
            elem: '#expert_message_table'
            ,url:'/ems/expert/getList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增'
            ,title:'专家数据表'
            ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'expert_code', title: '专家编号', sort: true}
                ,{field:'expert_name', title: '专家姓名', sort: true}
                ,{field:'expert_age', title: '专家年龄', sort: true}
                ,{field:'expert_sex',  title: '专家性别'}
                ,{field:'expert_phone', title: '专家电话', sort: true}
                ,{field:'expert_level', title: '专家等级', sort: true, templet:function (item){
                    if(item.expert_level === 0){
                            return "初级专家";
                    }else {
                        return "资深专家";
                    }
                    }}
                ,{field:'expert_major',  title: '专家专业'}
                ,{field:'expert_address',  title: '专家住址', templet:function(item){
                    return item.expert_address.address_name}}
                ,{field:'expert_message', title: '专家描述', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                ,{field:'expert_review_num',title: '评审项目数量', sort: true}
                ,{field:'expert_status', title: '专家状态',templet: function (item) {
                        if (item.expert_status === 0) {
                            return "在职";
                        } else if (item.expert_status === 1) {
                            return "退休";
                        } else if (item.expert_status === 2){
                            return "离职";
                        }}}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,done: function(){
                toolbar();
            }
        });

        function toolbar() {
            //查询
            $(".search_btn").on("click",function (){
                table.reload("expert_message_table",{
                        page:{
                            curr:1
                        }, where: {
                            expert_name:$('#expert_name').val(),
                            expert_phone:$('#expert_phone').val(),
                            expert_code:$('#expert_code').val(),
                        }
                    });
            })

            //批量删除
            $("#delExpertList").click(function () {
                //获取选中状态
                var checkStatus = table.checkStatus('expert_message_table');
                var data = checkStatus.data;
                var expert_id = "";
                if (data.length > 0) {
                    for (var i in data) {
                        expert_id += data[i].expert_id + ",";
                    }
                    console.log(data);
                    layer.confirm('确定删除选中的用户?', {icon: 3, title: '提示信息'}, function (index) {
                        $.post('expert/delAll/' + expert_id, function (data) {
                            location.reload();
                            layer.close(index);
                            layer.msg(data.msg);

                        });
                    })
                } else {
                    layer.msg("请选择需要删除的用户");
                }
            });

        }


        //监听行工具事件
        //此处tool()中 的数据为 lay—filter定义的名称 <table> 删除行
        table.on('tool(table-test)', function(obj){
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                   $.ajax({
                       type:"DELETE",
                       dataType:"json",
                       url:"expert/delExpert/"+data.expert_id,
                       data:{"expert_id":data.expert_id},
                       success:function (data){
                           obj.del();
                           layer.close(index);
                           layer.msg(data.msg);
                       }
                   })
                });
            }
            if(obj.event === "detail"){
                var max=layer.open({
                    type:2,
                    content: "expert/goToDetailExpertPage/"+data.expert_id,   //添加页,后台controller转发到指定页
                    title: ['专家详情'],
                    fixed: false,
                    shadeClose: true,
                    maxmin:true,
                    isOutAnim:false,
                    end: function () {  //刷新页面
                        location.reload();
                    }
                })
                layer.full(max);
            }
        });

    });

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值