使用layui框架，在弹出层中使用评分组件，解决显示异常问题

1、效果图：

2、获取评分的value值，从而保存到数据库

 

3、从数据库获取到数据，然后赋值给评分组件进行显示。说明：数据交互都交给 js 来处理

由于这里使用的是弹出层，建议不要将评分组件代码放到jsp页面上，放在弹出层success回调方法里。因为先在弹出层创建完毕时，再执行success回调方法。

如果把评分组件代码放到jsp页面上，会出现评分组件获取不了值的情况。

archive.jsp部分代码：

<div class="layui-form-item ">
            <label class="layui-form-label layui-bg-green layui-center">满意度</label>
            <div class="layui-input-block " id="rate">
                <div id="love"></div>
            </div>
</div>

 

archive-service.js 对应弹出层代码：

（js里面要加入rate模块，如：layui.use('rate',function(){});）

//工具栏操作
    table.on('tool(archiveService)',function(obj){
        switch (obj.event){
            case 'archive_btn':
                let s =layer.open({
                    title:"查看",
                    type:2,
                    content:"views/service_management/archive.jsp",
                    area:['50%','70%'],
                    offset:'t',
                    skin:"layui-layer-molv",
                    btn:['关闭'],

                    //弹出层加载成功后执行的函数
                    success: function(layero, index){
                        let body = layer.getChildFrame("body",index);
                    //评分组件代码
                        let  id = body.find("#love"); //选择元素
                       rate.render({
                            elem: id,
                            length: 5,
                            value: obj.data.satisfaction,//从数据库获取的评分值
                            theme: '#FFB800',
                            text: true,
                            readonly: true,
                            setText: function (value) {
                                var arrs = {
                                    '1': '极差'
                                    , '2': '差'
                                    , '3': '中等'
                                    , '4': '好'
                                    , '5': '非常好'
                                };
                                this.span.text(arrs[value]);
                            }
                        });
                       
                    },
                    yes: function(index, layero){
                        layer.close(index);
                          
                    }
                });

                break;
        }

layui评分组件文档：https://www.layui.com/doc/modules/rate.html