layui,table中添加表单元素

 table中添加表单元素 select:

<style>
    .layui-table-body, .layui-table-box, .layui-table-cell{
        overflow: visible;
    }
</style>

<script type="text/html" id="sel_update_time">
  <input type="text" name="date" id="sel_create_date{{d.id}}" value="" autocomplete="off" class="layui-input" style="border: 0">
</script>

<script type="text/html" id="pay_tools_name_id">
    <select name='pay_tools_name' lay-search=''id="tools_name_sel{{d.id}}">
         <option value="{{d.id}}">{{d.name}}</option>
    </select>
</script>

<script>
    layui.use(['form', 'jquery', 'laydate','table'], function ()
    {
        var form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            $ = layui.$;
        table.render({
            elem    : '#verifying_verify'
            , where : {data: param}
            , url   : "data_url" //数据接口
            , skin  : 'line'
            , even  : true
            , size  : 'lg'
            , cols  : [[
                {field : 'update_time', title: '测试字段', templet: '#sel_update_time',width:180}
            ]]
            , done : function (res, curr, count) {
                $.each(res.data,function(index,values,arr){
                    laydate.render({ // 日期插件
                        elem: '#sel_create_date'+values['id']
                        ,type:'datetime'
                    });
                    // select 选中操作
                    var select  = document.getElementById("tools_name_sel"+values['id']);
                    var options = select.options;
                    $.each(options, function (index, item) {
                        if (values['pay_tools'] == item.value) {
                            options[index].selected = true
                        }
                    });
                });
            }
        });
    })

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Layui的表格设置带有下拉框的单元格,可以使用Layui的form模块的select组件来实现。 首先,在表格的需要添加下拉框的单元格添加一个select元素,并设置其id属性。 然后,在Layui的JavaScript代码,使用form.render方法对表单进行渲染,以便让下拉框组件生效。 最后,使用table.on('edit')方法监听单元格编辑事件,当编辑的单元格是下拉框单元格时,使用form.val方法动态修改下拉框的选值。 下面是一个示例代码: ``` // HTML代码 <table class="layui-table"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td><select id="sex-select"><option value="1">男</option><option value="2">女</option></select></td> <td>20</td> </tr> <tr> <td>李四</td> <td><select id="sex-select"><option value="1">男</option><option value="2">女</option></select></td> <td>22</td> </tr> </tbody> </table> // JavaScript代码 layui.use(['table', 'form'], function() { var table = layui.table; var form = layui.form; // 渲染表单 form.render(); // 监听单元格编辑事件 table.on('edit', function(obj) { var value = obj.value; // 获取编辑后的值 var field = obj.field; // 获取编辑的字段名 var data = obj.data; // 获取当前行的数据 // 如果是性别下拉框单元格被编辑 if (field === 'sex') { // 动态修改下拉框的选值 form.val('sex-select', { sex: value }); } }); }); ``` 需要注意的是,为了避免多个单元格使用同一个id属性值,应该为每个下拉框单元格分配一个唯一的id属性值。另外,也可以使用name属性来标识下拉框组件,以便在form.val方法使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值