Layui在table中使用select,这个要怎么操作呢?Layui在table中使用select,这个要怎么操作呢? 1、穿梭框 Layui从2.5.0版本增加了穿梭框,但项目要求左右两边均是表格,无奈只好使用第三方的穿梭框。 2、左右两边的表列数显示不一样 在原代码的基础上修改,使之支持两表的列定义。 3、未选择行
1、穿梭框
Layui从2.5.0版本增加了穿梭框,但项目要求左右两边均是表格,无奈只好使用第三方的穿梭框。
2、左右两边的表列数显示不一样
在原代码的基础上修改,使之支持两表的列定义。
3、未选择行,两表中间的按钮依然可以点击
由于原按钮显示状态是完全正确的,只是无选中的行时按钮未禁用,所以只需要在相应的按钮上用removeAttr和attr移除禁用属性和添加禁用属性。
4、右表某一列需要显示下拉框
对应列使用模板实现。
5、下拉框中的数据是从服务端动态获取的
模板中使用laytpl即可实现。
6、下拉框只能显示在td中,无法完整显示
增加样式如下:
.layui-table-cell{
overflow: visible;
}
.layui-layer-tips{
display: none
}
/* 设置下拉框的高度与表格单元相同 */
td .layui-form-select{
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
7、模板代码中给select标签增加data-属性,用于保存对象的id值。下拉框选择时会触发以下代码:
form.on('select(xxx)',function(data){
// 通过data.elem.dataset可以得到保存的对象id
// data.elem.value可以得到下拉框选择的文本
}
沃梦达教程
本文标题为:Layui在table中使用select下拉框


基础教程推荐
猜你喜欢
- 创建Vue3.0需要安装哪些脚手架 2025-01-16
- Bootstrap学习笔记之css组件(3) 2024-01-22
- 纯css实现漂亮又健壮的tooltip的方法 2024-01-23
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- Django操作cookie的实现 2024-04-15
- html5视频如何嵌入到网页(视频代码) 2025-01-22
- JSONObject与JSONArray使用方法解析 2024-02-07
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件 2023-10-29
- Loaders.css免费开源加载动画框架介绍 2025-01-23
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08