layui table展示页表格中加入下拉选择框

2024-06-13前端开发
226

layui 展示页表格中加入下拉选择框,最终实现效果图:


1.在初始化表格的列cols中添加:

{
                field: 'paid',
                sort: true,
                title: '付款状态',
                align: "center",
                templet:function (d) {
                    return '<select name="paid" class="sel_xlk" lay-filter="stateSelect"  lay-verify="required" data-state="' + d.paid + '" data-value="' + d.id + '" >' +
                        '        <option value="0">未付款</option>' +
                        '         <option value="1">已付款</option>' +
                        '    </select>';
                },
            },
注意:元素选择器lay-filter=“stateSelect”。
2.选择完下拉框把值带到列表中并提交到后台,
form.on('select(stateSelect)', function (data) {//修改类型
        let id = data.elem.dataset.value; //当前数据的id
        let paid = data.elem.value; //当前字段变化的值
        // 传值:表单变化后的值传递到后台数据库进行实时修改,例如,根据id修改这条数据的状态。
        $.ajax({
            type: 'post',
            url: Feng.ctxPath+ '/******/*****', // ajax请求路径
            data: {
                id: id,
                paid: paid
            },
            success: function(data){
                layer.msg('修改成功');
                //执行重载
                //table.reload('bizInvoiceTable');
                //window.location.href = Feng.ctxPath + '/bizInvoice'
            }
        });
    });
3.我们要刷新表格,并且去掉数据表格对select的隐藏,把select浮现在最外层 在table.render中添加
done: function (res, curr, count) {
            //设置下拉框样式在表格之上 不会遮挡下拉框
            $(".layui-table-body").css('overflow','visible');
            $(".layui-table-box").css('overflow','visible');
            $(".layui-table-view").css('overflow','visible');

            var tableElem = this.elem.next('.layui-table-view');
            count || tableElem.find('.layui-table-header').css('overflow', 'auto');
            layui.each(tableElem.find('select[name="paid"]'), function (index, item) {
                var elem = $(item);
                elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
            });
            form.render();//刷新表单

        }
4.设置一下下拉框的样式,进行美化一下
/* 设置下拉框的高度与表格单元相同 */
   td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }

到此就实现layui单元格下拉选择实现
The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161

织梦dedecms搜索结果按点击排序的简单修改
DEDE默认的搜索功能,所得到的结果是按照文章加入的先后排序的 很多时候,我们希望得到的结果按点击数排序,点击多的排前面。 那么就修改这一个地方: include/inc_arcsaerch_view.php的大概第48行,将: $this-OrderBy = 'wmd_full_search.aid desc'; 改为...
2025-06-06 前端开发
202

xm-select多选下拉框实现拼音、首字母搜索匹配
最近项目中遇到需要下拉框能实现根据首字母进行模糊搜索,下拉框使用的是xm-select,而xm-select支持中文的搜索,后端接口也仅支持中文的。因此需要借助其他插件来完成功能。最终实现的效果如下: 涉及到的基础文件:引用 pinyin.js 和 initials.js。再引用 l...
2025-06-06 前端开发
89