精华内容
下载资源
问答
  • layui 表格编辑下拉框显示问题、日期字段编辑问题
    千次阅读
    2022-03-25 15:24:45

    要求:1、表格编辑下拉框 2、下拉框数据动态

    最难处理是下拉显示问题

    下拉动态数据公共方法

     getdatadic: function (param) {
                /// <summary>数据字典下拉框赋值</summary>  
                /// <param name="param" type="Object">selectEl:select的ID带#,dataenum数据字典类别的enum值。</param>
                    admin.req({
                        url: '/System/DataDictionary/GetListByDataEnumType?rand=' + Math.round(Math.random() * (10000 - 1)).toString(),
                        data: { dataEnum: param.dataenum }
                        , async: false//取消异步
                        , done: function (res) {
                            
                            if (param.script === "script") {
                                var slhtml = '<select name="' + param.selectEl + '" id="' + param.selectEl + '" lay-filter="' + param.selectEl + '">'
                                $(res.Data).each(function (i, n) {
                                    slhtml = slhtml + "<option value='" + n.Id + "'>" + n.Name + "</option>";
                                    // $($("#selectLb").html()).append("<option value='" + n.Id + "'>" + n.Name + "</option>");
                                });
                                slhtml = slhtml + ' </select>';
                                $("#" + param.scriptEl).html(slhtml)
                                //form.render("select");//必须
    
                            }
                            else {
                                $(res.Data).each(function (i, n) {
                                    $(param.selectEl).append("<option value='" + n.Id + "'>" + n.Name + "</option>");
                                });
                            }
                            form.render("select");//必须
                            if (param.wooverify != undefined && param.wooverify) {
                                $(param.selectEl).next("div.layui-form-select").children("div").children("input").addClass("pen");
                                //$(param.selectEl).next("div.layui-form-select").children("div").children("input").addClass("pen");
                            }
                        }
                    });
                
    
            },

    1、html

     <div class="layui-card " id="continvoice">
            <div class="layui-card-header">发票</div>
            <div class="layui-card-body" style="padding: 15px;">
                <table id="NF-ContInvoice" lay-filter="NF-ContInvoice"></table>
            </div>
            
                <script type="text/html" id="selectInTypehtml" >    
                <select name='InType' id="InType">
                    <option value=""></option>
                   
                    
                </select>
                </script>
    
             <!--表格工具栏-->
                <script id="tool_continvoice" type="text/html">
                    <div class="layui-inline">
                        <button class="layui-btn " lay-event="add"><i class="layui-icon layui-icon-edit"></i> 新增</button>
                        <button class="layui-btn  layui-btn-danger" lay-event="save"><i class="layui-icon layui-icon-save"></i>确认</button>
                    </div>
                </script>
        </div>

    2、样式文件

    <style type="text/css" >
     /*使下拉列表框不被遮挡*/
        .layui-table-cell {
            overflow: visible !important;
        }
    
    
    /* 使得下拉框与单元格刚好合适 */
    td .layui-form-select{
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    } 
    
    </style>

    3、核心js内容

    1、动态加载下拉数据,是后台封装信息

     commonnf.getdatadic({ dataenum: 19, selectEl: "InType", script: "script", scriptEl: "selectInTypehtml" });

    2、{ field: 'InTypeName', title: '发票类型', width: 160, templet: '#selectInTypehtml' }

    日期

    3、, { field: 'MakeOutDateTime', title: '开票日期', width: 140, edit: 'text', event: 'Plandate' }

    4、下拉

     /**
                 * 下拉选择框
                 * **/
                form.on('select(InType)', function (data) {
                    //debugger;
                    var elemt = $(data.elem)
                    var trelment = elemt.parents("tr");
                    var tabledata = table.cache['NF-ContInvoice']
                    var trobjdata = tabledata[trelment.data('index')]//["InTypeName"] = data.value;
                    trobjdata.InType = data.value;
                    
                    for (var i = 0; i < updatedatafp.length; i++) {
                        if (updatedatafp[i].Id === trobjdata.Id) {
                            updatedatafp.splice(i, 1);
                        }
                    }
                    isupdatefp = true;
                    updatedatafp.push(trobjdata);

                });

    5、日期操作

    //列表操作栏
                table.on('tool(NF-ContInvoice)', function (obj) {
                    var _data = obj.data;
                    switch (obj.event) {
                       
                        case "Plandate"://开票日期
                            {
                               // debugger;
                                var newdata = {};
                                var field = $(this).data('field');
                                laydate.render({
                                    elem: this.firstChild
                                    , show: true //直接显示
                                    , closeStop: this
                                    , type: 'date'
                                    , format: "yyyy-MM-dd"
                                    , done: function (value, date) {
                                       // debugger;
                                        isupdatefp = true;
                                        newdata[field] = value;
                                        obj.update(newdata);
                                        for (var i = 0; i < updatedatafp.length; i++) {
                                            if (updatedatafp[i].Id === obj.data.Id) {
                                                updatedatafp.splice(i, 1);
                                            }
                                        }
                                        obj.data.MakeOutDateTime = value;
                                        updatedatafp.push(obj.data);

                                    }
                                });
                            }
                            break;
                        //case "selectmsd":
                        //    {
                        //        var field = $(this).data('field');
                        //        debugger;

                        //    }
                            break;
                        default:
                            layer.alert("暂不支持(" + obj.event + ")");
                            break;
                    }
                });

    整块模块的全部代码

    /************************发票-begin*****************************************************************************************/
                //发票类型
               
                commonnf.getdatadic({ dataenum: 19, selectEl: "InType", script: "script", scriptEl: "selectInTypehtml" });
                table.render({
                    elem: '#NF-ContInvoice'
                    , url: '/Contract/ContractCollection/GetInvoiceListByContId?contId=' + contId + '&rand=' + wooutil.getRandom()
                    , toolbar: '#tool_continvoice'
                    , defaultToolbar: ['filter']
                    , cols: [[
                        { type: 'numbers', fixed: 'left' }
                        , { type: 'checkbox', fixed: 'left' }
                        , { field: 'Id', title: 'Id', width: 50, hide: true }
                        , { field: 'InTypeName', title: '发票类型', width: 160, templet: '#selectInTypehtml' }
                        , { field: 'AmountMoneyThod', title: '发票金额', width: 140, edit: 'text' }
                        , { field: 'MakeOutDateTime', title: '开票日期', width: 140, edit: 'text', event: 'Plandate' }
                        , { field: 'InCode', title: '发票号', width: 150, edit: 'text' }
                        , { field: 'InStateDic', title: '发票状态', width: 140 }
                        , { field: 'ConfirmUserName', title: '确认人', width: 140 }
                        , { field: 'ConfirmDateTime', title: '确认日期', width: 140 }
                        , { field: 'CreateUserName', title: '创建人', width: 140 }
                        , { field: 'CreateDateTime', title: '创建日期', width: 140 }
                        , { field: 'InType', title: '发票类型id', width: 140, hide: true }
    
                    ]]
                    , page: false
                    , loading: true
                    , height: setter.table.height_tab
                    , limit: setter.table.limit_tab
                   
                    , done: function (res, curr, count) {
                       
                        var tableId = "NF-ContInvoice";
                        var divForm = $("#" + tableId).next();  // 获取表格,tableId是表格的id
                        var tableCache = table.cache[tableId];  // 获取表格缓存数据,tableCacheId也是表格的id
                        var trJqs = divForm.find(".layui-table-body tr");  // 获取表格body下的所有tr标签
                        trJqs.each(function () {  // 遍历每个tr标签
                           
                            var trJq = $(this);  // 获得当前遍历的tr标签
                            var dataIndex = trJq.attr("data-index");  // 得到当前数据行的data-index,即为第几行数据
                            trJq.find("td").each(function () {  // 遍历tr标签下的每一个td标签
                                var tdJq = $(this);  // 获得当前遍历的td标签
                                var fieldName = tdJq.attr("data-field");  // 获得当前td标签的字段名
                                var selectJq = tdJq.find("select");  // 获得当前td标签下的select标签
                                if (selectJq.length == 1) {  // 判断select标签是否存在
                                    selectJq.eq(0).val(tableCache[dataIndex]["InType"]);  // 将表格里的缓存数据赋值给select标签
                                }
                            });
                        });
                        form.render('select');  // 重新加载select表单
    
    
    
                       
                      }
                   
                   });
    
                var contaoviceEvent = {
                    add: function () {
                        admin.req({
                            url: '/Contract/ContractCollection/AddAnvoiceLine?rand=' + wooutil.getRandom()
                            , data: { contId: contId }
                            , success: function (res) {
                                table.reload("NF-ContInvoice", {
                                    page: { curr: 1 }
                                    , where: {}
                                });
    
                            }
                        });
                    },
                    save: function () {
                        if (isupdatefp) {//发票保存
                           // debugger;
                            for (var i = 0; i < updatedatafp.length; i++) {
                                //if (updatedatafp[i].Id === obj.data.Id) {
                                //    updatedatafp.splice(i, 1);
                                //}
                                updatedatafp[i].AmountMoney = updatedatafp[i].AmountMoneyThod;
                            }
                            admin.req({
                                url: '/Contract/ContractCollection/SaveFpData',
                                data: { data: updatedatafp },
                                type: 'POST',
                                done: function (res) {
                                    //清空变量,防止重复提交
                                    updatedata = [];
                                    isupdate = false;
                                    return layer.msg('保存成功', { icon: 1 });
                                }
                            });
                        } else {
                            return layer.msg('数据没有任何修改!', { icon: 5 });
                        }
                    }
                   
                };
                //发票头部工具栏
                table.on('toolbar(NF-ContInvoice)', function (obj) {
                    switch (obj.event) {
                        case 'add':
                            contaoviceEvent.add();
                            break;
                        case 'save':
                            contaoviceEvent.save();
                            break
                        case 'LAYTABLE_COLS'://选择列-系统默认不管
                            break;
                        default:
                            layer.alert("暂不支持(" + obj.event + ")");
                            break;
                    };
                });
                //列表操作栏
                table.on('tool(NF-ContInvoice)', function (obj) {
                    var _data = obj.data;
                    switch (obj.event) {
                       
                        case "Plandate"://开票日期
                            {
                               // debugger;
                                var newdata = {};
                                var field = $(this).data('field');
                                laydate.render({
                                    elem: this.firstChild
                                    , show: true //直接显示
                                    , closeStop: this
                                    , type: 'date'
                                    , format: "yyyy-MM-dd"
                                    , done: function (value, date) {
                                       // debugger;
                                        isupdatefp = true;
                                        newdata[field] = value;
                                        obj.update(newdata);
                                        for (var i = 0; i < updatedatafp.length; i++) {
                                            if (updatedatafp[i].Id === obj.data.Id) {
                                                updatedatafp.splice(i, 1);
                                            }
                                        }
                                        obj.data.MakeOutDateTime = value;
                                        updatedatafp.push(obj.data);
    
                                    }
                                });
                            }
                            break;
                        //case "selectmsd":
                        //    {
                        //        var field = $(this).data('field');
                        //        debugger;
    
                        //    }
                            break;
                        default:
                            layer.alert("暂不支持(" + obj.event + ")");
                            break;
                    }
                });
    
                /**编辑**/
                table.on('edit(NF-ContInvoice)', function (obj) {
                   // debugger;
                    isupdatefp = true;
                    var data = obj.data; //得到所在行所有键值
                    var filed = obj.field;
                    switch (filed) {
                       
                        case "AmountMoneyThod"://发票金额
                            {
                                var amoutthd = wooutil.numThodFormat(obj.value.toString());
                                obj.data.AmountMoney = amoutthd;
                               
                            }
                            break;
    
    
    
    
                    }
                    //修改值
                    for (var i = 0; i < updatedatafp.length; i++) {
                        if (updatedatafp[i].Id === obj.data.Id) {
                            updatedatafp.splice(i, 1);
                        }
                    }
                    updatedatafp.push(obj.data);
                });
                /**
                 * 下拉选择框
                 * **/
                form.on('select(InType)', function (data) {
                    //debugger;
                    var elemt = $(data.elem)
                    var trelment = elemt.parents("tr");
                    var tabledata = table.cache['NF-ContInvoice']
                    var trobjdata = tabledata[trelment.data('index')]//["InTypeName"] = data.value;
                    trobjdata.InType = data.value;
                    
                    for (var i = 0; i < updatedatafp.length; i++) {
                        if (updatedatafp[i].Id === trobjdata.Id) {
                            updatedatafp.splice(i, 1);
                        }
                    }
                    isupdatefp = true;
                    updatedatafp.push(trobjdata);
    
                });
                /*************************发票-end*******************************************************************************************/
    

    借鉴内容:layui学习——数据表格嵌套下拉列表,并实现动态更新 - 夏末蝉未鸣 - 博客园

    更多相关内容
  • layui表格下拉框联动的实现

    千次阅读 2020-05-12 15:39:53
    可把下列代码在https://www.layui.com/demo地址内演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no...

    可把下列代码在https://www.layui.com/demo地址内演示

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>layui在线调试</title>
      <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1586046995308" media="all">
      <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    /* 防止下拉框的下拉列表被隐藏---必须设置--- */
    .layui-table-cell {
    overflow: visible;
    }
      </style>
    </head>
    <body>
     
    <table class="layui-hide" id="demo" lay-filter="test"></table>
     
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
     <script type="text/html" id="checkChildTypeTpl">
        <select name="{{d.name}}" lay-filter="{{d.filter}}">
            <option value=""></option>
    {{# layui.each(d.data, function(index,item){ }}
            <option  value="{{item.value}}" {{item.value == d.value ? 'selected' : ''}}>{{item.name}}</option>
    {{# }) }}
    
          </select>
    </script>
    <script src="//res.layui.com/layui/dist/layui.js?t=1586046995308"></script>
    <script>
    layui.config({
            version: '1586046995308' //为了更新 js 缓存,可忽略
        });
    
        layui.use(['laydate', 'laypage', 'layer', 'laytpl', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格
            var laytpl = layui.laytpl;
            var $ = layui.$;
            var form = layui.form;
    //模拟ajax 同步获取数据  
            var checkChildTypeData = [{name: '男', value: '男'}, {name: '女', value: '女'}]
            //根据性别获取职业
            function getClassifyData(value) {
                if (value == '男') {
                    return [{name: '作家', value: '作家'}, {name: '词人', value: '词人'}]
                } else if (value == '女') {
                    return [{name: '画家', value: '画家'}, {name: '舞蹈', value: '舞蹈'}]
                }
                return [];
            }
    
            //执行一个 table 实例
            table.render({
                elem: '#demo'
                , height: 420
                , url: '/demo/table/user/' //数据接口
                , title: '用户表'
                , page: true //开启分页
                , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                , totalRow: true //开启合计行
                , cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计:'}
                    , {field: 'username', title: '用户名', width: 80}
                    , {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
                    , {
                        event: 'sex', title: '性别', width: 80, sort: true, templet: function (d) {
    
                            return laytpl($('#checkChildTypeTpl').html()).render({
                                name: 'sex',
                                filter: 'sex',
                                value: d.sex,
                                data: checkChildTypeData
                            });
                        }
                    }
                    , {
                        event: 'classify', title: '职业', width: 80, templet: function (d) {
                            var classifyData = getClassifyData(d.sex)
                            return laytpl($('#checkChildTypeTpl').html()).render({
                                name: 'classify',
                                filter: 'classify',
                                value: d.classify,
                                data: classifyData
                            });
                        }
                    }
                    , {field: 'city', title: '城市', width: 150}
                ]], done: function () {
                    layui.form.render();
                }
            });
            //操作栏操作按钮的事件
            table.on('tool(test)', function (obj) {
                switch (obj.event) {
                    case 'sex':
                        form.on('select(sex)', function (data) {
                            //得到被选中的值
                            obj.update({sex: data.value});
                            var classifyData = getClassifyData(data.value)
                            //级联更新下拉
                            obj.tr.find('td[lay-event="classify"]>.layui-table-cell').html(laytpl($('#checkChildTypeTpl').html()).render({
                                    name: 'classify',
                                    filter: 'classify',
                                    data: classifyData
                                })
                            );
                            form.render();
                        });
    
                        break;
                }
            });
        });
    </script>
    </body>
    </html> 
    
    展开全文
  • 需要加样式否则单元格下拉框被单元格样式覆盖 <style> .layui-table-cell{ overflow: visible !important; } td .layui-form-select{ margin-top: -10px; margin-left: -15px; margin-right: -15px; ...

    需要加样式否则单元格下拉框被单元格样式覆盖

     <style>
        .layui-table-cell{
          overflow: visible !important;
        }
        td .layui-form-select{
          margin-top: -10px;
          margin-left: -15px;
          margin-right: -15px;
        }
      </style>
    
    <script type="text/html" id="inputSex">
        <select name="sex" lay-filter="sex" lay-id="{{d.id}}"  >
          <option  {{# if(d.sex==0){  }} selected   {{# }  }}  value="0"></option>
          <option {{# if(d.sex==1){  }} selected   {{# }  }}   value="1"></option>
        </select>
      </script>
    
    
    
    
    
    
    
    var dataTable = table.render({
           elem:'#LAY-user-back-list'
          ,height:500
          ,'title':'员工信息表'
          ,url:"{:url('/super/user')}"
          ,page: true //开启分页
          ,toolbar:'#toolbarDemo'
          ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
              title: '提示'
              ,layEvent: 'LAYTABLE_TIPS'
              ,icon: 'layui-icon-tips'
            }]
            , cols: [[ //表头
              {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', sort: true}
                , {field: 'username', title: '姓名',edit: 'text'}
                , {field: 'sex', title: '性别', templet: '#inputSex',}
                , {field: 'mobile', title: '手机号',edit: 'text'}
                , {field: 'nickname', title: '昵称',edit: 'text'}
                , {field: 'identity', title: '身份'}
                , {field: 'department', title: '部门'}
                , {field: 'on_job', title: '职位状态',templet: '#onjob',edit: 'text'}
                , {field: 'status', title: '账号状态', toolbar: '#status'}
                , {field: 'email', title: '邮箱',edit: 'text'}
                , {field: 'login_time', title: '上次登录时间'}
                , {field: 'login_ip', title: '登录IP'}
                , {field: 'create_date', title: '创建时间'}
                , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#options'}
            ]]
        });
    
    
    
     //监听下拉框,更改性别
        form.on('select(sex)', function(data){
          var sex = data.value;
          var id = $(data.elem).attr('lay-id');
          var load = layer.load();
          $.post("{:url('/super/user/edit')}",{sex:sex,id:id},function (res) {
            layer.close(load);
            if (res.code==1){
              layer.msg(res.msg,{icon:1,time:1500})
            } else {
              layer.msg(res.msg,{icon:2,time:1500},function () {
                $(data.elem).prop('checked',!$(data.elem).prop('checked'));
                form.render()
              })
            }
          })
    
          console.log(id)
        })
    

    在这里插入图片描述
    在这里插入图片描述

    后台代码
      public function edit(Request $request,$id)
        {
            $data =  $request->post();
            $user = new UserModel();
            // 过滤post数组中的非数据表字段数据
            try{
                $user->allowField(true)->save($data,['id' => $id]);
            }catch (DbException $exception){
                $this->error('编辑失败');
            }
            $this->success('编辑成功');
        }
    
    展开全文
  • 今天小编就为大家分享一篇Layui表格行工具事件与数据回填方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 单元格内容使用layui的 templet 功能。如: {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false} 代码: layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(table, layer...
    1. 单元格内容使用layui的 templet 功能。如: {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false}
    2. 代码:
    layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(table, layer, element, $, form){
    
    });
    
    1. table.render渲染done回调
    //展示已知数据
      table.render({
        elem: '#grid'
        ,cols: [[ //标题栏
          {field: 'id', title: 'ID', width: 80, sort: true}
          ,{field: 'username', title: '用户名', width: 120}
          ,{field: 'email', title: '邮箱', minWidth: 150}
          ,{field: 'city', title: '城市', width: 100}
          ,{field: 'selectName', title: '下拉框',  templet: '#selectGxmc'}
          ,{field: 'layuiData', title: '日期框', templet: '#layuiDataGxmc'}
          ,{field: 'editText', title: '编辑框', edit:'text'}
        ]]
        ,data: [{
          "id": "10001"
          ,"username": "杜甫"
          ,"email": "xianxin@layui.com"
          ,"city": "浙江杭州"
          ,"layuiData":''
          ,'editText':'1'
        },{"id": "10002"
          ,"username": "杜甫2"
          ,"email": "xianxin@layui.com"
          ,"city": "浙江杭州"
        }, {
          "id": "10003"
          ,"username": "杜甫3"
          ,"email": "xianxin@layui.com"
          ,"city": "浙江杭州"
        }]
        ,skin: 'line' //表格风格
        ,even: true
        //,page: true //是否显示分页
        //,limits: [5, 7, 10]
        //,limit: 5 //每页默认显示的数量
        ,done: function (res, curr, count) {
                    count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
                    layui.each($('select'), function (index, item) {
                        var elem = $(item);
                        elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                    });
                    // form.render();
                }
      });
    
    1. 模版
    <script type="text/html" id="selectGxmc" >
    	<select name='selectName' lay-verify='selectVerify' lay-search=''">
    		<option value=""></option>
    		<option value="父子">父子</option>
    		<option value="母子">母子</option>
    		<option value="姐弟">姐弟</option>
    		<option value="弟弟">弟弟</option>
    	</select>
    </script>
    
    1. 监听
     // 监听修改update到表格中
            form.on('select', function (data) {
                debugger;
                var elem = $(data.elem);
                var trElem = elem.parents('tr');
                var tableData = table.cache['grid'];
                // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
                tableData[trElem.data('index')][elem.attr('name')] = data.value;
                // 其他的操作看需求 TODO
            });
    
    1. 样式调整
    /* 防止下拉框的下拉列表被隐藏*/
    .layui-table-cell { overflow: visible !important; }
    
    .layui-table-box {
        overflow: visible;
    }
            
    .layui-table-body {
        overflow: visible;
    }
    
    /* 使得下拉框与单元格刚好合适 */
    td .layui-form-select{
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    } 
    
    展开全文
  • } }``` 数据表格设置 , done: function (res, curr, count) {//处理下拉框被隐藏和不能根据后台数据显示对应状态的问题 count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow'...
  • 第一步 form表单里写好一个下拉框 <div class=layui-form-item> <label class=layui-form-label>下拉选择框 <div class=layui-input-block> <select id=selectId name=interest lay-filter=city> </...
  • layui表单展示下拉框

    2020-12-15 10:53:52
    一、Layui表单展示时 显示的时数字 需要根据枚举类型展示出内容。 二、写下拉框时,展示出全部内容。 Layui表单 添加一个枚举类 ,获取需求的字段。 constant或者enums包下 public enum GoodsBrandStatusEnum { ...
  • Layui(table下拉框)

    千次阅读 2019-07-17 21:08:43
    用到的是layui插件,主要是layui插件的table模块。目的是要做到内嵌入select,并且通过select回填相对应的数据。 刚开始为无数据状态,然后添加一行数据,绑定好table内的select所需要的数据 然后是根据修理项目的...
  • layui表格内部制作下拉框

    千次阅读 2019-09-28 16:11:48
    以下css会导致你的table左右滑动条不管用,都显示在前台,但是不这么做就会导致下拉框无法向上弹出 <style type="text/css">... td[data-field='DEVICE_NAME'] .layui-table-cell { overflow: visible...
  • layui表格下拉框无法显示

    千次阅读 2019-07-08 08:09:12
    layui表格下拉框无法显示 开发工具与关键技术:java 作者:彭浩达 撰写时间:2019年 7月 4日 $(function () { layui.use([‘layer’, ‘table’], function () { layuiTable = layui.table; layer = layui.layer, ...
  • 今天小编就为大家分享一篇layui表格数据复选框回显设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表格单元格中插入下拉框

    千次阅读 2021-02-04 16:38:01
    这个实现采用了layui 社区一位大神的代码,在此感谢大神的分享,我自己做个记录,也给使用layui 的小伙伴们做一个分享。 思路是这样的 可以使用自定义模板返回select节点然后在done回调中form.render(‘select’);...
  • html代码 请选择 编辑页面渲染 //渲染页面 layui.use(['form'], function () { window.form = layui.form; //监听下拉框 form.on('select(platformId)', function (data) { //设置请求为同步 $.ajaxSettings....
  • 今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 表头工具栏 ,select下拉框,随着下拉框的变化,切换下面表格的值;并且表格单元格内插入时间控件和实现可编辑。 (为了***,个别变量进行修改,可能不规范,理解一下意思) 代码如下: planPaymentTable= table...
  • Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element模块...
  • 相关阅读: X-admin2.2打开页面(添加弹窗),执行成功后如何关闭弹出窗口和刷新table表格内容? 基于X-admin2.2的后台管理系统登录实现 Spring Boot+JPA微服务中...LayUi的动态表格Table中每个td的内容可以设置为可
  • 在实现编辑功能时,我们需要显示数据对应的下拉框或按钮的值,这时我们需要将数据回显到我们的标签里。 //HTML代码 <div class="layui-form-lable"> <label class="layui-input-lable">世界上最好的...
  • 一、吐槽,layui感觉真的是比较不好用二、为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿,可能一个功能的开发我用其vue框架很简便就实现了,但是使用这个就要用很...
  • layui的table可编辑扩展下拉框编辑

    千次阅读 2021-01-14 11:46:37
    标签:layui的table单元格编辑类型(默认不开启)目前只支持:text(输入框)。需求希望能使用下拉框编辑。最终效果图:实现原理:1.单元格内容使用layui的templet功能。如:{field:'jtcyGxmc', title: '关系名称',...
  • LayUi中动态表格中可以使用 templet自定义列模板 对单元格添加其他元素 ,添加下拉框相对麻烦些,没有自带的。1.添加编辑器我们使用绑定模版选择器的方法:在table.render()中 指定列(cols)的templet属性,并添加...
  • layui数据表格中加动态下拉框并监听

    千次阅读 2020-07-30 16:11:44
    下拉框 <script type="text/html" id="selectEducation"> {{# if(d.mDataMeasurand == null){ }} <select name="dataexpstr2" lay-filter="dataexpstr3" data-value="{{d.Nid}}"> <option value=...
  • 思路:根据layui数据表格中 templet属性中的LAY_INDEX字段动态生成下拉框的class,在渲染表格的时候发送请求,根据select.class操纵dom将接口返回数据填充到select下拉框中。 数据表格: var n = { title: '变更后...
  • layui数据表格单元格设置下拉框

    千次阅读 2019-07-28 19:53:58
    目前layui数据表格,只支持单元格edit编辑类型,尚未支持单元格下拉款类型,但是我们可以使用单元格templet自定义模板,layui-cols-表头参数一览表解释说明:自定义列模板遵循laytpl语法,这是一个非常实用的功能,...
  • layui表格单元格添加下拉选择功能

    千次阅读 2021-07-16 14:39:10
    layui表格单元格添加下拉选择功能 1、修改表头 2、更新数据 3、修改样式 代码如下: <style> /*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格cell刚好合适嵌入, ...
  • layui表格单元格中插入下拉框

    万次阅读 热门讨论 2018-10-22 14:55:32
    这个实现采用了layui 社区一位大神的代码,在此感谢大神的分享,我自己做个记录,也给使用layui 的小伙伴们做一个分享。 思路是这样的 可以使用自定义模板返回select节点然后在done回调中form.render(‘select’);...
  • 如图为layui写的弹框,里面的下拉框选项多的时候会出现滚动条,外侧也会出现滚动条,而且下拉框选项显示不全: html: <form class="layui-form layui-form-pane" id="saveSceneModal" style="display: ...
  • 1.先检查有没有引入layui.js2.然后看有没有被包住,3.查看是否有以下代码layui.use('form', function(){var form = layui.form;});如果条件都满足,通常是没有问题的。但如果用了laytpl,就有可能不显示,解决办法...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 313
精华内容 125
关键字:

layui表格编辑下拉框