转换静态表格title里面的添加的html去掉了,并且样式没有了。

提问 已结 14 694
稳稳的幸福793
悬赏:200飞吻
版本:layuiAdmin 最新 浏览器:google
html代码


js代码

table.init('demo', {limit: 1000});
效果图
th上只留下了文字,其它样式消失了
按钮样式消失了,icon没有显示出来


为啥要实现此功能?下图是pc下的效果图和手机上的效果图

手机效果

为啥不适用ajax请求数据来完成?
1:没有使用前后分离模式。
2:使用的go 的 iris或者php 的 laravel 框架,每个请求都要定义一个路由,路由劲量减少。
回帖
  • 红烧鱼i
    2019-8-16
    https://share.weiyun.com/5cF3qTN
    这是table的修改版,版本是2.4.5的
    表头加了一个参数,param,这个作为自定义表头,很简单
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../layui-v2.4.5/css/layui.css">
    </head>
    <body>
    <table lay-filter="parse-table-demo">
    <thead>
    <tr>
    <th lay-data="{field:'aa', width:200}">昵称</th>
    <th lay-data="{field:'bb', width:150}">加入时间</th>
    <th lay-data="{field:'cc', minWidth: 180,templet: '#titleTpl', param:'demo_par'}">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>贤心1</td>
    <td>2016-11-28</td>
    <td>人生就像是一场修行 A</td>
    </tr>
    <tr>
    <td>贤心2</td>
    <td>2016-11-29</td>
    <td>人生就像是一场修行 B</td>
    </tr>
    <tr>
    <td>贤心3</td>
    <td>2016-11-30</td>
    <td>这些无用,被覆盖掉 C</td>
    </tr>
    </tbody>
    </table>

    <script type="text/html" id="titleTpl">
    <button class="layui-btn layui-btn-sm" val1="{{d.aa}}" val2="{{d.bb}}" index="{{d.LAY_INDEX}}">+添加</button>
    </script>
    <script type="text/html" id="demo_par">
    <button class="layui-btn layui-btn-sm" val1="{{d.aa}}" val2="{{d.bb}}" index="{{d.LAY_INDEX}}" >+测试</button>
    </script>
    </body>
    <script type="text/javascript" src="../layui-v2.4.5/layui.js"></script>
    <script type="text/javascript">
    initTable()
    function initTable(){
    layui.use('table', function(){
    var table = layui.table;
    var $ = layui.$,
    active = {
    parseTable: function(){
    table.init('parse-table-demo', { //转化静态表格
    height: 'full-180',
    loading:true,
    text:{
    none: '暂无数据'
    }
    });
    }
    };
    active.parseTable();
    });
    };
    </script>
    </html>
    1 回复
  • th里面放空,把内容设置到lay-data的title中
    1 回复
  • @稳稳的幸福793 嗯,写在里面确实是比较麻烦,个人建议你还是用render的方式好了,记得init的话实际也可以把cols的配置放到table.init中去做,不绑定到th上,记得也是可以的,不过不是很确定,因为init的方式基本没怎么用过
    1 回复
  • 红烧鱼i
    2019-8-16
    @稳稳的幸福793 明白了,我试一下
    1 回复
  • 红烧鱼i
    2019-8-16

    这是源码,这样写的,我试着改一下方法
    1 回复
  • @岁月小偷 谢谢 你 感谢你的回复,按照你的方式 我下了下面的代码, 可行是可行 但是
    <th lay-data='{field:"Manage", width:150,title:"管理{% if user_right.add %}<button type=button layadmin-event=open_url class=layui-btn layui-btn-normal layui-btn-xs data-url={{BASEURI}}admin/sys/role_op><i class=layui-icon></i>添加</button>{% endif %}"}'></th>
    这个是我th的内容 html单引号和双引号嵌套问题,我使用转义符号,单直接不显示了,如果不使用引号 class多个的时候 只解析前面的class样式,
    从浏览器中复制的代码为:
    <button type="button" layadmin-event="open_url" class="layui-btn" layui-btn-normal="" layui-btn-xs="" data-url="http://127.0.0.1:96/admin/sys/role_op"><i class="layui-icon"></i>添加</button>
    0 回复
  • 红烧鱼i
    2019-8-16
    这么简单的问题,用模板写不是更简单吗,你这种写法也有问题,th里面不要写东西,转化静态表格,转化的是tbody里面的内容,th只是标题,只取text,所以layui的表格标题不支持自定义
    0 回复
  • @红烧鱼i 大神,能贴上代码吗?表格的静态转换
    0 回复
  • 红烧鱼i
    2019-8-16
    0 回复
  • 红烧鱼i
    2019-8-16
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../layui-v2.4.5/css/layui.css">
    </head>
    <body>
    <table lay-filter="parse-table-demo">
    <thead>
    <tr>
    <th lay-data="{field:'aa', width:200}">昵称</th>
    <th lay-data="{field:'bb', width:150}">加入时间</th>
    <th lay-data="{field:'cc', minWidth: 180,templet: '#titleTpl'}">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>贤心1</td>
    <td>2016-11-28</td>
    <td>人生就像是一场修行 A</td>
    </tr>
    <tr>
    <td>贤心2</td>
    <td>2016-11-29</td>
    <td>人生就像是一场修行 B</td>
    </tr>
    <tr>
    <td>贤心3</td>
    <td>2016-11-30</td>
    <td>这些无用,被覆盖掉 C</td>
    </tr>
    </tbody>
    </table>
    <script type="text/html" id="titleTpl">
    <button class="layui-btn layui-btn-sm" val1="{{d.aa}}" val2="{{d.bb}}" index="{{d.LAY_INDEX}}">+添加</button>
    </script>
    </body>
    <script type="text/javascript" src="../layui-v2.4.5/layui.all.js"></script>
    <script type="text/javascript">
    initTable()
    function initTable(){
    layui.use('table', function(){
    var table = layui.table;
    var $ = layui.$,
    active = {
    parseTable: function(){
    table.init('parse-table-demo', { //转化静态表格
    height: 'full-180',
    loading:true,
    text:{
    none: '暂无数据'
    }
    });
    }
    };
    active.parseTable();
    });
    };
    </script>
    </html>
    0 回复