精华内容
下载资源
问答
  • 今天小编就为大家分享一篇对layui数据表格动态cols(字段)动态变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui数据表格动态cols(字段)动态变化 1、代码 <!-- HTML --> <!-- 表格载体 --> <div class="layui-form layui-card-header"> <div class=...

                                                                 Layui数据表格动态cols(字段)动态变化

    1、代码

    <!-- HTML -->
    <!-- 表格载体 -->
    <div class="layui-form layui-card-header">
        <div class="layui-inline">
            <label class="layui-form-label">分组类型</label>
            <div class="layui-input-inline">
                <input type="hidden" name="group_type"/>
                <select multiple="multiple" lay-filter="group_type">
                    <option value="">请选择分组类型</option>
                    <option value="hobby" selected>爱好</option>
                    <option value="age">年龄</option>
                    <option value="date">日期</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="LAY-table-search">
                <i class="layui-icon layui-icon-search"></i>
            </button>
        </div>
    </div>
    <table id="table-id" lay-filter="LAY-table"></table>
    
    //JS
    <script>
        //JS
        layui.use(['table', 'form', 'multiSelect'], function () {
            let table = layui.table,
                form = layui.form;         //表格
    
            let tableObj = table.render({
                elem: '#table-id',   //挂载对象,表ID
                url: '/.../.../...',    //数据来源路径
                cols: [[
                    {field: 'hobby', title: '爱好'},
                    {field: 'come_in', title: '收入'},
                    {field: 'come_out', title: '支出'}
                ]],
                text: { //自定义文本,如空数据时的异常提示等。
                    none: '暂无数据!'
                },
                where:{'target_date':'2020-02'},//查询条件
                page: false, //关闭分页
                parseData: function(res) {  //res 即为原始返回的数据
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.data
                    }
                },
                done(res, curr, count){}
            });
    
            //监听下拉框的值
            let groupArray = ['hobby'];  //默认按爱好分组
            form.on('select(group_type)', function(data) {
                setTimeout(() => {	//选中获取值异常问题
                    let value = data.value;
                    let bool = $(data.othis).find('.layui-this').children('div').hasClass('layui-form-checked');//判断是否勾选
                    let index = $.inArray(value, groupArray);
                    if (bool) { //如果选中;
                        if(index == -1){  //数组没值,
                            groupArray.push(value);   //把值压入数组
                        }
                    } else {    //如果取消选中
                        if(index != -1){  //数组中存在
                            groupArray.splice($.inArray(value, groupArray), 1);   //移除数组指定元素
                        }
                    }
                    $('input[name="group_type"]').val(JSON.stringify(groupArray));
                }, 100);
            })
    
            //监听搜索按钮
            form.on('submit(LAY-table-search)', function(data){
                let field = data.field;
    
                let tableCols = assembleTableCol(groupArray);	//重新定义标题那行
    
                //执行重载
                table.reload('LAY-table', { //通用渲染方式
                    where: field,   //搜索的参数
                    page: {curr: 1}, //重新从第 1 页开始
                    cols: tableCols
                });
                //或
                tableObj.reload({   //方法级渲染
                    where: field,   //搜索的参数
                    page: {curr: 1}, //重新从第 1 页开始
                    cols: tableCols
                });
            });
    
            //重新拼接数组标题行
            function assembleTableCol(groupArray){
                let thisCols = [];  //定义标题空间
                let defaultField = [    //定义通用列
                    {field: 'come_in', title: '收入'},
                    {field: 'come_out', title: '支出'}
                ];
    
                let groupField = {  //hobby,age,date 对应下拉框的值
                    'hobby': {field: 'hobby', title: '爱好'},
                    'age': {field: 'age', title: '年龄'},
                    'date': {field: 'date', align:'center',title: '日期'},
                };
                let length = groupArray.length;
                for (let i=0; i<length; i++){ //追加动态标题
                    let addObj = groupField[groupArray[i]];
                    thisCols.push( addObj );
                }
                let defaultLength = defaultField.length;
                for(let j=0;j<defaultLength;j++){   //追加默认标题
                    thisCols.push( defaultField[j]);
                }
                return [thisCols];  //注意结果为:array[0]=thisCols
            }
    
        });
    </script>

     

    展开全文
  • 如搜索查询时,常会遇到按日期时间段查询,...把表格渲染封装在函数里面,cols_arr是传入的字段数组 function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'p...

    如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论。

    把表格渲染封装在函数里面,cols_arr是传入的字段数组

    function tableRender(cols_arr){
        table.render({
            elem: '#demo'
            , url: 请求地址 //数据接口
            , method: 'post'
            , page: true //开启分页
            , cols: cols_arr
            , id: 'demo'
            , limit: 10
            , limits: [10, 20, 50, 100, 200, 500]
            , done: function (res) {}
        });
    }

    监听搜索提交

    // 搜索
    form.on('submit(demo1)', function (obj) {
        var start_date = obj.field.start_date;
        var end_date = obj.field.end_date;
        if (start_date != '' && end_date != ''){
            var all_date = getAll(start_date, end_date);
            if ( all_date.length>7){
                layer.msg('查询天数不得超过7天', {icon: 2, anim: 6});
                return false;
            }
            window.cols_arr[0] = [];
            window.cols_arr[0][0] = {field:'group_id', title: '群号', align: 'center'};
            all_date.forEach(function(value,i){
                window.cols_arr[0][i+1]=({field: value, title: value, align: 'center'})
            })
        }
        tableRender(window.cols_arr);
        table.reload('demo', {
            page: {
                curr: 1
            },
            where: {
                all_date: all_date
            }
        });
        return false;
    });

    如果只是重载,cols属性不会改变,解决思路:重载前执行一次封装了渲染的函数,也就是tableRender();用全局变量或传参的形式都行

    展开全文
  • Layui数据表格动态cols(字段)动态变化(2) 一、说明:(2)和(1)的不同: 动态列的计算方式不同 (1)用的是 [自动化渲染的重载 ] ;(2)用的是 [方法级渲染的重载 ]。(这篇博客主要是想体现这一点,因为...

                                                           Layui数据表格动态cols(字段)动态变化(2)

    一、说明:(2)和(1)的不同:

    1. 动态列的计算方式不同
    2. (1)用的是 [ 自动化渲染的重载 ] ;(2)用的是 [ 方法级渲染的重载 ]。(这篇博客主要是想体现这一点,因为有的时候(有 操作列 toolbar 的时候)自动化渲染表格列并不能成功,要用方法级渲染才行)

    二、Layer表格重载的API :

        在页面搜索:很多时候,你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求(可任选一种)

    三、相关代码如下所示:

    //表格渲染
    let tableObj = table.render({
        elem: '#LAY-user-table',	//表table标签ID
        url: '/././.',
        where: {type: type},
        cols: [[
            {field: 'id', width: 80, title: 'ID', sort: true},
            {field: 'type', title: '类型'},
            {field: 'source', title: '来源'},
            {field: 'name', title: '姓名'},
            {field: 'age', title: '年龄'},
            {field: 'create_time', title: '创建时间'},
            {title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-oper-admin'}
        ]],
        text: {
            none: '暂无相关数据!'
        },
        page: true,
        parseData: function(res) {
            return {
                code: res.code,
                msg: res.msg,
                count: res.data.count,
                data: res.data.data
            }
        },
        done:function(){
    
        }
    });
    
    //监听搜索
    form.on('submit(LAY-table-search)', function(data){
        let field = data.field;
        field.type = type;
    
        let tableCols = assembleTableCol(field.type);	//重新定义表格列
    
        //执行重载
        /*自动化渲染的重载
        table.reload('LAY-user-table', {
            where: field,
            page: {curr: 1},
            cols: tableCols
        });*/
    
    
        //方法级渲染的重载
        tableObj.reload({
            where: field,
            page: {curr: 1},
            cols: tableCols
        });
    });
    
    //动态处理 表格列
    //如果type=1,则显示[类型、来源]列
    function assembleTableCol(type){
        let startCols = [
            {field: 'id', width: 80, title: 'ID', sort: true}
        ];
    
        let middleCols = [];
        if( type == 1 ){
            middleCols = [
                {field: 'type', title: '类型'},
                {field: 'source', title: '来源'}
            ];
        }
    
        let endCols = [
            {field: 'name', title: '姓名'},
            {field: 'age', title: '年龄'},
            {field: 'create_time', title: '创建时间'},
            {title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-oper-admin'}
        ];
    
        let finallyCols = [];
        if(middleCols){
            finallyCols = startCols.concat(middleCols);
        }
        finallyCols = finallyCols.concat(endCols);
    
        return [finallyCols];
    }

    四、注意

    由于版本不同,可能显示不出我这个Demo的效果。

    我这个 Demo 的版本是 2.4.5;2.5.5就显示不出我这个效果。

    查看Layui版本:alert(layui.v);

    展开全文
  • Layui数据表格

    2020-01-10 10:47:00
    Layui数据表格SpringBoot项目实现Layui数据表格分页、查看和编辑 SpringBoot项目实现Layui数据表格分页、查看和编辑 项目目录: index.html: 使用Layui需要引用Layui的css和js,需要注意的是,Layui的使用依赖...

    SpringBoot项目实现Layui数据表格分页、查看和编辑

    Layui官网:table 数据表格文档 - layui.table
    项目目录:
    在这里插入图片描述
    index.html:
    使用Layui需要引用Layui的css和js,需要注意的是,Layui的使用依赖jQuery,所以还需要引入jQuery,且jQuery的引入要放在Layui.js之前,Layui.js引入放在下面

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
      <link rel="stylesheet" href="../layui/css/layui.css">
      <script  src="../js/jquery-3.3.1.js"></script>
    <style type="text/css">
    </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 src="../layui/layui.js"></script>
    <script src="../js/index.js"></script>
    </body>
    </html>
    

    index.js:

    layui.use(['laypage', 'layer', 'table', 'element'], function() {
    	var laypage = layui.laypage //分页
    	  ,layer = layui.layer //弹层
    	  ,table = layui.table //表格
    	  ,element = layui.element //元素操作
    
    	  //执行一个 table 实例
    	  table.render({
    	    elem: '#demo'
    	    ,height: 420
    	    ,id: 'table'
    	    ,url: '/user/tableData' //数据接口
    	    //,cellMinWidth: 80
    	    ,title: '用户表'
    	    ,page: true //开启分页
    	    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    	    ,totalRow: true //开启合计行
    	    ,cols: [[ //表头
    	       {type: 'checkbox', fixed: 'left'}
    		    ,{field: 'id', title: 'ID',width:80,sort: true}
    		    ,{field: 'name', title: '姓名',width:80,sort: true,totalRowText: '合计:'}
    		    ,{field: 'age', title: '年龄',width:80,sort: true,totalRow: true}
    		    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    	    ]]
    	  });
    	  
    	  //监听头工具栏事件
    	  table.on('toolbar(test)', function(obj){
    	    var checkStatus = table.checkStatus(obj.config.id)
    	    ,data = checkStatus.data; //获取选中的数据
    	    switch(obj.event){
    	      case 'add':
    	        layer.msg('添加');
    	      break;
    	      case 'update':
    	        if(data.length === 0){
    	          layer.msg('请选择一行');
    	        } else if(data.length > 1){
    	          layer.msg('只能同时编辑一个');
    	        } else {
    	          layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
    	        }
    	      break;
    	      case 'delete':
    	        if(data.length === 0){
    	          layer.msg('请选择一行');
    	        } else {
    	          layer.msg('删除');
    	        }
    	      break;
    	    };
    	  });
    	  
    	  //监听行工具事件
    	  table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    	    var data = obj.data //获得当前行数据
    	    ,layEvent = obj.event; //获得 lay-event 对应的值
    	    
    	    var editList=[]; //存放获取到的那条json数据中的value值(不放key)
    	    $.each(data,function(name,value) {//循环遍历json数据
    	        editList.push(value);//将json数据中的value放入数组中(下面的子窗口显示的时候要用到)
    	    });
    	    
    	    if(layEvent === 'detail'){
    	      layer.msg('查看操作');
    	      layer.open({
    	    	  type: 1
    	    	  ,offset: 'auto' //具体配置参考:offset参数项
    	    	  ,content: '<div style="padding: 20px 80px;"><div><div><label>id:</label><span>'+data.id+'</span></div><div><label>姓名:</label><span>'+data.name+'</span></div><div><label>年龄:</label><span>'+data.age+'</span></div></div></div>'
    	    	  ,btn: '关闭全部'
    	    	  ,btnAlign: 'c' //按钮居中
    	    	  ,shade: 0 //不显示遮罩
    	    	  ,yes: function(){
    	    	    layer.closeAll();
    	    	  }
    	    	});
    	    } else if(layEvent === 'del'){
    	      layer.confirm('真的删除行么', function(index){
    	        obj.del(); //删除对应行(tr)的DOM结构
    	        layer.close(index);
    	        //向服务端发送删除指令
    	      });
    	    } else if(layEvent === 'edit'){
    	    	console.log(data);
    	      layer.msg('编辑操作');
    	      layer.open({
    	    	  type: 2 //Page层类型
    	    	  ,area: ['500px', '300px']
    	    	  ,title: '你好,layer。'
    	    	  ,shade: 0.6 //遮罩透明度
    	    	  ,maxmin: true //允许全屏最小化
    	    	  ,anim: 1 //0-6的动画形式,-1不开启
    	    	  ,content: 'userTableEdit.html'
        		  ,success: function(layero, index){
                      var body = layer.getChildFrame('body', index);  
                      var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();  
                      var inputList = body.find("input");//获取到子窗口的所有的input标签
                      for (var i = 0; i < inputList.length; i++ ) { 
                         $(inputList[i]).val(editList[i]); //遍历子窗口的input标签,将之前数组中的值一次放入显示
                      }    
                  }   
    	      }); 
    	    }
    	  });
    })
    

    userTableEdit.html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
      <link rel="stylesheet" href="../layui/css/layui.css">
      <script  src="../js/jquery-3.3.1.js"></script>
    </head>
    <body>
    <form class="layui-form" action="" style="padding:30px 70px 0 0;">
      <div class="layui-form-item">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
          <input type="text" name="id"  required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
          <input type="text" name="name"  required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
          <input type="text" name="age"  required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
        </div>
      </div>
    </form>
    <script src="../layui/layui.js"></script>
    <script src="../js/houtai.js"></script>
    <script>
    //Demo
    layui.use('form', function(){
      var form = layui.form;
      
      //监听提交
      form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
    </script>
    </body>
    </html>
    

    userController.java:

    @Controller
    @RequestMapping("/user")
    public class UserController {
    	
    	@Autowired
    	private UserService userService;
    	
    	/**
    	* 页面跳转
    	*/
    	@RequestMapping("/{page}")
    	public String showPage(@PathVariable String page){
    	return page;
    	}
    	
    	/**
    	 * 表格数据
    	 * @return
    	 */
    	@RequestMapping("/tableData")
    	@ResponseBody
    	public Map<String,Object> tableData(int page,int limit){ //接收当前页码,每页最大数据量
    		System.err.println(page+","+limit);
    		Map<String,Object> map = new HashMap<String,Object>();
    		int count = userService.countUser();
    		List list = userService.selectUserAll();
    		
    		//分页subList数据
    		int length = list.size();
    		int left = limit*(page-1);
    		int right = limit*page;
    		List subList = null;
    		if(length<right){
    			subList = list.subList(left,length);
    		}else{
    			subList = list.subList(left,right);
    		}
    		
    		map.put("code", 0);
    		map.put("msg", "");
    		map.put("count",count);
    		map.put("data", subList);
    		System.err.println("/user/tableData");
    		return map;
    	}
    }
    

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

    展开全文
  • Layui 数据表格导出数据

    千次阅读 2020-01-09 17:57:44
    layui数据表格导出数据 1、使用 table.exportFile(id, data, type) 2、尽管 table 的工具栏内置了数据导出按钮,但有时你可能需要通过方法去导出任意数据,那么可以借助以下方法: 语法:table.exportFile...
  • layui数据表格数据绑定加分页代码 最近使用layui数据表格感觉特别方便,一段代码直接绑定数据加上分页加载数据 直接上代码 layui.use(['table', 'laypage'], function() { var laypage = layui.laypage, ...
  • Layui数据表格的使用

    2019-04-12 19:42:17
    Layui数据表格的使用 记录layui数据表格的使用及遇到的问题 1.部分前端html代码如下 <div class="x-body"> <!-- 定义搜索框 --> <div class="layui-row"> <div class="layui-col-md12 x-...
  • layui数据表格案列

    万次阅读 2019-07-12 11:47:32
    layui数据表格增删改查demo 1.列表页 界面 代码 <div class="demoTable"> 搜索昵称: <div class="layui-input-inline"> <input type="text" id="search_key" class="layui-input" >...
  • Layui数据表格请求添加参数

    千次阅读 2019-12-24 14:34:10
    Layui数据表格请求添加参数,重载时添加参数
  • layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码 加载数据表格 按照layui官方文档示例 HTML部分 &lt;table id="demo" lay-filter="test&...
  • layui数据表格的使用

    2019-07-15 14:21:08
    代码清单 welcom.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">...layui数据表格</title> <link rel="stylesheet" href="css/layui.css"> <sc...
  • layui数据表格渲染

    千次阅读 2019-05-07 21:38:58
    今天第一次使用layui的数据表格,刚开始根本出不来数据,然后问了一下我室友(因为我室友前几天使用过并且也成功了),发现他是直接使用的layui数据表格自带的**“url”** 属性实现的数据绑定,然后自己也试了一下这...
  • layui框架table 数据表格的方法级渲染详解如下所示://js 规范书写var tst=table.render({elem: '#test11',cols: [[ //标题栏{checkbox: true},{field: 'pay_ct_time', title: '创建时间', width: 80},{field: '...
  • layui数据表格与java后台数据交互

    千次阅读 2018-10-07 21:56:33
    layui数据表格与java后台数据交互 &amp;amp;amp;lt;table class=&amp;amp;quot;layui-hide&amp;amp;quot; id=&amp;amp;quot;test&amp;amp;quot; lay-filter=&amp;amp;quot;test&amp...
  • Layui数据表格图片的处理 现在的问题是使用layui数据表格如何插入图片。 如果我们是静态表格可直接用img标签嵌入即可,但如果使用table.render函数渲染表格和就会和普通的字段有所不同。 处理方法如下: cols:[[ {...
  • Layui数据表格的宽高问题

    万次阅读 2018-04-16 20:18:34
    在使用Layui数据表格的时候,如果采用固定数值的话,在不同浏览器里显示会有差异,特别是在不同分辨率设备上。针对以此,把width设置直接去掉,貌似解决了我的显示问题。 之前固定宽高的情况 /*-------table------...
  • layui数据表格怎么传参过去

    千次阅读 2020-05-23 16:56:53
    layui动态数据表格获取数据有时需要传递参数过去,这时候就用到了where: table.render({ elem: '#category', url: '../../category/getCategoryList', where: { type: 2, }, cols: [[{} ]], page
  • layui 数据表格,简单使用

    千次阅读 2018-12-15 16:16:18
    layui数据表格简单使用: 其中关于后台的数据操作都忽略了:其实基本构好前端,提供接口了,后台就一步一步实现即可:我的一般是从controller-&gt;service接口-&gt;service实现-&gt;mapper接口-&gt;...
  • layui 数据表格使用

    2019-10-22 14:18:46
    layui 数据表格 jsp页面 <div class="layui-row" style="padding-top: 10px;"> <table id="litigationTab" lay-filter="litigationTab"></table> </div> <script type="text/...
  • layui数据表格某个字段不显示问题

    千次阅读 2019-07-15 18:47:13
    表格是用layui数据表格的方法渲染方式渲染的 大概这个样子 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器) ,height: 315 //容器高度 ,cols: ...
  • Layui 数据表格合计

    2020-12-19 16:21:58
    Lay-ui数据表格合计实现基础的数据表格合计获取合计数据修改合计数据合计后计算平均值去除小数编辑后重新合计 阅读提示:本人萌新一枚,写此博客仅仅是记录一下最近踩坑,有错漏的请大佬指正。 实现基础的数据表格...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,664
精华内容 1,065
关键字:

layui的数据表格cols