189 8069 5689

layui的table工具栏按钮失效怎么解决?

1. Html页面


    
        
            
                    
                        
                        
                            
                        
                    搜索                     
                     
                                                  新增用户             删除用户              

2. 对应的js

layui.use(['form','layer','table'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        table = layui.table;

    // 加载提示
    var loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
    // 初始化表格及数据
    var tableIns = table.render({
        elem: '#tableList',
        url : 'sysUser/list',
        where :{
            phone : $("#phone").val()
        },
        cellMinWidth : 95,
        toolbar: "#toolbarDemo", //让工具栏左侧显示默认的内置模板
        defaultToolbar: ['filter'], // 工具栏右侧的图标按钮['filter', 'print', 'exports']
        even: true, // 开启斑马线效果
        page : true,
//        height : "full-125",//放置在页面底部
        limits : myLimits,
        limit : myLimit,
        id : "tableListTable",
        cols : [[
            {field: 'userId', title: 'ID', width:100, align:"center"},
            {field: 'userName', title: '用户名', minWidth:150, align:"center"},
            {field: 'state', title: '状态', width:80, align:"center", templet: stateFormat},
            {field: 'sex', title: '性别', width:80, align:"center", templet: sexFormat},
            {field: 'remark', title: '备注', align:"center"}
        ]],
        done: function(res, curr, count){
            // 关闭提示层
            layer.close(loadingMsg);
            // 绑定表格工具栏按钮的触发事件
            bindTableToolbarFunction();
        }
    });

    // ==================== 定义常规函数 ====================
    // 刷新表格数据
    function reloadTable(){
        // 加载提示
        loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
        // 重新加载数据
        table.reload("tableListTable",{
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: {
                phone : $("#phone").val()
            },
            done: function(res, curr, count){
                layer.close(loadingMsg);
                bindTableToolbarFunction()
            }
        });
    }

    // 搜索【此功能需要后台配合,所以暂时没有动态效果演示】
    $(".search_btn").on("click",function(){
        // 刷新表格
        reloadTable();
    });

    // 格式化显示用户状态信息
    function stateFormat(d){
        var str;
        if (d.state == 0) {
            str = '禁用';
        } else if(d.state == 1) {
            str = '正常';
        } else {
            str = '锁定';
        }
        return str;
    }

    // 格式化显示sex信息
    function sexFormat(d){
        var str;
        if (d.sex == 0) {
            str = '女';
        } else if(d.sex == 1) {
            str = '男';
        } else {
            str = '未知';
        }
        return str;
    }

    // ==================== 定义事件处理 ====================
    // 绑定事件集合处理(表格加载完毕和表格刷新的时候调用)
    function bindTableToolbarFunction() {
        // 绑定新增用户事件
        $("#add").on("click", function() {
            layer.alert("新增用户被调用了", {icon: 6});
        });

        // 绑定删除用户事件
        $("#del").on("click", function() {
            layer.alert("删除用户被调用了", {icon: 6});
        });
    }
})

网站名称:layui的table工具栏按钮失效怎么解决?
文章地址:http://cdxtjz.cn/article/jdhpsg.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。