zoukankan      html  css  js  c++  java
  • layui table render渲染的问题

    使用layui的table.render 来渲染页面

    js

    table.render({
                elem: '#member_data',//利用类或者id选择器找到元素
                url:'/inf/venue/search/get',//接口地址
                method: 'post',
                id: 'table',//为重载等其他操作找到初始化的table控件
                where: {searchValue: input.val()},//额外参数
                contentType: 'application/x-www-form-urlencoded',
                cols: [[
                    {type: 'numbers', title: '序号',minWidth: 50},//numbers 是前端自生成的递增的序号
                    {field:'hotelcode', title:'编号', 120},//对应数据的字段名
                    {field:'bak04', title:'场地类型', 180},
                    {field:'hotelname', title:'场地名称'},
                    {title:'操作', toolbar: '#barDemo', 180}
                ]],
                page: true//开启分页
            });
    

     html

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <table class="layui-hide" id="member_data" lay-filter="member_data"></table>

      监听修改和删除

    table.on('tool(member_data)', function(obj){ //注:tool 是工具条事件名,member_data是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象
                console.log(obj);
        
                if(layEvent === 'del'){ //删除
                    $('.member_del_box').show()
                } else if(layEvent === 'edit'){ //编辑 和模板中 lay-event="edit"的值相同
                    //do something
                    editAddAlertInit();
                    editSute(obj)
                    edit=true;
    
                } else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi,头部工具栏扩展的右侧图标。');
                }
            });
    

      重载

       table.reload('table', {//和render设置的id值一致
             where: {searchValue: “额外参数”}
       })
  • 相关阅读:
    css hack
    纯DIV+CSS制作的三级鼠标经过弹出下拉导航菜单源码
    题解 Luogu P3863 序列
    破解SA的密码的方法
    转 三种方法实现实时切换CSS样式
    SQL Server 性能优化工具(1)
    Sql server中时间查询的一个比较快的语句
    转 CodeForFun编写自动登录Email的程序
    ISAPI_rewrite中文手册
    ASP.NET中实现二级或多级域名(修改UrlRewrite)
  • 原文地址:https://www.cnblogs.com/GoTing/p/14745983.html
Copyright © 2011-2022 走看看