layui怎么使用templet向数据表格里加星星

提问 已结
15 155
恶势力
恶势力 7天前
悬赏:20飞吻
回帖
  • @恶势力 嗯嗯,这个你应该刚接触不久吧layui,首先laytpl如果是要写js代码的不应该直接在像你这样写

    这一块是js代码应该放在一个{{# }}里面,但是即使放在这里也是没有什么用的,改成下面的

    然后出来是

    这就到了原来我说的跟另外一个帖子一样的问题了即使你这样子render的话只有最后一个能用,其他的都是不行的,显示也是不对的,即使能显示也都是最后一个的值,不是每一行显示它自己的星星。再做改造

    最后效果
    0 回复
  • 实际templet添加星星这个在templet的时候很简单的就是放置一个显示星星的容器,关键是渲染,这个要在done回调里面处理,具体怎么渲染table中的星星,我觉得可以看看我刚才回复另外一个帖子里面的回复,说的比较详细了, http://fly.layui.com/jie/31575/
    0 回复
  • @岁月小偷 我的问题不是渲染是插入,templet它好像不支持插入script代码
    所以添加容器之后没有办法引入script代码 那星星根本就不会显示
    0 回复
  • @岁月小偷 里面的星星是根据后台传的数据来渲染个数,是固定的,所以只考虑如何让其在数据表格中显示出来
    0 回复
  • @恶势力 你放在templet里面的script的代码不是渲染是啥?
    0 回复
  • @岁月小偷 它变成了内容
    0 回复
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <table class="layui-hide" id="test"></table>


    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

    <script type="text/html" id="titleTpl">
    <!-- 这里同样支持 laytpl 语法,如: -->

    <div class="star"></div>
    layui.use(['rate'], function () {
    var rate = layui.rate;
    //基础效果
    rate.render({
    elem: '.star'
    , value: {{d.oordinate_the_difficulty}}
    , readonly: true
    });
    })

    </script>

    <script>

    layui.use('table', function(){
    var table = layui.table;

    table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    ,cols: [[
    {field:'id', width:80, title: 'ID', sort: true,templet:'#titleTpl'}
    ,{field:'username', width:80, title: '用户名'}
    ,{field:'sex', width:80, title: '性别', sort: true}
    ,{field:'city', width:80, title: '城市'}
    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    ,{field:'experience', title: '积分', sort: true}
    ,{field:'score', title: '评分', sort: true}
    ,{field:'classify', title: '职业'}
    ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
    });
    });
    </script>

    </body>
    </html>
    0 回复
  • 变成了这样,跟我预想的不太一样
    我希望的是id栏里出现星星
    0 回复
  • @岁月小偷 谢谢了,明天试试
    0 回复
  • @岁月小偷 我按照您的输入代码结果还是报错了,下面是我出错的整个代码,还望有空的话帮忙看下

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <table class="layui-hide" id="test"></table>


    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

    <script type="text/html" id="titleTpl">
    <!-- 这里同样支持 laytpl 语法,如: -->
    <div class="star"></div>
    {{# layui.use(['rate'], function () {
    var rate = layui.rate;
    //基础效果
    rate.render({
    elem: '.star'
    , value: d.oordinate_the_difficulty
    , readonly: true
    });
    })}}
    </script>

    <script>

    layui.use('table', function(){
    var table = layui.table;

    table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    ,cols: [[
    {field:'id', width:80, title: 'ID', sort: true, templet:'#titleTpl'}
    ,{field:'username', width:80, title: '用户名'}
    ,{field:'sex', width:80, title: '性别', sort: true}
    ,{field:'city', width:80, title: '城市'}
    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    ,{field:'experience', title: '积分', sort: true}
    ,{field:'score', title: '评分', sort: true}
    ,{field:'classify', title: '职业'}
    ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
    });
    });
    </script>

    </body>
    </html>
    0 回复

  • 把这个注释去掉,tpl里面尽量不要写注释,经常会出错。
    0 回复
  • @岁月小偷 搞定了谢谢了
    0 回复
  • @恶势力 不客气[微笑]
    0 回复
  • @岁月小偷 但是还会有点击上下排序按钮 星星消失的bug,目前没找到原因,您如果有空可以帮忙看看
    0 回复
  • @恶势力 上下排序这个有一个问题就是点击排序他会默认对数据进行sort然后重新渲染出表格的内容,但是!!渲染完成之后不会走done回调,这个是否应该归为bug这个看个人的理解了,只要问题在这里,处理的方式有两种,修改源码让他sort之后会走done,第二是监听table的sort然后执行table.reload
    0 回复