layui解决table自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数

WEB前端 Alice 4周前 (09-24) 47次浏览 0个评论

layui的 table 默认表头工具栏右边有 3 个操作,分别是过滤字段、导出 excel、打印功能。

layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数

一、自定义导出文件名

1、找到 lay/modules/table.js,原代码为:
layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数
2、搜索 exportFile,找到

d.exportFile=function(e,t,i)

修改为

d.exportFile=function(e,t,i,name)

3、搜索 table_,找到

n.download=(l.title||“table_”+(l.index||""))

修改为

n.download=(name||l.title||“table_”+(l.index||""))

layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数

使用 table.exportFile 时,就包含四个参数。最后一个参数就是文件名。

table.exportFile(field, data, ‘xlsx’, “文件名”);

其中 field 是 excel 的表头,和后台传入的数据对应,和后台返回的数据不同的话会导致表头和内容不一致。

二、layui 数据表格隐藏列的方法

有时候我们在显示数据这一块,不是所有字段都会显示出来,那么问题来了,我们需要用到一些没有意义的字段时,比如 id,再开一列就不是很必要,那么将它隐藏起来更为美观。

另外在一些场景,比如导出 excel 时,需要导出大部分数据,但是这些数据又不需要在列表页面显示出来,就可以用隐藏的方式来解决此问题。

在 layui2.4 版本以前可以用 layui 的数据表格的 done 参数将 id 隐藏,在 layui2.4 版本的时候,layui 的 cols 的参数新添了 hide(隐藏)属性。

table.render({
   elem: '#datatable'
   ,url:'xxxx'
   ,cols: [[
	{type:'checkbox'}
	,{field:'id', minWidth:200, title: 'ID'}
	,{field:'title', minWidth:200, title: '标题'}
    ]]
    ,done:function(res,curr,count){
        $("[data-field='id']").css('display','none');// 隐藏列
    }
    ,page: true
});

table.render({
    elem: '#datatable'
    ,url:'xxxx'
    ,cols: [[
	,{field:'id', minWidth:200, title: 'ID', hide:true}
	,{field:'title', minWidth:200,title: '标题'}
    ]]
    ,page: true
});

三、导出选中行

layui 自带的导出表格,导出的是当前页面的数据,如果需要导出选中行的数据,可以使用下面的方法:

1、找到 LAYTABLE_EXPORT,原代码为:

layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数

2、在“导出到 Excel 文件”增加以下代码:

, '<li data-type="xls" class="exportSelected">导出选中行到 Excel 文件</li>'

3、在 done 函数里面增加以下代码:

var checkStatus = d.checkStatus(o.id);
i.on("click", function () {
	var e = t(this).data("type");
	var choice = this.className;
	if (choice === 'exportSelected') {
		if (checkStatus.data.length < 1) {
			layer.alert('请选择需要导出的记录');
			return false;
		} else {
			d.exportFile(o.id, checkStatus.data, e)
		}
	} else {
		d.exportFile(o.id, null, e)
	}
})

修改后的代码最终如下:

layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数

这样就能导出选中行的数据了。

四、layui 分页:获取当前页数与分页数

$(".layui-laypage-em").next().html(); //获取当前页码值

$(".layui-laypage-limits").find("option:selected").val(); //获取分页数,10 条/页

layui 数据表格自定义每页条数 limit

table.render({
	elem: '#datatable'
	,cols: [[ //标题栏
		{field: 'id', title: 'ID', width: 80, sort: true}
		,{field: 'title', title:'标题',width: 100}
	]]
	,url: url
	,skin: 'row' //表格风格
	,page: true //是否显示分页
	,limits: [10,20,30,50,100,200,300,500,1000]
	,limit: 5 //每页默认显示的数量
	,done:function(res){
		userPage.data = res.data;
	}
});

layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数


女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明layui 解决 table 自定义导出功能修改文件名,表格隐藏列的方法,导出选中行数据,获取当前页数

【声明】:本博客仅为分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

【关于安全】:任何 IDC 都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址