首页 > 其他 > 详细

layui table render渲染的问题

时间:2021-05-08 22:35:38      阅读:22      评论:0      收藏:0      [点我收藏+]

 

使用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:‘编号‘, width:120},//对应数据的字段名
                {field:‘bak04‘, title:‘场地类型‘, width:180},
                {field:‘hotelname‘, title:‘场地名称‘},
                {title:‘操作‘, toolbar: ‘#barDemo‘, width: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: “额外参数”}
   })

 

layui table render渲染的问题

原文:https://www.cnblogs.com/GoTing/p/14745983.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!