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