LayUI表格插入可输入的下拉框

最近在做公司的项目，有需求需要选择下拉，下拉完之后可以输入值。废话不多说，主要思路为使用HTML5的dataList标签。

主要以下步骤：
1 创建表格

<form class="layui-form" action=""><div class="layui-form-item" id="tablePart"><label class="layui-form-label">表格</label><div class="layui-input-block"><table class="layui-hide" id="test" lay-filter="test"></table></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></div>
<script src="../layui-v2.6.8/layui/layui.js"></script>

2.设置表格列属性，监听input框输入，结束之后将数据刷入表格的table.cache属性中

layui.use(['table','jquery'], function () {var table = layui.table, form = layui.form,$ = layui.$;//需要动态设置的datalist属性let forArr = ['field1', 'field2']table.render({elem: '#test',data: [{id: 1,username: '张三'},{id: 2,username: '李四'}],cellMinWidth: 80, cols: [[, {field: 'id', title: 'ID', width: 100, unresize: true, sort: true}, {field: 'username', title: '用户名', templet: function (data) {let inputStr = '<input type="text" name="userInput" lay-verify="userInput" list="nas" autocomplete="off" class="layui-input">';let dataList = '<datalist id="nas">'let options  = ''forArr.forEach((a)=>{options+='<option value=\"'+a+'\">'+a+'</option>'})console.log('options============',options)return inputStr+dataList+options+'</datalist>'}}]], page: true});//监听提交 此处思路主要为拿到表格div下 的所有input 然后用input框的值替换到表格行数据中的属性form.on('submit(demo1)', function(data){data.field.tablesdata = table.cache.testlet inputs = $('#tablePart input')for (let i = 0; i < table.cache.test.length; i++) {let tableInput =  table.cache.test[i]let inputVal = inputs[i].valuetableInput.username = inputVal}return false;});});

LayUI表格插入可输入的下拉框相关推荐

LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
Java 表单提交下拉框_Java实现Layui的form表单动态绑定下拉框
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Java实现Layui的form表单动态绑定下拉框 [1]视图层爱好: 立即提交重置 $(function () { //[1]加载&初始化l ...
Pyqt5 在表格中单元格设置下拉框，并根据选项改变背景颜色
关于怎么在表格中单元格设置下拉框,并根据选项改变背景颜色 def table_combox_init(self):combox_statePlm_jria_list = ['', '无', 'O', ...
layui弹出层中添加下拉框
layui弹出层中添加下拉框实习不到两个月,踩到的坑使用layui写了一个项目,负责其中的一小块,其中有一个页面需要在弹出层中写一个下拉框代码如下: <div class="la ...
jquery模拟可输入的下拉框
//页面html <div id="select" class="select" ><ul><c:forEach items=&q ...
Android 可以输入的下拉框
将AutoCompleteTextView与一个button组合起来,做成一个可以输入,也可以选择的下拉框. 下面是定义的xml文件,auto_spinner.xml: 1 <?xml vers ...
layui 实现动态 radio 、select下拉框 jQuery赋值方法
layui radio .select 赋值方法下面展示一些 radio 单选框赋值. <div class="layui-inline layui-col-md4"> ...
php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
php可输入的下拉框,JavaScript_可编辑下拉框的2种实现方式，可编辑下拉框-HTML 复制代码代 - phpStudy...
可编辑下拉框的2种实现方式可编辑下拉框-HTML A类 B类 C类 D类可编辑下拉框-JS 可编辑下拉框可编辑下拉框作者 function combox(obj,select){ this.o ...

LayUI表格插入可输入的下拉框

LayUI表格插入可输入的下拉框相关推荐

最新文章

热门文章