精华内容
下载资源
问答
  • layui数据表格筛选或搜索(reload)刷新两遍的问题 今天我又遇到了一个问题,layui数据表格reload时刷新两遍的问题。 原因:由于筛选器使用的是 form ,因此如果使用 button type=“submit” 或者<input type=...

    layui数据表格筛选或搜索(reload)刷新两遍的问题

    今天我又遇到了一个问题,layui的数据表格reload时刷新两遍的问题。
    效果图

    原因:由于筛选器使用的是 form ,因此如果使用 button type=“submit” 或者<input type=“submit” 会刷新页面提交表单。layui自带的reload函数会按你想的那样刷新,这是第一遍,而form表单的提交会进行第二遍刷新,从而将你筛选的数据刷没了。

    解决方法:把button type="submit"等改为不提交的某种东西,比如<a之类的
    代码如下:
    这个会刷新两遍:

    <button class="layui-btn layuiadmin-btn-list" data-type="reload">搜索</button>
    

    这个不会再次刷新:

    <a class="layui-btn" lay-submit lay-filter="formDemo">搜索</a>
    
    展开全文
  • layui表格筛选查询

    千次阅读 2020-05-25 18:02:29
    form class="layui-form" id="searchForm" οnsubmit="return false"> <div class="layui-inline"> <div class="layui-form-item" style="margin:0"> <label class="layui-form-label">机构...

    <form class="layui-form" id="searchForm" οnsubmit="return false">
      <div class="layui-inline">
        <label class="layui-form-label">基地名称</label>
        <div class="layui-input-inline">
            <input type="text" name="orgName" autocomplete="off" class="layui-input" id="orgName">
        </div>
        <button class="layui-btn search-btn inline-block"  lay-filter  id="btnSearch">筛选</button>
      </div>
    </form>

    <table id="manageList" class="artist-list" lay-filter="manageList"></table>

    layui.use(['table', 'upload', 'laydate'], function(){
        var table = layui.table;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var selectData = "";//选择的行
        table.render({ 
           elem: '#manageList' , 
           url: 'loadList' , 
           method: 'POST' , 
           page: true, //-------开启分页
           cols: []
        })
       //查询按钮
       $('#btnSearch').click(function () {
         table.reload('manageList', {
            where : {
               orgName: $("#orgName").val(),
             }
         });
      });


      //或者

    var $ = layui.$, active = {
        reload:function(){
            if(1){
                table.reload('manageList', {
                        where: {
                               orgName: $("#orgName").val(),
                        }//这里传参  向后台
                        , url: '/evaluation/search'//后台做模糊搜索接口路径
                        , method: 'post'
                        , page:{
                            curr :0
                        }
                    });
            }
        }
    };

      //查询按钮
      $('#btnSearch').on('click', function(){
        var type = 'reload';
        active[type] ? active[type].call(this) : '';
      });
    });  

    展开全文
  • Layui表格自带筛选列的功能,但是这个筛选列会随着页面的刷新重置,想了一个方法解决这个问题,利用到了layui自带的本地存储。 //初始化表格 initTable(){ var cols = layui.data('cols').tableName;//从存储中获取...

    Layui表格自带筛选列的功能,但是这个筛选列会随着页面的刷新重置,想了一个方法解决这个问题,利用到了layui自带的本地存储。

    //初始化表格
    initTable(){
    	var cols = layui.data('cols').tableName;//从存储中获取列记录
    	if(cols==undefined)
    	{
    		{ field: '', title: '', type: 'checkbox', width: 80 },
            { field: 'Id', title: 'ID', hide: true, width: 80 },
    	}
    	table.render({
    		elem:'#id',
    		id:'id',
    		toolbar:'#toolbar',
    		cols[cols]
    	})
    }
    //工具栏事件监听
    table.on('toolbar(toolbar)',function(obj){
    	switch(obj.event){
    		case 'LAYTABLE_COLS'://筛选列点击事件
    			setCols(obj);
    			break;
    	}
    })
    //保存筛选列
    function setCols(obj) {
    	//点击筛选列面板里checkbox时保存
        layui.$(".layui-form-checkbox").click(function () {
            var cols = obj.config.cols[0];//这里获取的是一个对象数组,保存了表格渲染时配置的列
            layui.data('cols', {
                key: obj.config.id,
                value: cols
            })
        })
    }
    
    展开全文
  • 某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就是会把表格中隐藏的列...

    某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就是会把表格中隐藏的列也给显示出来,如图
    在这里插入图片描述
    列名为ID的很明显我已经设置成了hide,效果图(表格)中不会显示这一列,而筛选中有出现了这一列,这样在筛选中如果把ID给勾上了,ID就会显示出来,那我们前面设置的 hide:true 就没有任何意义了,后来在群里面交流了一波,解决了这个问题,就是不用 hide:true 这个属性,直接拿这一行的所有的数据,也能达到目的,举个例子:
    在这里插入图片描述查看详情(按钮或者链接(A标签),我这里是按钮 ),

    {
    	title: '操作',
    	width: 120,
    	fixed: 'right',
    	align: 'center',
    	templet : function (cell) {
    		//这里的cell可以拿到当前行的所有数据
    		var id = parseInt(cell.id);
    		return '<div><a class="layui-btn layui-btn-xs" lay-event="chakan" style="background-color:#009688">查看详情</a></div>'
    	}
    },
    

    一般来说会传一个ID,只需要监听图中的查看按钮就可以了

    //监听按钮事件
    table.on('toolbar(table)', function(obj){
    	var data = obj.data;
    	//获得 lay-event 对应的值
    	var layEvent = obj.event; 
    	//获得ID
    	var id = data.id;
    	
    	//这里可以用if判断,也可以用swith,效果一样
    	if(layEvent === 'chakan'){ //查看
    		window.open('${base}/XXX/xxx?ID'+id,'_self');
    		return;
    	}
    
    	switch (obj.event) {
    		case 'chakan':			//查看
    			window.open('${base}/XXX/xxx?ID'+id,'_self');
    			break;
    	}
    })
    
    //好像监听事件代码写上下这两种都可以监听到
    
    //监听按钮事件
    table.on('tool(table)',function (obj) {
    	
    })
    

    这样查看功能就实现了,且筛选也不会出现隐藏的字段了

    展开全文
  • //表格初始化以及重载函数 var tableInit = function () { layui.use('table', function () { window.table = layui.table; //展示已知数据 window.table.render({ ...
  • html代码 &lt;div class="wrap-container clearfix"&gt; &lt;div class="column-content-detail"&gt; &lt;...layui-form"...layui-form-item"
  • 本例利用layui自带的本地储存进行筛选列的数据保存,以达到刷新页面不会重置筛选列的效果。 只需要改变引入路径就可以完全运行起来的项目. <!DOCTYPE html> <html> <head> <meta charset...
  • 开源数据工具 OpenRefine 这是一款高人气数据分析工具,支持数据清洗,支持将数据从一种格式转换为另一种格式,适用于各类与分析相关的任务,这意味着即使大家拥有多种不同数据类型及名称,这款工具亦能够利用...
  • LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例 做出数据表格 示例根据官网表格展示 在layui官网 数据表格示例中 https://www.layui.com/demo/ 修改部分内容 例如表格上方需要...
  • 保存layui表格里input标签的数据

    千次阅读 2019-07-27 15:07:17
    保存layui表格里input标签的数据 上次写到了在layui表格里面加入input标签, 并且设置input标签的类型为时间格式,使数据顺序整齐排列在表格里,并且可以在layui表格里同时对多条数据进行编辑。 那么,现在,问题又...
  • layui表格导出全部数据(比如:导出筛选结果) 的分享,亲测成功 众所周知,layui后台数据表格的导出功能只能导出首页的数据,并不能导出所有的数据, 比方说,总的数据有1000条,按"张三"查找,符合条件的有200条,...
  • 主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • layui 表格在点表头排序时数据错乱

    千次阅读 2019-07-12 18:27:40
    layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和reload的时候执行 解决办法: ...
  • 不是操作骚 也不是组件不够完美 总会遇到这样的需求,记录一下 分析 有点坑就是全选 返选 obj.data 是空的 那就只能初始化的时候把数据带进去 取了这么多ID 怎么用? ...
  • //加载页面数据 table .render({ id : 'fromList', elem : '#fromList', url : ctx + '/from/getFromList' //数据接口 , limit : 10//每页默认数 , limits : [ 10, 20, 30, 40 ], cols : [ [ //...
  • layui 流加载筛选数据不显示 可以这么做 <div class="commodity"> <ul id="LAY_demo1"> </ul> </div> function getdata(status=1){ //关键代码 把容器下的div移除掉就行了 $...
  • //加载表格数据 function init() { $.get({ url: "export.json" , data: { "Action": "" }, cache: false, success: function (data) { dataList = eval(data); d = table.render({ elem: '#score'//获取...
  • Layui数据表格

    2021-06-19 08:08:36
    Layui数据表格 实现功能: 1.table表格 2在table表格中动态添加数据 3可以导出与打印 需要:layui框架, 自行创建数据库; 网页效果: 代码: <linkhref="~/content/bootstrap-4.5.0-dist/css/bootstrap....
  • Layui表格构建

    2020-08-18 15:16:15
    Layui表格构建 正文 由于在浏览网页的时候,我们有时候需要查看某些数据,这时候,部分数据由表格形式呈现出来,下面我们就来学习怎么用layui制作一个表格. 它用于对表格进行一些列功能和动态化数据操作,涵盖了...
  • 本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更正地址</title...
  • layui表格补充

    2018-12-21 17:48:38
    LayUI之table数据表格获取行、行高亮等相关操作 文章内容大纲 (右击展开→→) 内容预览: 我相信在后续的LayUI版本更新中,作者应该会着重优化数据表格,因为作为...~  操作说明 现在转入我们今天要说的数据....
  • 目录 前言单页导出全部数据导出代码实例页面展示一、前言 开发工具:VisualStudio2017使用了layui自带的导出功能后,真的是超级便捷,但是只能导出当前页的数据,又研究了下layui文档,发现还有导出任意数据的功能,...
  • layui表格里加入input标签

    千次阅读 2019-07-27 15:01:45
    layui表格里加入input标签 问题:如何在表格里添加input标签,并且设置input标签的类型为时间格式,即将input标签的“type”设置为“date”,然后在编辑完input标签里面的内容后,将新编辑的内容保存呢? layui表格...

空空如也

空空如也

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

layui表格数据筛选