精华内容
下载资源
问答
  • Layui复杂表格

    千次阅读 2019-06-08 01:24:28
    常见的表格只有一行表头的,但我们今天做一个复杂表格,先看看单表头的效果,等一会写完复杂表格再看复杂的表格。 把控制器搭建好了就开始写页面的代码,这里要把layui表格用到的css、js插件拷贝到项目,然后显示...

    开发工具与关键技术:MVC
    作者:文泽钦
    撰写时间:2019年5月3日星期一

    常见的表格只有一行表头的,但我们今天做一个复杂表格,先看看单表头的效果,等一会写完复杂表格再看复杂的表格。
    在这里插入图片描述
    把控制器搭建好了就开始写页面的代码,这里要把layui表格用到的css、js插件拷贝到项目,然后显示所有里,然后引入进来。

    <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script src="~/Plugins/layui/layui.js"></script>
    

    然后给装表格的一个容器,打了这个容器,页面上也是不会有内容显示的。

    <div class="container-fluid">
            @*在超小(手机等移动端)上强制换行并设置边距*@
            <div class="w-100 mb-2 d-inline d-sm-none"></div>
            @*装表格的一个容器*@
            <div class="row">
                <div class="col-12">
                    @* 表格id *@
                    <table id="tabEmployee" lay-filter="tabEmployee"></table>
                </div>
            </div>
        </div>
    

    效果图:
    在这里插入图片描述
    因为我们只是给它一个容器,还没有往容器里面装东西,现在开始往容器里装东西。声明一个变量接收表格数据,声明一个变量用于表格初始化。这里会用到两属性,一个是一行rowspan要占用两行或两行以上的类,一个是合并列colspan,就是一行占用两列或两列以上的类。
    这两个类要咋样用呢,一个表头要占用两行时就用rowspan;表头再表头事就用colspan,colspan后面不用添加专属名称。

    <script>
        var tabEmployee;//声明一个变量放表格数据
        var layer, layuiTable;
      $(function () {
                //加载layui模块
                layui.use(['layer', 'table'], function () {
                    layer = layui.layer,
                    layuiTable = layui.table;
                    //初始化表格
                    tabEmployee = layuiTable.render({
                        elem: '#tabEmployee',//表格id
                        url: "",//路径
                        cols: [[//表头
                            { type: "checkbox", rowspan: "2", fixed: "left" },//多选框,fixed:"left"固定在左边
                            { type: "numbers", rowspan: "2", title: "序号" },
                            { field: "EmployeeNumber", rowspan: "2", title: "编号", align: "center" },
                            { field: "EmployeeName", rowspan: "2", title: "姓名", width: 150, align: "center" },
                            { colspan: "3", title: "信息", align: "center" },
                            { colspan: "2", title: "工作", align: "center" },
                            { field: "Remark", rowspan: "2", title: "备注", align: "center" },
                        ], [
                            //对应{colspan: "3", title: "信息", align: "center"}表头
                            { field: "Phone",title: "电话", align: "center" },
                            { field: "Cellphone",title: "手机", align: "center" },
                            { field: "Address", title: "地址", align: "center" },
                            //{对应colspan: "2", title: "工作", align: "center"}表头
                            { field: "DeoartmentName", title: "部门", align: "center" },
                            { field: "PositionName", title: "职位", align: "center" },
                        ]],
                        page: {
                            limit: 10,//指定每页显示的条数
                            limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                        },
                        data:[],//空数据原
                    });
                });
      });
        </script>
    

    看看效果:
    在这里插入图片描述
    复杂表格初始就这样完成了,最后搞清楚rowspan和colspan这两个类,这复杂表格也就不复杂了。

    展开全文
  • LayUI复杂表格

    2021-01-29 17:11:25
    https://blog.csdn.net/weixin_44540251/article/details/91201668
    展开全文
  • layui复杂表格-行合并

    2020-04-27 12:46:21
    k++) { //这里循环所有要合并的列 var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行 for (var i = 1; i ; i++) { //这里循环表格当前的数据 var tdCurArr = trArr.eq(i).find(...
    var renderTable = function (respData) {
    			table.render({
    				elem: '#table_name',
    				// 分页
    				page: false,
    				limit: 999999,
    				data: respData,
    				toolbar: '#tableListToolbar',
    				// 通过多个数组, 并对每行根据需求设置不同的rowspan和colspan实现表头合并
    				cols: [[],[]],
    				done: function (res, curr, count) {
    					var params = {
    						'params'
    					}
    					'url';
    
    
    					merge(res);
    
    				}
    			});
    		};
    
    		function merge(res) {
    
    			var data = res.data;
    			var mergeIndex = 0;//定位需要添加合并属性的行数
    			var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
    			var columsName = ['farmId', 'farmNmame', 'breed','indate4','sex'];//需要合并的列名称
    			var columsIndex = [0, 1, 2,3,4];//需要合并的列索引值
    
    			for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
    				var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
    				for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
    					var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
    					var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
    
    					if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并
    						mark += 1;
    						tdPreArr.each(function () {//相同列的第一列增加rowspan属性
    							$(this).attr("rowspan", mark);
    						});
    						tdCurArr.each(function () {//当前行隐藏
    							$(this).css("display", "none");
    						});
    					} else {
    						mergeIndex = i;
    						mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
    					}
    				}
    				mergeIndex = 0;
    				mark = 1;
    			}
    		}

    具体思路就是, 通过循环判断每一行的每一列的返回值与上一行的相同列是否相同, 如果相同就进行行合并 rowspan: mark, 然后把当前行的当前列进行隐藏, 如果不相同就就记下当前行的行号, 并把标记mark重置为1

    展开全文
  • Layui插件表格下拉框

    万次阅读 2019-07-06 22:01:00
    使用到layui插件的小伙伴可能都会发现,其实在layui插件表格里边添加下拉框或者input标签文本框都是比较复杂的。首先呢,在layui表格里面添加下拉框,在layui表格中就会出现默认的下拉框样式,而这种样式插件原生...

    开发工具与关键技术: Vs 、Layui插件表格下拉框

    作者:木有窝的鸟~小通

    撰写时间:2019年7月6日

     

      使用到layui插件的小伙伴可能都会发现,其实在layui插件表格里边添加下拉框或者input标签文本框都是比较复杂的。首先呢,在layui表格里面添加下拉框,在layui表格中就会出现默认的下拉框样式,而这种样式插件原生自带,进而出现了两个下拉框。

    1、我们要做的是去除layui本身出现的下拉框,在<link>标签下面或者说在</head>标签前面写一个<style>标签,把layui需要改的样式都覆盖掉。

    上面只是具体的说明使用操作,具体样式属性按自个需求操作。

    2、script样式里边写type值为text/html ,ID自定义,在script标签里面写自定义的select下拉框,如图显示:

    3、实例化表格之后,再声明一个为form参数

        4、简单的给表格数据的某一个字段进行done回调,无论是异步请求数据,还是直接赋值数据,都会触发该回调

     

    Input标签里面的数据回填也是应用到上面的eq,找到指定的数值填写即可。写该方法之前需要注意的是,要写在表格的外面,这个下拉框调用的方法是如下面显示:

    在layui表格里面嵌入下拉框得要注意的是监听单行事件,用layui表格的时候,监听单行事件中的选中行勾选复选框的时候,所嵌套在表格里边的下拉框怎么点击下拉框它都不会出现任何反应,所绑定的数据也不会出现。而具体原因可能是因为在选用下拉框和选中行同时执行造成的影响。我们需要把选中行勾选复选框的代码去除即可,如图显示:

    需要选中指定的一行,那么直接点击复选框小按钮即可,行这样一来,即解决了点击不了下拉框,又能获取行。

    而最终表格插入的下拉框数据回填如图显示:

    展开全文
  • 数据表格接口数据---```json{"code": 0,"msg": "用户信息","count": 5,"data":[{"id": 1,"name": "张三","sex": "女","prov": "河南","city": "郑州市","dist": "金水区"},{"id": 2,"name": "李四","sex": "男",...
  • 第一次导出动态表格复杂表头有点懵逼,一直百度都不符合要求,知道找到一篇文章终于解决我的问题。这边有个简单的文档可以看下:http://excel.wj2015.com/ 以下是我自己总结的解决办法(需下载excel.js文件): 链接...
  • 1 2 3 4 5 复杂表头+select下拉框默认值+单元格合并6 7 8 /*select下拉框显示*/9 td[data-field="qualityStatus"]>div {10 overflow: inherit;11 }12 /*去除行点击、hover背景色*...
  • 注意在tabel加上Layui的 class="layui-table" 昵称 加入时间 签名 省 市 区 石爰 2018-1-5 安徽省 合肥市 蜀山
  • layui区别于那些基于MVVM底层的UI框架,不需要各种前端工具的复杂配置,只需面对浏览器本身。2.table 数据表格在进行代码编译之前,还是需要引入layui框架,在git中下载dist文件夹。table数据表格layui最核心...
  • layui 复杂表头多层表头的表格数据非后台导出excel

    千次阅读 热门讨论 2019-08-28 16:20:38
    用过layui table的都了解,layui表格自带导出功能,只要在属性toolbar里配置即可。 如果嫌toolbar里的导出按钮不够美观,layui也友好的提供了自行定义按钮后调用导出页面数据的方法,详见:[官方文档] `遗憾的`是...
  • 翻了 整个 layui文档 也找不到解决方法 最后百度找到了 还是 csdn的大佬比较多 https://blog.csdn.net/qq_33966519/article/details/103618439 官网文档都没有这个属性 加上之后确实解决了 我的问题 colGroup:...
  • Layui表格-复杂表头

    千次阅读 2019-07-07 19:59:34
    Layui表格复杂表头:常用的两极表头 和通常表格不一样的是加多两个属性: 联系人 员工信息 rowspan="2"这个属性代表的是联系人这个表头占用了两行表格, colspan="3"这个属性代表的是员工信息这是一个大表头,在...
  • 其实layui单元格合并并不是什么难得东西,网上也能找到很多.之前做上一个项目得时候做了一个很复杂得表中表合并,当时忘了记录,现在我又用到了,唉,很烦,又花了一会的时间重新写合并.而且这次的需求没有上次那么变态,...
  • 一、概述最近计划从数据库开始,将整个数据处理流程...我是在职能部门做数据分析,所以也只是为部门同事和领导服务,如果是做面向用户的那种数据库应该会复杂很多,数据量也不在一个层级,肯定不能像我这样做。为什...
  • LayUI复杂表头多一列

    2020-08-14 02:12:28
    博主作为一名后端开发中前端技术还说得过去的程序猿,在今天工作中突然遇到这么一个关于前端框架 Layui 的比较奇怪的问题:当我在通过 Layui 的数据表格功能,构建一个具有复杂表头的数据表格的时候,表格内容的最...
  • 最近需要完成一个layui复杂表头的前端导出的功能,尝试过js-xlsx,但普通版不能设置表格样式,也尝试过各位大佬魔改版,但似乎都未能解决样式问题,遗憾放弃,最终在尝试数次后在从ayui-excel官方下找到了最终解决...
  • 传统的文件“传输-保存-编辑-传输”虽然也能推动工作进行,但随着事项增多、目的更复杂,收集的数据七零八落,无法高效地编织成为信息。那么,如何用更低门槛和更简单的工具,来对工作事项进行记录和协同管理呢?继...
  • 使用layui动态表格时,用到复杂表头,如果colspan=1时,会出现一例空白列,根本问题应该是layui复杂表头时, colspan 必须大于1,解决办法是,修改colspan为2,然后添加一列空白列{title: '', field:'', hide: ...
  • 今天在写layui的表格时,遇到一些问题,直接贴图: 对齐的图片: 无法对齐的: 源码这里是这样的: 在本该是检测编号的列,变成了状态status,...大概知道是layui复杂表头计算时,出了问题,具体是什么问题呢? ...

空空如也

空空如也

1 2 3 4 5
收藏数 84
精华内容 33
关键字:

layui复杂表格