LayUi- 动态表格table中下拉框Select的设置和监听及更新

最新推荐文章于 2024-03-20 14:09:51 发布
最新推荐文章于 2024-03-20 14:09:51 发布
阅读量4.4k 收藏 13
点赞数 1
分类专栏： java 文章标签： jquery layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syyYoung/article/details/119826218
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="/adminlte/layui/css/layui.css" media="all" />
	<style>
		.layui-table-cell {
			overflow: visible;
		}

		.layui-table-box {
			overflow: visible;
		}

		.layui-table-body {
			overflow: visible;
		}
		/* 设置下拉框的高度与表格单元相同 */

		td .layui-form-select {
			margin-top: -10px;
			margin-left: -15px;
			margin-right: -15px;
		}
	</style>
</head>

<body class="childrenBody">
<div style="padding:15px;">
	<form class="layui-form" id="fromId" action="#">
			<div id="selectTool" style="display: none">
			<select  name="selectDemo" lay-filter="selectDemo" lay-search  >
				<option value="">请选择地区</option>
			</select>
			</div>
		<div id="selectTool1" style="display: none">
			<select name="selectDemo1" lay-filter="selectDemo1" lay-search >
				<option value="">请选择供应商</option>

			</select>
		</div>
		<div id="selectTool2" style="display: none">
			<select name="selectDemo2" lay-filter="selectDemo2" lay-search>
				<option value="">请选择物料类别</option>
			</select>
		</div>
		<div id="selectTool3" style="display: none">
			<select name="selectDemo3" lay-filter="selectDemo3" lay-search>
				<option value="">请选择物料名称</option>

			</select>
		</div>
		<div id="selectTool4" style="display: none">
			<select name="selectDemo4" lay-filter="selectDemo4" lay-search>
				<option value="">请选择物料规格</option>
			</select>
		</div>
		<div id="selectTool5" style="display: none">
			<select name="selectDemo5" lay-filter="selectDemo5" lay-search>
				<option value="">请选择出库类别</option>
			</select>
		</div>
		<script type="text/html" id="toolbarDemo">
			<div align="left" class="layui-btn-container">
				<!--<button id="addTable" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加行</button>-->
			</div>
		</script>
		<script type="text/html" id="bar">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<table id="demo" lay-filter="tableFilter"></table>
		<div class="layui-form-item" style="margin-top: 30px;text-align: center;">
			<button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
			<!--<a href="" class="layui-btn">返回</a>-->
		</div>
	</form>
