精华内容
下载资源
问答
  • 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函数的,但是也还是不行,遂自己总结一下,避免后面踩坑。

    展开全文
  • 再纠结是用VUE实现还是用layui实现好,在最后挣扎下,还是选择了用layui。最后加上从各大神的demo中得到的灵感。在这里记录一下,希望可以帮助到有需要的人啦~移动端展示效果如下:![]()1 23 layui.use('table', ...

    刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好,在最后挣扎下,还是选择了用layui。最后加上从各大神的demo中得到的灵感。在这里记录一下,希望可以帮助到有需要的人啦~

    移动端展示效果如下:

    ![]()

    1

    2

    3 layui.use('table', function(){

    4 var table = layui.table;

    5 //第一个实例

    6 table.render({

    7 elem: '#demo'

    8 ,height:document.body.offsetHeight

    9 ,url: './workStatu.json' //数据接口

    10 ,cols: [[ //表头

    11 {field: 'name', title: '第13周', width:100,fixed: 'left',align:'center'}

    12 ,{field: 'vlcc', title: '周一(3月25日)', width:115,align:'center'}

    13 ,{field: 'suezmax', title: '周一(3月25日)', width:115,align:'center'}

    14 ,{field: 'aframax', title: '周一(3月25日)', width:115,align:'center'}

    15 ,{field: 'panamax', title: '周一(3月25日)', width:119,align:'center'}

    16 ,{field: 'crudeoilmr', title: '周一(3月25日)', width:115,align:'center'}

    17 ]]

    18 ,done:function(res,curr,count){

    19 colSpan()

    20 }

    21 });

    22 });

    23

    24

    25

    26 function colSpan(){

    27 var tab = document.querySelector("div .layui-table-main .layui-table");//获取目标tabel

    28 var maxRow = 6, val, count, start;

    29 count = 1;

    30 val = "";

    31 for(var i = 0;i

    32 for(var col = maxRow - 1; col >= 1; col--){ //遍历每一行的每一个td

    33 if(val == tab.rows[i].cells[col].innerText){ //判断前一个td和后一个td是否相同

    34 if(tab.rows[i].cells[col].innerText.length>=4){ //判断td的值的长度是否大于4,因为这里的需求是长度大于4有相同的才合并

    35 count++;

    36 tab.rows[i].cells[col].colSpan = count;

    37 for(var j = 1;j

    38 tab.rows[i].cells[j+col].style.display = "none";//相邻的有相同的值,第一个设置colspan,后面的影藏

    39 }

    40 }

    41 }else{

    42 if(count>1){

    43 count = 1;

    44 }

    45 val = tab.rows[i].cells[col].innerText;

    46 }

    47 }

    48 }

    49 }

    50

    51

    展开全文
  • 在用layui的时候,发现它这个表头工具栏还是很不错,但是在使用过程中,根据官方文档来看,只需要引入 以及选择挂载自定义工具栏 但是我自己已经检查了很多遍,结果顶部工具栏一直不显示,也不知道为什么,结果在...
  • layui表格实现多选表格行批量删除

    千次阅读 2020-10-11 20:21:01
    首先这种方法要用layui数据表格中的“开启表格头部工具栏区域”功能,HTML代码如下 js代码如下(layui渲染表格) 删除所选js方法 说一下整体思路:首先一个很普通的渲染表格,只是在表头中需要放一个隐藏列,用来...
  • <div class="paramltem-right">...--表格头部工具条--> <script type="text/html" id="toolbarDemo-right"> <div class="layui-btn-container"> <button type="button" class="layui-btn"..
  • LayUI头部工具栏

    千次阅读 2019-06-27 16:13:54
    layUI总如何显示头部工具栏 只需要在原始表格中加入如下代码即可 toolbar: ‘#toolbar0’, 加入之后的代码为这样,其中,#toolbar0是自定义的js代码块儿,如果无此js代码块儿,则默认显示layUI自带的头部按钮 ...
  • Layui表格的布尔值处理

    千次阅读 2019-06-09 14:53:10
    如果你还不知道该怎么转化layui表格渲染出来的数据,那么我的这篇文章可以帮到你。我就举一个转化布尔值的例子,它的转化是不分类型的,它只是改变数据的文本值不改变数据的类型,所以它是通用的。我就举一个转化...
  • layui表格日常使用

    2020-06-02 14:50:24
    1.3.1 监听头部工具栏的事件 1.3.2监听复选框的表格 1.3.3监听单元格编辑 1.3.4监听行单击事件 1.3.5监听行双击事件 1.3.6监听行工具事件 1.4相关方法 1.4.1获取选中行的值 1.4.2表格重载 1.数据表格...
  • layui数据表格一般都是上图右边的按钮来监听某一行数据, 注意点: 需要用toobar 事件监听, 里面选择列表是 靠 lay-filter 字段来选择不同表格
  • 但是在layui表格头部的工具栏是采用的动态渲染,这里贴上一段代码 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay...
  • Layui开启头部工具栏遇到的问题

    千次阅读 2020-06-14 13:58:13
    Layui初始化渲染表格的方式有三种:①方法渲染②自动渲染③转换静态表格 一、方法渲染 优点:可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显 //写在html中 <table ...
  • 今天小编就为大家分享一篇layui table动态表头 改变表格头部 重新加载表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 改变头部原理:删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈...
  • 改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,...
  • Thinkphp+layui数据表格

    2020-06-23 10:28:10
    利用layui数据表格实现异步获取...必须将后台数据转化为json数据才能被layui表格接受。 以下是我的代码 html: <table id="test" lay-filter="test" lay-data="{id: 'test'}" ></table> //头部工.
  • 第一次写的layui表格,总结一下。 Layui数据表格官方文档地址 首先是效果图 点击头部工具栏可以添加和批量选取删除 添加 批量选取删除 行内的工具栏可以点击查看文档 编辑 删除 查看文档:点击以后跳转到另外一...
  • 问题出在这个属性,解决办法font-size给个值就行了 原始是font-size:0所以什么都输入不进去 //input继承父级的字体大小 font-size: inherit; 通过查看他的父级属性确实设置 font-size:0 总结一下input什么情况不...
  • 解决步骤:1、编写表格头部内容信息项名称信息项编码信息项类型信息项长度是否为空显示序号是否共享共享方式是否公开公开方式操作2、编写动态生成数据行的JS代码,使用拼接HTML方式,具体逻辑可参考代码。...

空空如也

空空如也

1 2 3 4
收藏数 69
精华内容 27
关键字:

layui表格头部