layui 数据表格下拉框_LayUi数据表格中嵌套下拉框

layui嵌套下拉框实用方法(附效果图)

在做项目时遇到一个问题，在layui 的数据表格table里面如何做一个下拉框呢？效果图如下：

这样的效果想必是最理想的了

思路分析：

我们可以通过layui的表单监听的方式实现效果

form.on('select(stateSelect)',function(){});

接下来我就直接开诚布公，放源码

首先：我们设置一下下拉框的样式，进行美化一下

/* 设置下拉框的高度与表格单元相同 */

td .layui-form-select {

margin-top: -10px;

margin-left: -15px;

margin-right: -15px;

}

其次：我们在表单的状态字段那一栏设置下拉框

, {

field: 'status'

, title: '状态'

, templet: function (d) {

if (d.status == 2) {

return '已完成';

} else {

return '' +

' 待支付' +

' 待服务' +

' 已完成' +

'';

}

, width: 100

}

备注说明：

data-state="' + d.status + '" 这里拼接的是状态的字段

data-value="' + d.id + '" 这里拼接的是这条数据的id字段

返回拼接的是一个下拉框

这里我用的是layui数据表格的方法渲染

table.render({

......

, cols: [[ {},{}....]]

});

这里不会的可以复制layui官网的例子

然后：我们的压轴—form.on();

//状态改变

form.on('select(stateSelect)', function (data) {//修改类型

let id = data.elem.dataset.value; //当前数据的id

let status = data.elem.value; //当前字段变化的值

//修改状态

....这里省略一个ajax请求...

传值：表单变化后的值传递到后台数据库进行实时修改，例如，根据id修改这条数据的状态。

});

最后：我们要刷新表格，并且去掉数据表格对select的隐藏，把select浮现在最外层

table.render({

....

, done: function (res, curr, count) {

var tableElem = this.elem.next('.layui-table-view');

count || tableElem.find('.layui-table-header').css('overflow', 'auto');

layui.each(tableElem.find('select[name="status"]'), function (index, item) {

var elem = $(item);

elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');

});

form.render();//刷新表单

}

});

备注说明：

elem.data('state') 取值对应的 data-state;

至此，你已经学会了如何在layui的table数据表格中插入下拉框了！！！！

layui 数据表格下拉框_LayUi数据表格中嵌套下拉框相关推荐

解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
Excel单元格如何增加下拉选项（类似于web中的select选项框）
☀效果图 1.选择待加[下拉选项]的单元格,依次点击数据 - 数据有效性(小三角▼)- 数据有效性 2.在弹出框中[设置]栏[允许]下拉框中选择"序列" 3.在[来源]输入框中输入 ...
怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
cadence修改板框倒角_Allegro软件中如何对板框进行倒角及倒角不成功解决方法
原标题:Allegro软件中如何对板框进行倒角及倒角不成功解决方法在设计工作中,有些客户会要求我们将方形板框的直角修改为圆弧角或者是钝角,我们将这部分操作称之为倒角. 倒角的具体步骤如下: 首先我们 ...
python显示文字框_在Python 中实现图片加框和加字的方法
第一步:安装opencv-python rpm -ivh opencn-python-2.4.5-3.el7.ppc64le.rpm 第二步:引用cv2 import cv2 第三步:读入图片,必须是 ...
html中对复选框验证,验证HTML中的复选框
为了能够检查多个输入,它们必须是复选框. (他们可以是具有不同名称的单选按钮,但是一旦检查,您将无法取消选中它们.) 所以使用复选框,只有当选中了提交按钮时才使用general sibling sel ...
html获得文本框的值,jQuery中怎么获取文本框的值？
jQuery中怎么获取文本框的值?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuery中获取文本框值的方法下面就结合简单的代码示例,给大家介绍j ...
layui table工具栏点击时间_layui table表格上添加日期控件laydate
方法:标红的地方是关键,经测试不要 data_field:'velappr' 也能用. tatable.render({ id:'idTest' ,elem: '#dict' ,page: true, ...
css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...

layui 数据表格下拉框_LayUi数据表格中嵌套下拉框

layui 数据表格下拉框_LayUi数据表格中嵌套下拉框相关推荐

最新文章

热门文章