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: “额外参数”}
       })
  • 相关阅读:
    Win8系统 Python安装
    一些安卓开源框架整理
    Android 媒体键监听以及模拟媒体键盘的实现 demo
    android View 自动 GONE 问题
    Android 定时器TimerTask 简单使用
    关于Android studio 相对 eclipse 优点
    Java序列化与反序列化
    android shape的使用 边框
    Android Studio 修改 包名 package name
    Android WebView Long Press长按保存图片到手机
  • 原文地址:https://www.cnblogs.com/GoTing/p/14745983.html
Copyright © 2011-2022 走看看