layui 和JS的多种按钮绑定

win

第一种ID绑定
克服layui重载和搜索后，工具栏失效问题。

<script type="text/html" id="dudus">
    <a class="batchDel layui-btn huoqus layui-btn-sm layui-btn-danger" lay-submit data-type="getCheckData" id="huoqus">批量删除</a>
    <a class="layui-btn tianjias layui-btn-sm" id="tianjias">新建联系人</a>
    <a class="layui-btn fenzu layui-btn-sm" id="fenzu">分组移动</a>
    <a class="layui-btn layui-btn-sm" id="chongzai" lay-event="chongzais" href="{:url('myadd/tongxun/index')}">刷新</a>
    <a>点击编辑，自动保存</a>
</script>
<table class="layui-hide" id="test" lay-filter="test" lay-data="{id:'test'}"></table>
以新建联系人为例id="tianjias"

下面是JS
这里是table.render({
    elem: '#test'      //指定原始表格元素选择器（推荐id选择器）
    ,id: 'test'
    ,toolbar:'#dudus'........................
//添加联系人
$(document).on('click','#tianjias',function () {
        layer.open({
            type:1,
            area:['500px','600px'],
            title: '新建联系人',
            content: $("#formss"),
            maxmin: true,
            shade: 0
        });
    });


content: $("#formss"),对应的是下面

<form method="post" name="formss" id="formss" style="display:none" class="layui-form" >
input表单省略...
<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="button" name="urlti" id="ssti" class="layui-btn">添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>

win

第二种写法，不建议layui使用，有可能搜索、重载后，工具栏按钮失效。

$(function () {
        $("#tianjias").on('click',function () {
内容根据自己需求写.....
      });
});

win

第三种跟第二种差不多
$("#tianjias").on('click', function () {
内容根据自己需求写.....

});

win

第四种根据CLASS 绑定，不建议layui使用，有可能搜索、重载后，工具栏按钮失效。

$('.tianjias').on('click', function(){
内容根据自己需求写.....

});

win

第五种是LAYUI自己的lay-event，不知道怎么回事，加多了不好用，郁闷。

<a class="layui-btn tianjias layui-btn-sm" id="tianjias" lay-event="tianjias">新建联系人</a>


        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var jsonData = JSON.stringify(data);
            if (layEvent === 'del') { //删除
                console.log("删除");
                layer.confirm('删除后无法恢复?', {icon: 3, title:'提示'}, function(index){
                    //do something
                    $.ajax({
                        type: "post",
                        url: "{:url('index/user/ssdel')}",//自己的接口
                        data:{id:data.id},
                        dataType: "text",
                        success:function(data) {
                            alert(data);
                            //location.reload();
                            //删除后数据表格重载
                            table.reload('test', {
                                page: {
                                    curr: 1
                                },
                            });
                        }
                    });
                    layer.close(index); //关闭删除提示窗口
                    //window.location.reload();
                });
            }else if(obj.event === 'edit'){            //查看指定字段 neirong
                  内容自己写.....

            }else if(obj.event === 'setSign') {                 //监听单元格td
              内容自己写.....
            }else if(obj.event === 'setSigns') {
               内容自己写.....
            }else  if(obj.event === 'tianjias'){}后面可以追加很多else  if(){....
}
        });

win

第六种写法 是layui自己的，绑定的是lay-filter




<div class="layui-row layui-form">
        <div class="layui-col-sm5">
            <div class="layui-inline">
                <label class="layui-form-label">模糊搜索</label>
                <div class="layui-input-inline">
                    <input type="text" name="keys" class="layui-input" placeholder="请输入主题内容关键字">
                </div>
            </div>
            <button class="layui-btn mgl-20" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
        </div>

    </div>







form.on('submit(search)', function (data) {
    layer.msg(JSON.stringify(data.field));//表格数据序列化
    var formData = data.field;
   // console.debug(formData);//测试用
    var keys = formData.keys;
    //数据表格重载
    table.reload('test', {
        page: {
            curr: 1
        },
        where:{
            keys:keys
        },
        url:"url_demo2.php",//此处可空
        method:'post'
    });
    return false;  //false：阻止表单跳转  true：表单跳转
});