layui table使用xmselect HTMLCollection length 0 select更改背景颜色

最新推荐文章于 2024-07-24 18:20:33 发布

zcg359670476

最新推荐文章于 2024-07-24 18:20:33 发布

阅读量1.9k

点赞数 1

分类专栏： layui select 文章标签： layui javascript

本文链接：https://blog.csdn.net/zcg359670476/article/details/120031797

版权

layui 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

select

1 篇文章 0 订阅

订阅专栏

HTMLCollection 为0的原因为：，渲染之前打印的这个数组，看到的是渲染后的数据，通俗的讲，就是这个dom结构还没加载完，js就执行了，解决办法就等dom结构加载完成后再去获取这个数组。

layui中 table 使用改变select背景颜色或者使用xmselect解决方法

效果图：

templet:
<script type="text/html" id="controlModel">
// 标题居中 内容居左
    <div id="{{ d.id }}" style="text-align: left"></div>
</script> 

done: function (res, curr, count) {
               // 更改select 背景颜色
                var ele = document.getElementsByClassName('layui-input layui-unselect');
                for (var i = 0; i < ele.length; i++) {
                    ele[i].style.background = '#00BFFF';
                }

                // 列表中添加xmselect 
                var res_data = res.data;
                for (var i = 0; i < res_data.length; i++) {
                    let tempData = res_data[i];
                    var modelId = document.getElementById(tempData.id);
                    let modelData = tempData.work_model_list;
                    let byControlMode = tempData.byControlMode;
                // 动态更改主题颜色
                    var themeColor = themColors.get(byControlMode);
                    xmSelect.render({
                        el: modelId,
                        radio: true,
                        clickClose: true,
                        showIcon: true,
                        theme: {
                            color: themeColor,
                        },
                        style: {
                            width: '120px',
                        },
                        on: function(data){
                            //arr:  当前多选已选中的数据
                            var arr = data.arr;
                            //change, 此次选择变化的数据,数组
                            var change = data.change;
                            //isAdd, 此次操作是新增还是删除
                            var isAdd = data.isAdd;
                            console.log(arr, change, 9999);
                            alert('ID: '+tempData.id+' 变化: '+change[0].name+', 状态: ' + isAdd)
                        },
                        model: {
                            label: {
                                block: {
                                    template: function(item, sels){
                                        return item.name;
                                    },
                                    showIcon: false,
                                },
                            }
                        },
                        data: modelData
                    })
                }
            }
        });