精华内容
下载资源
问答
  • (可用于字段说明,建议先去官方网站查看)实现效果就是鼠标放到指定字段,显示提示说明,如兑换比例说明。。。。用的到的推荐使用
  • 首先是在这个是针对字段的,所以给cols新增一个配置项,来...所以新增了一个配置项filter: true/false/null然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件这个是主要的代码篇幅太长没办法全显...

    首先是在这个是针对字段的,所以给cols新增一个配置项,来决定哪些列需要有过滤的功能,一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求,比如例子中的性别列还有职业列,id列这些的意义不大,当然也不是绝对的,有的就是需要呢。

    所以新增了一个配置项filter: true/false/null

    然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件

    这个是主要的代码篇幅太长没办法全显示,简单介绍一下,就是利用table.eachCols去遍历表头,把需要添加图标的给加上图标就好了,注意这时候实际是不会生成我们后面点击看到的里面的复选的内容的。

    实际这些都是靠后面的点击事件再做处理就好,在点击的事件中去遍历得到当前这一列的值的一个集合。

    注意!这里是我们最终看到的内容的集合,而不是针对数据的,因为字段有templet可以进行转换,所以即使背后的值可能不一样最终显示出来的也有可能是一样的,这里应该是归纳为相同的一类。

    然后点击这个筛选的时候都做了什么呢?

    除了上面说了得到一个集合之外,就是利用这个集合作为一个table的数据,并且根据逻辑得到是否初始选中,然后layer去弹出一个弹框把表格渲染到里面去。

    这里有一个关键的就是是否要多列筛选的支持,就是说可以先赛选一个列,然后点击另外一个列在前面筛选的前提下筛选这个列,目前是直接否决了这个需求,因为太复杂了而且很难解释。

    因为他们之间都是会相互影响的,这边的列隐藏之后对于那边的列它可能会出现部分分类它的数据部分是显示的部分是隐藏的。

    这时候怎么办?

    唯一一个比较严谨的就是新增一种状态叫半选状态,但是实际应用场景应该遇到的不大,要实现却是相当费劲的,所以干脆不支持,这个在excel中好像也是这么个限定,不知道有没有记错。

    最后是监听这个表格的复选事件,背后的实际的逻辑就是把对应的tr给显示或者隐藏。然后点击打开这个过滤的选项的时候也是根据table内部的tr的显示隐藏情况来决定是默认选中还是未选中。

    然后因为图标在layui提供的里面找不到合适的,新增了一个样式文件来支持,注意加入:

    存在问题:细心的应该会看到字段筛选之后下面的统计列没有更新,实际这个是不对的,筛选之后部分列不显示了,那么对应的统计应该是我们看到的列的统计,这个可以自己考虑下如何处理。

    我的思路是封装出来一个针对表格统计的方法,可以对数据进行计算然后更新到对应的dom节点上,原始的table提供的统计最大的作用就是生成一个固定在下方的容器节点。

    至于里面的内容实际是不要紧的,很多小伙伴会问layui能不能提供统计行的数据是后台返回的支持之类的问题,实际这些都可以在上面提到的这个封装方法里面去处理,也可以变得很自由,不仅仅是求和,还可以是各种各样的计算之类的,但是这个不是这个帖子的重点,后面再实现。

    测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

    gitee项目: https://gitee.com/sun_zoro/layuiTablePlug

    推荐:layui框架快速入门

    展开全文
  • layui自带的excel导出不兼容ie,所以需要...在toolbar里增加一个导出按钮 也可以在右边的导出图标重写,在table.render 里记得把 toolbar 加进去 <script type="text/html" id="toolbarDemo"> <div class=

    layui自带的excel导出不兼容ie,所以需要自己配置一些东西。
    参考:https://fly.layui.com/jie/51262/
    首先下载 layui_exts 下载地址
    下载之后将 layui_exts 引入layui 的目录
    在这里插入图片描述
    在toolbar里增加一个导出按钮 也可以在右边的导出图标重写,在table.render 里记得把 toolbar 加进去

    在这里插入图片描述

     <script type="text/html" id="toolbarDemo">
         <div class="layui-btn-container">
             <button class="layui-btn layui-btn-sm" id="getCheckData" lay-event="getCheckData" hidden="hidden" style="display:none">
                 保存
             </button>
             <span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="table_export">导出</span>
         </div>
     </script>
    

    layui 配置,引入excel.js

      layui.config({
            base: '../../Content/layui/layui_exts/'
        })
        //同时加载 excel
        
    
    

    在这里插入图片描述
    这样就已经把 excel.js 引入进来了
    全都是被包装好的,所以就直接拿过来用就好了
    监听 toolbar “导出”按钮
    这里的问题是 IE 浏览器不支持 Array.from() ,所以需要修改一下
    Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。比如像这里的DOM 对象

                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'table_export':
                            exportFile('test');
                            break;
                    }
                });
                
                 function exportFile(id) {
                    //根据传入tableID获取表头
                    var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
                    var htrs = unique(headers.querySelectorAll('tr'));
       
                    var titles = {};
                    for (var j = 0; j < htrs.length; j++) {
                        var hths = unique(htrs[j].querySelectorAll("th"));
                        for (var i = 0; i < hths.length; i++) {
                            var clazz = hths[i].getAttributeNode('class').value;
                            if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
                                //排除居左、具有、隐藏字段
                                //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                                titles['data-field' + i] = hths[i].innerText;
                            }
                        }
                    }
                    //根据传入tableID获取table内容
                    var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
                    var btrs = unique(bodys.querySelectorAll("tr"))
                    var bodysArr = new Array();
                    for (var j = 0; j < btrs.length; j++) {
                        var contents = {};
                        var btds = unique(btrs[j].querySelectorAll("td"));
                        for (var i = 0; i < btds.length; i++) {
                            for (var key in titles) {
                                //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                                var field = 'data-field' + i;
                                if (field === key) {
                                    //根据表头字段获取table内容字段
                                    contents[field] = btds[i].innerText;
                                }
                            }
                        }
                        bodysArr.push(contents)
                    }
                    //将标题行置顶添加到数组
                    bodysArr.unshift(titles);
                    //导出excel
                    excel.exportExcel({
                        sheet1: bodysArr
                    }, '用户表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
                }
                   function unique(arr) {
                    for (var i = 0; i < arr.length; i++) {
                        for (var j = i + 1; j < arr.length; j++) {
                            if (arr[i] == arr[j]) {         //第一个等同于第二个,splice方法删除第二个
                                arr.splice(j, 1);
                                j--;
                            }
                        }
                    }
                    return arr;
                }
    
    

    经测试,IE 浏览器 和 Google Chrome 能正常导出 excel

    展开全文
  • 添加图标并绑定事件 第二步: image.png 使用监听行工具事件拿到obj里面的tr对象 第三步: image.png 根据当前this对象给父级tr加一个统计tr并在当前位置之后 总结 image.png LoinsInsertA...
    image.png

    列表横向滚动也能自适应根据截图操作,首页有联系方式

    第一步:
    image.png

    添加图标并绑定事件

    第二步:
    image.png

    使用监听行工具事件拿到obj里面的tr对象
    第三步:
    image.png

    根据当前this对象给父级tr加一个统计tr并在当前位置之后

    总结


    image.png
    LoinsInsertAfter(newElement, targetElement) {
            var parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }
        LoinsContent(event, newNo, $, obj) { // event 当前this指向对象,newNo展示的对象,$,jquery,obj  行监听状态的obj对象
            if ($(event)[0].classList.value.indexOf('layui-icon-plus-square') > -1) {
                $(event)[0].classList.add('layui-icon-minus-square');
                $(event)[0].classList.remove('layui-icon-plus-square');
                var oTest = $(event).parent().parent().parent();
                var newNode = document.createElement("tr");
                newNode.setAttribute('loinsContent', $(obj.tr).attr('data-index'))
                    // var reforeNode = $(event).parent().parent().parent();`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
                    // var _html = `<td colspan=${cols.length+1}><div>40614124728974281479247982478924789247902740189247829749827</div></td>`
                newNode.innerHTML = newNo;
                new Utils().LoinsInsertAfter(newNode, oTest[0]);
            } else {
                $(event)[0].classList.add('layui-icon-plus-square');
                $(event)[0].classList.remove('layui-icon-minus-square');
                $(event).parent().parent().parent().parent().find('tr[loinscontent="' + $(obj.tr).attr('data-index') + '"]').remove();
            }
        }

    根据实际项目修改,这只是个思路
    demo:https://libai-icon.github.io/views/tilAdmin/index.html#/test/contentTable

    展开全文
  • layui怎么添加icon图标?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一...

    layui怎么添加icon图标?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

    layui怎么添加icon图标?

    1、登录官方的图标库如阿里的矢量图标库http://iconfont.cn

    通过添加到购物车,然后添加到项目,可以看到自己项目中用到的图标:

    2、点击下载至本地:

    下载下的内容截图如下:

    将文件拷贝到你所要写的项目中,如你想在你的页面中引入新下载下来的图标,你可以这样操作:

    图标引入方式:

    2.1. 通过Unicode 方式引入

    引用的图标

    快捷的方法拷贝,操作如图所示:

    然后在使用代码的地方点击粘帖,就拷贝到图标的值类似:

    2.2 通过FontClass 引用:

    如我上面红色标注的图标的引用,在html 书写如下:

    更多web前端知识,请查阅 HTML中文网 !!

    展开全文
  • 生成表格 function generateTableDataT(elem, ctx, url, where, col) { /* , defaultToolbar: [{ title: '导入' //标题 , id: 'importK' ... , icon: 'layui-icon-tips' //图标类名 }, { title: '导出'
  • 生成表格function generateTableDataT(elem, ctx, url, where, col) {/* , defaultToolbar: [{title: '导入' //标题, id: 'importK', layEvent: '', icon: 'layui-icon-tips' //图标类名}, {title: '导出' //标题, ...
  • layuitable默认表头工具栏右边有3个操作,分别是过滤字段、导出excel、打印功能。在js中代码添加toolbar即可实现上面的效果:table.render({elem:‘#demo‘,height:420,url:‘/demo/table/user/‘ //数据接口,...
  • layui.config({base:"${ctx}/static/js/"}).use([‘form‘, ‘layer‘, ‘jquery‘, ‘common‘,‘element‘, ‘table‘, ‘laytpl‘], function() {$=layui.$;var $ =layui.$,form=layui.form,common=layui.common,...
  • image.png列表横向滚动也能自适应根据截图操作,首页有联系方式第一步:image.png添加图标并绑定事件第二步:image.png使用监听行工具事件拿到obj里面的tr对象第三步:image.png根据当前this对象给父级tr加一个统计...
  • 然后点击显示下拉图标的时候会显示出更多的内容,但是跟普通的td不同的是按钮是显示出来了。但是点击无法触发原先添加的tool监听,这就尴尬了,只能手动的拖拽一下列宽显示出其他的按钮然后在点击,或者应该在一开始...
  • treetable-lay实现layui的树形表格treeTable1.简介在layui数据表格之上进行扩展实现。还有一个BOM表结构的树形表格,树形表格2,欢迎查看。2.使用方法2.1.引入模块下载module/treetable-lay整个文件夹,放在你的项目...
  • layui.table的总结

    2020-06-23 16:01:23
    layui.table 1.创建一个table实例,<table id ="demo1>,然后通过table.render()方法指定该容器。且该方式是方法渲染。 2. col: (1)方法渲染:表头参数在数组里 (2)自动渲染:表头参数在标签里 templet: 对...
  • 解决办法:打印栏提示GET请求出错,去table的css或者js找对应图标路径是否正确 发现css中路径报错,修改路径 效果: 后端返回json数据,前端显示接口错误 如图 这种情况前端url接口路径正确的话,一般是后端返回...
  • 徐工150旋挖钻机添加微:yywyyc 认识旋挖机仪表上的图标是一个合格的旋挖机操作工人需要了解的几乎技能。有些厂家(特别是美国制造的旋挖机)的部件里没有汉字标志,认识很多图标才能分清配件类型,另一方面,准确了解...
  • 品牌宣传、产品推广,覆盖全国,日曝光量千万+,7500+公众号广告招商进行中,点击进入了解详情用了5年苹果手机,才知道这个小汽车图标是什么意思,真是涨知识了苹果手机在国内市场一直深受用户的喜爱,不止是因为iOS...
  • Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法 LayUi搜索时,如何只刷新表格内容,其他内容不变? ZTree工具类汇总,包括:新增、编辑和删除节点,并提交后台 LayUi的动态表格Table...
  • LayUi

    2020-05-07 14:10:38
    1.layui 图标的使用 第一步:引入文件 第二步:需要一个容器,例如DIV,TABLE,UL,并添加样式。  //第一种方式 //第二种方式 &#xe68f; //显示图标的字符 //将图标字符添加为input的value 查看样式:...
  • 首先是在这个是针对字段的,所以给cols新增一个配置项,来...所以新增了一个配置项filter: true/false/null然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件这个是主要的代码篇幅太长没办法全显...
  • Layui

    2020-09-27 17:58:29
    一,下载 二,下载文件说明 CSS样式 font字体 image图片 lay (modules)对象的内置模块 layui.all.js 包含了...layui.use([“table”,“layer”,“laydate”,“form”].funtion(){}) 二,图标 图标 按钮 导航 ...
  • 首先是在这个是针对字段的,所以给cols新增一个配置项,来...所以新增了一个配置项filter: true/false/null然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件这个是主要的代码篇幅太长没办法全显...
  • 如果表头过长,会出现超出显示三个省略号,然后把排序图标挤... $('.layui-table-header tr th').each(function(i,ths){ $(this).find('span:first').attr('title',$(this).find('span:first').text()); // 划过显示 i
  • 如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下 解决办法就是给图标加定位,过长的时候加上 .show-sort{ position: absolute; right: 7px;... $('.layui-table-heade...
  • 基于X-admin2.2的后台管理系统登录实现Spring Boot+JPA微服务中数据更新问题(update)Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法LayUi搜索时,如何只刷新表格内容,其他内容不变?...
  • table.render 中增加 done:function () { layer.close(index) //加载完数据 } 详细代码如下: &amp;... layui.use(['layer','table','form'],function () { var layer = layui.layer; ...

空空如也

空空如也

1 2 3
收藏数 53
精华内容 21
关键字:

layuitable图标