layui-table与layui-rate评分转换成星级的使用

需求：将layui-table中的某一列，例如：评分，从数据库中查找出来之后，进行layui-rate评分转换显示效果，为星星。显示效果如下：

实现代码：

1、layui中引入rate

2、table表格中评分列添加templet自定义模板(目的是rate使用需要在定义好id的div中)，写法有好几种，layui官网有介绍https://www.layui.com/doc/modules/table.html

 , {field: 'avgScore', title: '星级',width: 100,
                  templet: function(d){
                  return '<div id="avgScore'+d.id+'"></div>'}}

3、最后在table加载之后，设置转换

,done:function(res, curr, count){
            var data = res.data;//返回的json中data数据
            for (var item in data) {
                //司机星级
                rate.render({
                    elem: '#avgScore'+data[item].id+''         //绑定元素
                    , length: 5            //星星个数
                    , value: data[item].avgScore             //初始化值
                    , theme: '#f30808'     //颜色
                    , half: true           //支持半颗星
                    , text: false           //显示文本，默认显示 '3.5星'
                    , readonly: true      //只读
                });
      
            }
      }

完毕！

附上rate的完整用法：

<div id="test1"></div>
    <script>
        layui.use('rate', function () {
            var rate = layui.rate;
            var ins1 = rate.render({
                elem: '#test1'         //绑定元素
                , length: 5            //星星个数
                , value: 3             //初始化值
                , theme: '#000099'     //颜色
                , half: true           //支持半颗星
                , text: true           //显示文本，默认显示 '3.5星'
                , readonly: false      //只读
                //自定义文本，点击后文本显示的内容
                , setText: function (value) {
                    if (value < 2) {
                        this.span.text("差")
                    } else if (value <= 4) {
                        this.span.text("一般")
                    } else {
                        this.span.text("好")
                    }
                }
                //选定时调用，评分时发送一个ajax,readonly设为true
                , choose: function (value) {
                    if (value > 4) alert('么么哒')
                }
            });
        });
    </script>

参考资料：

https://fly.layui.com/jie/17390/

http://www.cnblogs.com/wyy1234/p/9455493.html