</div>
<script type="text/javascript" src="/adminlte/layui/layui.js"></script>
<script type="text/javascript" src="/adminlte/layui/jquery-3.2.1.min.js"></script>
<script>
	layui.use(['laydate', 'table', 'form', 'jquery','layer'], function() {
		var table = layui.table,
				form = layui.form,
				laydate = layui.laydate,
				layer=layui.layer,
				$ = layui.jquery;
		form.on('select(selectDemo)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
            // console.log(data)

			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.local = data.value;
					//value.local = elem.find("td[data-field='local']").find("[name='selectDemo'] option:selected").text();
				}
			});
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/" ,//url
                data:{local:data.value},
                success: function (result) {
                    if (result.success>0) {
                        elem.find("td[data-field='supplierName']").find("[name='selectDemo1']").empty();
                        var op="";
                        var bp="请选择供应商名称";
                        elem.find("td[data-field='supplierName']").find("[name='selectDemo1']").append("<option value="+op+">"+bp+"</option>");
                        var list =result.date;
                        $.each(list,function (i,val) {
                            elem.find("td[data-field='supplierName']").find("[name='selectDemo1']").append("<option value="+val+">"+val+"</option>");
                        });
                        form.render('select')
                    }else{
                        /* alert("供应商信息错误");*/
                    }
                }/*,
            error : function() {
                alert("异常！");
            }*/
            });
		});
		form.on('select(selectDemo1)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.supplierName = data.value;
				}
			});

            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "" ,//url
                data:{factory:data.value},
                success: function (result) {
                    if (result.success>0) {
                        elem.find("td[data-field='goodsType']").find("[name='selectDemo2']").empty();
                        var op="";
                        var bp="请选择物料类别";
                        elem.find("td[data-field='goodsType']").find("[name='selectDemo2']").append("<option value="+op+">"+bp+"</option>");
                        var list =result.date;
                        $.each(list,function (i,val) {
                            var a =val.id;
                            var b =val.materialtype;
                            elem.find("td[data-field='goodsType']").find("[name='selectDemo2']").append("<option value="+a+">"+b+"</option>");
                        });
                        form.render('select');
                    }else{
                        /*alert("类别信息错误");*/
                    }
                }/*,
            error : function() {
                alert("异常！");
            }*/
            });

		});
		form.on('select(selectDemo2)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					//value.goodsType = data.value;
					value.goodsType = elem.find("td[data-field='goodsType']").find("[name='selectDemo2'] option:selected").text();
				}
			});
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/" ,//url
                data:{pid:data.value},
                success: function (result) {
                    if (result.success>0) {
                        elem.find("td[data-field='goodsName']").find("[name='selectDemo3']").empty();
                        var op="";
                        var bp="请选择物料名称";
                        elem.find("td[data-field='goodsName']").find("[name='selectDemo3']").append("<option value="+op+">"+bp+"</option>");
                        var list =result.date;
                        $.each(list,function (i,val) {
                            var a =val.id;
                            var b =val.materialName
                            elem.find("td[data-field='goodsName']").find("[name='selectDemo3']").append("<option value="+a+">"+b+"</option>");
                        });
                        form.render('select');
                    }else{
                        /*alert("名称信息错误");*/
                    }
                }/*,
            error : function() {
                alert("异常！");
            }*/
            });
		});
		form.on('select(selectDemo3)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					//value.goodsName = data.value;
					value.goodsName = elem.find("td[data-field='goodsName']").find("[name='selectDemo3'] option:selected").text();
				}
			});
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/" ,//url
                data:{pid:data.value},
                success: function (result) {
                    if (result.success>0) {
                        elem.find("td[data-field='specifications']").find("[name='selectDemo4']").empty();
                        var op="";
                        var bp="请选择物料规格";
                        elem.find("td[data-field='specifications']").find("[name='selectDemo4']").append("<option value="+op+">"+bp+"</option>");
                        var list =result.date;
                        $.each(list,function (i,val) {
                            var a =val.id;
                            var b =val.materialSpecification;
                            elem.find("td[data-field='specifications']").find("[name='selectDemo4']").append("<option value="+b+">"+b+"</option>");
                        });
                        form.render();
                    }else{
                        /* alert("规格信息错误");*/
                    }
                }/*,
            error : function() {
                alert("异常！");
            }*/
            });
		});
		form.on('select(selectDemo4)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.specifications = data.value;
				}
			});
		});
		form.on('select(selectDemo5)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.outStockType = data.value;
				}
			});
		});

		//第一个实例 加载表格
		var tableIns = table.render({
			elem: '#demo',
			/*toolbar: '#toolbarDemo',*/
		/*	defaultToolbar: ['filter', 'print', 'exports'],*/
			limit: 150,
			cols: [
				[ //表头
					{
						field: 'local',
						title: '所在地区',
						templet: '#selectTool'
					}, {
					field: 'supplierName',
					title: '供应商名称',
					templet: '#selectTool1'
				}, {
					field: 'goodsType',
					title: '物料类别',
					templet: '#selectTool2'
				}, {
					field: 'goodsName',
					title: '物料名称',
					templet: '#selectTool3'
				}, {
					field: 'specifications',
					title: '物料规格',
					templet: '#selectTool4'
				}, {
					field: 'outStockType',
					title: '出库分类',
					templet: '#selectTool5'
				},{
					field: 'nums',
					title: '出库数量',
					edit: 'text'
				},  {
					field: 'remarks',
					title: '备注',
					edit: 'text'
				}/*, {
					title: '操作',
					align: 'center',
					toolbar: '#bar'
				}*/
				]
			],
			data: [{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			}]
			,
			done: function(res, curr, count) {
				//如果是异步请求数据方式，res即为你接口返回的信息。
				//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
				tabledata = res.data;
				//去掉下拉框的失焦事件 否则在下拉框里输入值 失焦后变回下拉选项里的值了 没有需要的同学忽略掉即可
				$('.layui-form-select').find('input').unbind("blur");
				//这里是表格重载的时候 回显下拉框的数据
				$('tr').each(function(e) {
					var $cr = $(this);
					var dataindex = $cr.attr("data-index");
					$.each(tabledata, function(index, value) {
						if(value.LAY_TABLE_INDEX == dataindex) {
							$cr.find('input').val(value.materialcode);
						}
					});
				});
			}
		});
		var tabledata;
		//监听工具条删除按钮
		table.on('tool(tableFilter)', function(obj) {
			if(obj.event === 'del') {
				obj.del();
			};
		});

		//头工具栏添加按钮事件
		table.on('toolbar(tableFilter)', function(obj) {
			if(obj.event === 'add') {
				tabledata.push({
					"local": "",
					"supplierName": "",
					"goodsType": "",
					"goodsName": "",
					"specifications": "",
					"nums": "",
					"outStockType": "",
					"remarks": ""
				});

				table.reload('demo', {
					data: tabledata
				});

			}
		});
		//提交数据到后台保存
		form.on('submit(*)', function(data) {
			// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			//  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
		/*	console.log(JSON.stringify(tabledata));//当前容器的全部表单字段，名值对形式：{name: value}
			console.log($("[name='selectDemo']").html());*/
			$.ajax({
				url: "",
				async: true,
				type: "post",
				data: {tabledata:JSON.stringify(tabledata)},
				dataType: "json",
				success: function(result) {
					if(result.success >0) {
						var list =result.date;
						var str="操作成功\n";
						$.each(list,function(i,val){
							str=str+val+"\n";
						});
						alert(str);
						layer.msg(str, {
							btnAlign: 'c',
							time: 10000, //20s后自动关闭
							btn: ['确定']
						});
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					} else {
						console.log(result.date);
						alert("系统错误");
					}
				}
			});
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	});
	$(
			function () {
				loadSelect();
				outTyp();
			}
	)
	function outTyp() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/" ,//urlquerySupplierLocal/queryLocal
			data:{pid:207},
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
			/*		$("[name='outStockType']").empty();
				/!*	var op="";
					var bp="请选择出库类别";
					$("[name='outStockType']").append("<option value="+op+">"+bp+"</option>");*!/*/
					$.each(list,function (i,val) {
						$("[name='selectDemo5']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("信息错误");
				}
			}
		});
	}
	function loadSelect() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/" ,//url/goodStock/locals
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("地址信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});
	}
	function supplierNameSearch() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo1']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("供应商信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});

	}
	function goodsTypes() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo2']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("类别信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});
	}
