精华内容
下载资源
问答
  • layui 表格头部加下拉
    2021-05-18 14:19:10
    <style>
        .layui-table-cell, .layui-table-tool-panel li{  overflow:visible !important; }
        .layui-table-header{ overflow: visible;}
    </style>
    
    
    table.render({
    
      parseData(){
        var effectStr =`
                                <select name="effectStr" lay-filter="effectStr">
                                    <option value="">有效应</option>
                                    <option value="即将实施">即将实施</option>
                                    <option value="即将废止">即将废止</option>
                                    <option value="已经废止">已经废止</option>
                                    <option value="未知">未知</option>
                                    <option value="现行有效">现行有效</option>
                                    <option value="部分有效">部分有效</option>
                                </select>
                            `
                        $('table th:eq(4) .layui-table-cell').html(effectStr);
      }
    })
    
    form.on("select(effectStr)", function(data,el){
                    // 获取选中的值
                    console.log(data.value);
            });
    

     

    更多相关内容
  • Layui表格头部工具栏

    万次阅读 2019-06-16 21:04:27
    layui插件具有丰富而强大的功能,其中layui 的table组件也包含了许多用法,这些用法都很强大,而下面就来看一下它的表格工具栏部分。 首先,要用到工具栏必须要先开启工具栏,官方给出的开启方法是在表格渲染时加入 ...
    开发工具与关键技术:VS2015,Javascript
    
    撰写时间:2019年6月16日
    

    layui插件具有丰富而强大的功能,其中layui 的table组件也包含了许多用法,这些用法都很强大,而下面就来看一下它的表格工具栏部分。

    首先,要用到工具栏必须要先开启工具栏,官方给出的开启方法是在表格渲染时加入 toolbar:true 即可开启,这可还是很简单的。
    在这里插入图片描述
    效果图:
    在这里插入图片描述
    第一个图标是显示,隐藏表格的列。
    第二个图标是导出表格当前页的所有数据。
    第三个图标是打印表格当前页的所有数据。

    有时候开发的过程中并不需要三个图标一起出现,可能是只想要一个图标或者两个图标,那就需要把不需要的图标给隐藏起来。
    这个功能官方也给做得很人性化,不需要再额外写代码,想要实现这个功能只需要直接给表格加上 defaultToolbar: [‘filter’, ‘print’, ‘exports’]

    中括号里的单词代表的图标分别是 显示隐藏列,打印,导出。
    实际应用中想要哪些功能就写哪个单词就可以了。

    例如只需要 显示隐藏列
    在这里插入图片描述
    效果图:
    在这里插入图片描述

    参考layui官方文档

    展开全文
  • 在toolbar开启的状态下,通过配置defaultToolbar: [] 可以取消默认的所有功能,默认开启的是所有...layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/zjjgx/getData'

    在toolbar开启的状态下,通过配置defaultToolbar: [] 可以取消默认的所有功能,默认开启的是所有的defaultToolbar: [ ‘filter’, ‘print’, ‘exports’]

    layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,url:'/zjjgx/getData'
                ,toolbar: '#toolbarDemo' //开启头部工具栏
                ,defaultToolbar: []
                ,title: '资金监管箱'
                ,cols: [
                    [
                        {type: 'radio', fixed: 'left'}
                        ,{field:'', title:'序号', width:50,type:'numbers', fixed: 'left'}
                        ,{field:'djbh', title:'登记编号', width:100,sort:true}
                        ,{field:'xybh', title:'协议编号',event:'xybh', width:100}
                        ,{field:'ywxx', title:'业务细项', width:100}
                        ,{field:'zrf', title:'转让方', width:100}
                        ,{field:'srf', title:'受让方', width:100}
                        ,{field:'zqr', title:'支取人', width:100}
                        ,{field:'fwzl', title:'房屋坐落', width:100}
                        ,{field:'qzhm', title:'权证号码', width:100}
                        ,{field:'htbh', title:'合同编号', width:100,sort:true}
                        ,{field:'dqblr', title:'当前办理人', width:100}
                        ,{field:'bldw', title:'办理单位', width:100}
                        ,{field:'qdrq', title:'签订日期', width:100}
                        ,{field:'sfcx', title:'是否撤销', width:100}
                    ]
                ]
                ,page: true
            });
            //监听行单击事件(双击事件为:rowDouble)
            table.on('tool(test)', function(obj){
                var xybh = obj.data.xybh;
                if (obj.event === 'xybh') {
                    layer.open({
                        title: "资金监管",
                        //调整弹框的大小
                        area: ['1100px', '550px'],
                        shadeClose: false,//点击旁边地方自动关闭
                        //动画
                        anim: 2,
                        //弹出层的基本类型
                        type: 2,
                        //刚才定义的弹窗页面
                        content: '../zjjgx/findZjjgxyByXybh?xybh=' + xybh,
                        //关闭子页面后,刷新原页面
                        end: function () {
                            location.reload();
                        }
                    });
                }
                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
    
                //查阅功能
                if (obj.event === 'searchData'){
                    var searchDjbh = $("#searchDjbh").val(); //登记编号
                    var searchXybh = $("#searchXybh").val(); //协议编号
                    var searchHtbh = $("#searchHtbh").val(); //合同编号
                    //将数据提交到后台
                    $.ajax({
                        url: '../zjjgx/searchData?searchDjbh='+searchDjbh+'&searchXybh='+searchXybh+'&searchHtbh='+searchHtbh,
                        dataType: 'json',
                        success: function (obj) {
                            if (obj.success){
                                location.reload();
                            }else {
                                location.reload();
                            }
                        },
                        error: function () {
                            location.reload();
                        }
                    });
                }
    
                //清空功能
                if (obj.event === 'emptySearch'){
                    $("#searchDjbh").val(""); //登记编号
                    $("#searchXybh").val(""); //协议编号
                    $("#searchHtbh").val(""); //合同编号
                }
    
                //撤销功能
                if (obj.event === 'getCheckData'){
                    layer.confirm('确认撤销吗?', {icon: 3, title:'提示'}, function(){
                        var data = checkStatus.data;
                        var s = JSON.stringify(data);
                        $.ajax({
                            url:'../zjjgx/cxZjjgx',
                            data: {'zjjgx':s},
                            type: 'post',
                            dataType :'json',
                            success: function (obj) {
                                if (obj.success){
                                    layer.alert(obj.msg,'',function () {
                                        location.reload();
                                    });
                                }else {
                                    layer.alert(obj.msg,'',function () {
                                        location.reload();
                                    });
                                }
                            },
                            error: function () {
                                layer.alert("后台出错,请联系管理员",'',function () {
                                    location.reload();
                                });
                            }
                        });
                    });
                }
    
                //资金监管协议添加功能
                if (obj.event === 'zjjgxyAdd'){
                    layer.open({
                        title : "资金监管",
                        //调整弹框的大小
                        area:['1100px','550px'],
                        shadeClose:false,//点击旁边地方自动关闭
                        //动画
                        anim:2,
                        //弹出层的基本类型
                        type: 2,
                        //刚才定义的弹窗页面
                        content: '../zjjgx/zjjgxyAdd',
                        //关闭子页面后,刷新原页面
                        end: function () {
                            location.reload();
                        }
                    });
                }
            });
        });
    

    toolbar: ‘#toolbarDemo’ //开启头部工具栏,是定义在script标签内部的自定义头部栏

    <script type="text/html" id="toolbarDemo">
        <div style="padding-top: 10px">
            &nbsp;&nbsp;
            <label>登记编号</label>
            <input type="text" name="searchDjbh" id="searchDjbh" style="width: 100px">
            &nbsp;&nbsp;
            <label>协议编号</label>
            <input type="text" name="searchXybh" id="searchXybh" style="width: 100px">
            &nbsp;&nbsp;
            <label>合同编号</label>
            <input type="text" name="searchHtbh" id="searchHtbh" style="width: 100px">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="layui-btn layui-btn-sm" lay-event="searchData">查阅</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="emptySearch">清空</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="getCheckData">撤销</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-event="zjjgxyAdd">签订</button>
        </div>
    </script>
    

    效果:
    在这里插入图片描述

    展开全文
  • 记录一下昨天遇到的一个问题,就是我想在表格头部工具栏,增加一个文件上传的接口,用于数据的批量导入,就简单的写了一个按钮,使用upload组件实现了功能,但是奇怪的事情发生了,第一次上传成功之后,页面不刷新...

    背景

    最近使用了layui的前端框架,也在慢慢适应中,好多功能都已经封装得很实用,遇到不会的功能,看看官网的demo的文档,都还是可以解决的,毕竟咱们的模仿能力还是可以的。

    记录一下昨天遇到的一个问题,就是我想在表格的头部工具栏,增加一个文件上传的接口,用于数据的批量导入,就简单的写了一个按钮,使用upload组件实现了功能,但是奇怪的事情发生了,第一次上传成功之后,页面不刷新,再次点击第二次的话,是无法上传文件,向后台发出请求的,最后排查的原因是,按钮上面的事件没有被渲染,导致上传组件无法与指定的按钮进行绑定。

    问题重现

    • 在工具栏声明按钮,控件ID为import
    <script type="text/html" id="headToolbarTpl">
        <input type="button" class="layui-btn layui-btn-sm" id="import" value="导入明细"/>
        <input type="button" class="layui-btn layui-btn-sm" lay-event="download" style="margin-left: 10px" value="下载模板"/>
    </script>
    
    • 调用upload组件,绑定控件按钮
     //指定允许上传的文件类型
            upload.render({
                              elem: '#import'
                              , url: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/importExcel' //改成您自己的上传接口
                              , accept: 'file' //普通文件
                              , acceptMime: '.xls,.xlsx'
                              , done: function (res) {
                                            if (res.code == 400) {
                                                table.reload(tableId);
                                                layer.msg(res.msg, {time: 4000}); 
                                                else {
                                                table.reload(tableId);
                                                bindTableToolbarFunction();
                                                bnyKit.errorMsg(res.msg);
                                            }
                                // Layui的table在reload之后使用ID绑定的按钮失效,需要重新绑定
                                bindTableToolbarFunction();
                                }
                          });
    

    问题解决

    方案一(原始方案,不推荐)

    问题是在进行操作后,没有执行渲染事件,那么好,我在执行的每次动作之后,都重新执行一下渲染就可以。

    • 将渲染方法封装为一个函数
    // Layui的table在reload之后使用ID绑定的按钮失效,需要重新绑定
            function bindTableToolbarFunction() {
                // 绑定新增用户事件
    
                    upload.render({
                                      elem: '#import'
                                      , url: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/importExcel' //改成您自己的上传接口
                                      , accept: 'file' //普通文件
                                      , acceptMime: '.xls,.xlsx'
                                      , done: function (res) {
                                                        if (res.code == 400) {
                                                            table.reload(tableId);
                                                            layer.msg(res.msg, {time: 4000});
                                                        } else {
                                                            table.reload(tableId);
                                                            layer.msg('上传成功');
                                                            layer.msg(res.data, {
                                                                time: 5000, //20s后自动关闭
                                                                btn: ['关闭']
                                                            });
                                                        }
                                        }
                                  });
    
    
            }
    
    • 在每个动作之后,都需要执行该函数,例如
     if (layEvent === 'details') {
    
                    layer.open({
                        type: 2
                        , title: '明细详情'
                        , content: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/details?batchId=' + data.id
                        , maxmin: true
                        , area: area   // 宽高
                        , btn: ['关闭']
                        , yes: function (index, layero) {
                            layer.closeAll();
                        }
                    });
                    bindTableToolbarFunction();
                }
    
    • 我一开始使用了该方式,但是在测试之后发现,有的情况还是不可以,而且如果我在页面添加其他操作的话,都需要是执行渲染函数,虽然已经被封装为函数了,但是还是新操作还是会被污染。

    方案二(推荐使用)

    我们可以沿用layui提供了头部工具栏的功能,只是我需要去避免绑定按钮的失效渲染即可,在这里插入图片描述
    表格的工具栏模板如上,我猜想,每次在进行工具栏渲染的时候,一定是按照toolbarDemo这个id进行的,我的控件id,正式因为渲染才失效的,那么我是不是可以把按钮拿出来,然后进行上传组件的绑定呢,除此之外,lay-event这个控件还是正常使用,只是在lay-event事件处理的时候,再出发我的上传按钮的点击动作。

    • 第一步,将按钮拿到模板外面
    <!--头部工具栏模板-->
    <button type="button" class="layui-btn layui-btn-sm" id="importFile" value="导入明细" style="display: none"/>
    <script type="text/html" id="headToolbarTpl">
        <input type="button" class="layui-btn layui-btn-sm" lay-event="import" style="margin-left: 10px" value="导入明细"/>
        <input type="button" class="layui-btn layui-btn-sm" lay-event="download" style="margin-left: 10px"
               value="下载模板"/>
    </script>
    

    注:由于我在模板中已经加了导入明细的按钮操作,所以我将自己声明的按钮隐藏掉,防止页面重复出现

    • 第二步:绑定生成的按钮事件,即绑定upload组件
            //指定允许上传的文件类型
            upload.render({
                elem: '#importFile'
                              , url: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/importExcel' //改成您自己的上传接口
                              , accept: 'file' //普通文件
                              , acceptMime: '.xls,.xlsx'
                              , done: function (res) {
                    if (res.code == 400) {
                        table.reload(tableId);
                        layer.msg(res.msg, {time: 4000});
                    } else if (res.code == 200) {
                        table.reload(tableId);
                        //bindTableToolbarFunction();
                        bnyKit.sucessMsg(res.msg)
                    } else {
                        table.reload(tableId);
                        //bindTableToolbarFunction();
                        bnyKit.errorMsg(res.msg);
                    }
                    // Layui的table在reload之后使用ID绑定的按钮失效,需要重新绑定
                    //bindTableToolbarFunction();
                }
                          });
    
    • 第三步,将event的时间处理,转到隐藏按钮的点击动作
     case 'import':
                        $("#importFile").click();
                        break;
    

    总结

    网上确实有好多人遇到这个问题,但是试了好多个方案,都不是很理想,其中还有使用table.render中的done函数的,但是也还是不行,遂自己总结一下,避免后面踩坑。

    展开全文
  • 适用情景:为layui的渲染表格添加一个表头可以随右边框移动固定的功能 JQ代码:
  • layui的数据表格头部工具栏中我的下拉菜单的选项无法显示 结果显示 头部工具栏无法正常显示下拉选择框 原因分析: 原因是由于这个class影响的,里面放按钮和其它东西没有影响,这个下拉选择框会出现问题 <...
  • 今天小编就为大家分享一篇layui table动态表头 改变表格头部 重新加载表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 表格: var tableIns = table.render({ elem: "#Lay-pxxq-TrainingNeeds-table", url: layui.setter.apiHost + '/hqDemandConfirm/pageList', where:{confirmStatic:"0"}, toolbar: "#Lay-pxxq-TrainingNeeds-...
  • operation.removeClass().addClass("layui-table-cell");//去掉样式,加上默认单元格样式,单元格的宽度是按内容宽度自适应的 var maxWidth = operation.last().width();//最终列宽取最后一格的宽度 .
  • 头工具栏事件各自的参数: 写在table定义里面,比如: 解析如下: (1)、 (2)、 (3)、 (4)、
  • 1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 ...以上这篇Layui数据表格跳转到指定页的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 在用layui的时候,发现它这个表头工具栏还是很不错,但是在使用过程中,根据官方文档来看,只需要引入 以及选择挂载自定义工具栏 但是我自己已经检查了很多遍,结果顶部工具栏一直不显示,也不知道为什么,结果在...
  • Layui数据表格展开折叠(示例代码)

    千次阅读 2021-06-09 03:46:46
    layuilayui.use([‘jquery‘,‘laydate‘,‘util‘,‘layer‘,‘table‘,‘form‘],function($, laydate, util, layer, table, form) {vartableIns=table.render({elem:‘#tableOut‘,data: [{id:1, name:‘小米‘, ...
  • layui数据表格 demo,静态数据库加载表头不固定 的数据展示方式;
  • Layui表格加载在线图片!!亲测成功!! 自己在做项目的时候,不想把所有的图片都放在工程目录下,因此引用网上的图片在线地址,结果出现了如下情况,图片无法加载,且请求为200正常 其实表格使用后端传来的url地址...
  • layui数据表格一般都是上图右边的按钮来监听某一行数据, 注意点: 需要用toobar 事件监听, 里面选择列表是 靠 lay-filter 字段来选择不同表格
  • layui表格更改某列的背景颜色或者字体颜色 0 2877TSIM2019/6/26 15:29:11区分某个字段不同的情况下,显示成的某列的表格颜色不同做法为在layui表格下layui.use('table', function () 函数里增加done函数具体代码...
  • layui表格单元格添加下拉选择功能

    千次阅读 2021-07-16 14:39:10
    layui表格单元格添加下拉选择功能 1、修改表头 2、更新数据 3、修改样式 代码如下: <style> /*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格cell刚好合适嵌入, ...
  • 基于layui写的一个高级搜索(筛选)功能。 效果图: 是一位萌新,所有写的有点儿乱。(放在上面,供新手们参考,也是自己做一个记录。) 代码如下: <html> <head> <meta ...
  • layui表格要做到清空表头,直接删除table容器,这样就已经实现了清空表头,之后再重新添加table容器。
  • layui表格table固定表头第一行固定显示 代码示例如下: layui.use('table', function(){ $ = layui.jquery; var table = layui.table; table.render({ elem: '#listtable', url: '/admin/getList/', //数据...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 813
精华内容 325
关键字:

layui表格头部