</script>

</body>

</html>

效果图

syyYoung
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui的table可搜索下拉框(select)
qq_42303129的博客
11-04 2260
这个实现采用了layui 社区一位大神的代码，在此感谢大神的分享，我自己做个记录，也给使用layui 的小伙伴们做一个分享。 思路是这样的 <table class="layui-hide" id="tableId" lay-filter="tableEvent"></table> <script> layui.use(['table','layuiTabl...
layui 数据表格下拉框_LayUi- 动态表格table中下拉框Select的设置和监听
weixin_39695306的博客
02-01 3873
LayUi中动态表格中可以使用 templet自定义列模板 对单元格添加其他元素 ，添加下拉框相对麻烦些，没有自带的。1.添加编辑器我们使用绑定模版选择器的方法：在table.render()中 指定列(cols)的templet属性，并添加模板的html代码，例如：{ rowspan: 2, title: '新建及改造工作状态', templet: '#editState' }未开工在建完工已验...
LayUi组件TableSelect
08-09
LayUi组件：TableSelect
layui-多选下拉框-xm-select-demo源码
10-10
基于layui框架的前端多选下拉框组件，项目中直接导入，复制demo源码就能使用，开发方便，样式美观
关于layui如何动态更新数据
最新发布
qq_52840130的博客
03-20 450
因为在写项目时用layui来完成后台，想点击下一页或者对于下拉切换数据的条数，然后一开始没注意它的table.render里面的url，（不是没注意吧，就是没看到await等明显的请求方式，就以为它只能请求JSON文件里面的数据，但实际上在浏览器上的Network上就有请求了）
layui-多选下拉框-xm-select.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
layui--select使用以及下拉框实现键盘选择的例子
10-16
今天小编就为大家分享一篇layui--select使用以及下拉框实现键盘选择的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui多选下拉框样式，整套layui-select-multiple
12-09
html下拉多选框样式，h5下拉多选框整套样式，用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
TestNg与Junit5的异同
向小雅的博客
10-09 969
TestNG与Junit的异同 相同点 1.注解形式 2.单元测试框架，可以进行单元测试 3.都是java工具 4.都支持：参数化测试、异常测试、超时测试、忽略测试 不同点 1.TestNG可以实现多线程并发测试 2.TestNG可以实现只运行失败的case 3.TestNG允许依赖测试 4.TestNG可以分组测试 5.Junit的BeforeAll、AfterAll需要static，TestNG不需要 6.TestNG可以通过优先级字段priority确定执行顺序 7.TestNG中子类不会运行父类的B
layui table 列中显示下拉框 并监听下拉框
qq_42899641的博客
05-27 2176
@{ ViewBag.Title = “MySelfWeb”; //Layout = “~/Views/Shared/_Layout.cshtml”; Layout = null; Layout = “~/Views/Shared/_LayoutMain.cshtml”; } Myself <style type="text/css"> * { padding :0px; margin:0px; }
layui tableSelect 数据表格下拉框（多选或单选）
热门推荐
weixin_43652106的博客
03-12 1万+
记录：使用tableSelect插件实现下拉框表格，并多选或单选数据 HTML代码： <!-- 部分代码 --> <tr> <td><label class="layui-form-label required">巡防点</label></td> <td> <input type="text" name="point" class="layui-input" lay-verify="re
Layui动态生成select下拉选择框不显示的解决方法
10-16
今天小编就为大家分享一篇Layui动态生成select下拉选择框不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列顺序导出） 子表（表中表、无限层级、子表同样支持前3个功能） 5.拖动行 6.右击快捷菜单 7.合计栏支持固定列 8.双击自适应列宽 9.右侧固定列 列宽拖动改到单元格左侧 效果 1.表头筛选效果 2.编辑筛选效果 筛选明代姓张的 或 唐代姓李的的诗词 3.拖动列调整顺序、隐藏显示列 左右拖动调整顺序，鼠标移出表格后松开--快速隐藏列 4.子表 快速上手 1.将下面模块放到自己项目中: soulTable.js 总入口 tableFilter.js 表头筛选 excel.js excel导出 tableChild.js 子表
layui tableSelect 数据表格下拉框 条件查询
qq_36636312的博客
10-16 9799
效果图： 步骤 1，引入插件tableSelect layui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable/tableChild', tableMerge: '
layui的table查询编辑&tableSelect控件使用
代码笔记
06-21 3395
【代码】layui的table查询编辑&tableSelect控件使用。
layui，Table中下拉框问题。
望生帝的博客
12-06 1365
实操：layui，Table中下拉框问题。
layui动态表格下拉菜单
freeshu的博客
06-24 4814
解决layui动态表格内插入下拉菜单简单方法 简单来讲就是在table.render里的done里获取该列表格创建select插入节点，再将res数据拼接上去。layuiselect模块加载进表格会被该单元格遮挡，自己创节点的好处是样式自己定。 样式注意该单元格下第一个div的overflow改为auto； 并且把select原本的none属性改为行内块 ...
plsql怎么查看存储过程中long变量的值_如何用 Python 自动化在工作中摸鱼
weixin_39910523的博客
11-23 392
“偷懒还能干完活，才是本事。”帅张发了一篇《工作要学会偷懒》，深感赞同。有些事情既然定期都要处理，就没有更好的处理方式？能自动化么？工作要学会偷懒，尤其对于一些大量重复的工作，第一感觉就要想到如何偷懒。怎么偷懒呢？做一点简单的编程工作就可以了。我总结了一些在工作中非常常见的例子，将源码整理好供参考。这类工作大部分是重复性工作，但占据了你比较多的时间，有时候用蛮力做的事情，可以有更省时省...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
weixin_39830387的博客
01-14 816
layuiTableColumnEdit在layui table的基础上对表格列进行扩展：点击单元格显示可搜索下拉列表及日期时间选择器。一、介绍此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)及日期时间选择器功能的问题。a.可异步ajax请求后台数据。b.可直接以数组形式传参c.可输入关键字搜索下拉框数据d.可加入日期时间选择器二、使用说明使用方...
layui动态表格带搜索的下拉框的使用
09-07
Layui是一种基于layui框架的前端UI库，可以方便地在网页中创建动态表格和下拉框等组件。 使用Layui动态表格带搜索的下拉框，首先需要引入LayUI的相关文件，如layui.css、layui.js等。然后，在HTML中定义一个表格容器，可以使用div标签，并给它一个id，方便后续的操作。 接下来，在JavaScript中通过Layui的table模块进行表格的初始化和渲染。我们可以使用table.render()方法，传入一些参数来定义表格的样式、列属性以及数据源等。在其中的cols配置项中，我们可以定义表格的列，包括列头名称、字段名、宽度等信息。此时，我们可以在列的属性中增加一个toolbar属性，来定义表格的工具栏。 其中的toolbar可以是一个函数，用于渲染每一行的工具栏内容。我们可以在这个函数中创建一个下拉框，通过Layui的form模块进行渲染和监听。我们可以使用form.on()方法来监听下拉框的选中事件，并在监听函数中处理相应的逻辑。 在表格中，我们可以使用formSelects组件，它是一个基于Layui的多选、搜索等功能的下拉框插件。我们可以通过定义一个元素的class为select，然后使用formSelects.render()方法来渲染下拉框。可以定义一些参数，例如最多可选的数量、搜索框的位置等。 总结来说，要使用Layui动态表格带搜索的下拉框，我们需要引入Layui的相关文件，然后在HTML中定义表格容器，并在JavaScript中使用Layui的table模块进行表格的初始化和渲染。在列属性中，我们可以添加一个toolbar属性来定义行的工具栏。可以使用form.on()方法监听下拉框的选中事件，并在监听函数中处理逻辑。同时，也可以使用formSelects组件来实现多选、搜索等功能的下拉框。通过这些步骤，我们可以方便地实现Layui动态表格带搜索的下拉框的使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值