基于layui的table模块的插件tablePlus,三步设置完成数据完美导出。

This commit is contained in:
hdm 2023-03-18 11:48:51 +08:00
parent fe5b7a987a
commit 0e06fb0f60
5 changed files with 127 additions and 72 deletions

View File

@ -75,39 +75,15 @@
<!-- 脚本 -->
{block name="script"}
<script>
const moduleInit = ['tool','employeepicker'];
const moduleInit = ['tool','employeepicker','tablePlus'];
function gouguInit() {
var table = layui.table, tool = layui.tool ,form = layui.form, element = layui.element, employeepicker = layui.employeepicker;
// 选择员工
$('body').on('click','[data-event="select"]',function(){
var that = $(this);
var names = that.val(), ids = $('[name="uid"]').val();
employeepicker.init({
ids: ids,
names: names,
type: 0,
department_url: "/api/index/get_department_tree",
employee_url: "/api/index/get_employee",
callback: function (ids, names, dids, departments) {
$('[name="uid"]').val(ids);
that.val(names);
$('[lay-filter="webform"]').click();
}
})
});
$('[lay-filter="clear"]').on('click',function(){
setTimeout(function(){
$('[lay-filter="webform"]').click();
},10)
})
var table = layui.tablePlus, tool = layui.tool ,form = layui.form, element = layui.element, employeepicker = layui.employeepicker;
layui.pageTable = table.render({
elem: '#test',
title: '客户列表',
toolbar: '#toolbarDemo',
defaultToolbar:['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'}],
is_excel:true,
url: "/customer/index/index", //数据接口
cellMinWidth: 80,
page: true, //开启分页
@ -220,18 +196,6 @@
tool.side("/customer/index/add");
return;
}
if(obj.event === 'LAYTABLE_EXCEL'){
var formSelect = form.val('barsearchform');
formSelect.limit=99999;
$.ajax({
url: '/customer/index/index',
data: formSelect,
success:function(res){
table.exportFile('test', res.data,'xls');
}
});
return;
}
});
//监听行工具事件
table.on('tool(test)', function(obj) {
@ -257,6 +221,31 @@
});
}
});
// 选择员工
$('body').on('click','[data-event="select"]',function(){
var that = $(this);
var names = that.val(), ids = $('[name="uid"]').val();
employeepicker.init({
ids: ids,
names: names,
type: 0,
department_url: "/api/index/get_department_tree",
employee_url: "/api/index/get_employee",
callback: function (ids, names, dids, departments) {
$('[name="uid"]').val(ids);
that.val(names);
$('[lay-filter="webform"]').click();
}
})
});
$('[lay-filter="clear"]').on('click',function(){
setTimeout(function(){
$('[lay-filter="webform"]').click();
},10)
})
//监听搜索提交
form.on('submit(webform)', function(data) {

View File

@ -70,6 +70,9 @@ class Index extends BaseController
$item->tasks_pensent = round($item->tasks_finish / $item->tasks_total * 100, 2) . "";
} else {
$item->tasks_pensent = "100";
if($item->status<2){
$item->tasks_pensent = "0%";
}
}
$step = Db::name('Step')->where(['action_id' => $item->id,'sort'=>$item->step_sort,'type'=>2,'delete_time'=>0])->find();

View File

@ -2,7 +2,7 @@
<!-- 主体 -->
{block name="body"}
<div class="p-3">
<table class="layui-hide" id="projectList" lay-filter="project"></table>
<table class="layui-hide" id="projecttable" lay-filter="projecttable"></table>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
@ -15,17 +15,17 @@
<!-- 脚本 -->
{block name="script"}
<script>
const moduleInit = ['tool'];
const moduleInit = ['tool','tablePlus'];
function gouguInit() {
var table = layui.table, form = layui.form, tool = layui.tool;
var table = layui.tablePlus, form = layui.form, tool = layui.tool;
layui.pageTable = table.render({
elem: '#projectList',
elem: '#projecttable',
toolbar: '#toolbarDemo',
defaultToolbar:['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'}],
title: '项目列表',
cellMinWidth: 80,
page: true, //开启分页
limit: 20,
is_excel:true,
height: 'full-24',
url: "/project/index/index", //数据接口
cols: [[
@ -59,18 +59,8 @@
//触发事件
table.on('toolbar(project)', function(obj){
if(obj.event === 'LAYTABLE_EXCEL'){
$.ajax({
url: '/project/index/index',
data: {limit:99999},
success:function(res){
table.exportFile('projectList', res.data,'xls');
}
});
return;
}
else if(obj.event === 'add'){
table.on('toolbar(projecttable)', function(obj){
if(obj.event === 'add'){
tool.side('/project/index/add');
return;
}

View File

@ -72,15 +72,15 @@
<!-- 脚本 -->
{block name="script"}
<script>
const moduleInit = ['tool','employeepicker'];
const moduleInit = ['tool','employeepicker','tablePlus'];
function gouguInit() {
var table = layui.table, form = layui.form, tool = layui.tool, employeepicker = layui.employeepicker;
var table = layui.tablePlus, form = layui.form, tool = layui.tool, employeepicker = layui.employeepicker;
layui.taskTable = table.render({
elem: '#task',
title: '任务列表',
toolbar: '#toolbarDemo',
defaultToolbar:['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'}],
is_excel:true,
cellMinWidth: 80,
url: "/project/task/index", //数据接口
page: true, //开启分页
@ -145,19 +145,7 @@
//触发事件
table.on('toolbar(task)', function(obj){
if(obj.event === 'LAYTABLE_EXCEL'){
var formSelect = form.val('barsearchform');
formSelect.limit=99999;
$.ajax({
url: '/project/task/index',
data: formSelect,
success:function(res){
table.exportFile('task', res.data,'xls');
}
});
return;
}
else if(obj.event === 'add'){
if(obj.event === 'add'){
tool.side('/project/task/add');
return;
}

View File

@ -0,0 +1,85 @@
layui.define(['jquery','layer','table'], function(exports) {
var $ = layui.$,
layer = layui.layer,
table = layui.table;
var MOD_NAME='tablePlus';
var tablePlus=$.extend({},table);
tablePlus._render = tablePlus.render;
tablePlus.excel = function(data,page_size,obj){
//表头工具栏导出按钮
$('[lay-id="'+obj.id+'"]').find('[lay-event="LAYTABLE_EXCEL"]').click(function(){
if(data.count==0){
layer.msg('暂无数据');
return false;
}
else{
let _page = parseInt(data.count/page_size);
let page = data.count%page_size>0?(_page+1):_page;
let pageHtml='<p style="padding:16px 10px; text-align:center; color:red">由于导出数据比较消耗服务器资源,建议使用搜索功能筛选好数据再导出</p><p style="padding:0 10px; text-align:center;">共查询到<strong> '+data.count+' </strong>条数据,每次最多导出<strong>1000</strong>条,共<strong>'+page+'</strong>页,请点击下面的页码导出</p><div id="exportPage" class="layui-box layui-laypage" style="padding:10px 0; width:100%;text-align:center;">';
for (i = 1; i <= page; i++) {
pageHtml += '<a href="javascript:;" data-page="'+i+'">'+i+'</a>';
}
pageHtml+='</div>';
layer.open({
type: 1,
title: '导出数据',
area:['580px','240px'],
content: pageHtml,
success:function(res){
var tableWhere = obj.where;
tableWhere.limit=page_size;
$('#exportPage').on('click','a',function(){
tableWhere.page=$(this).data('page');
let msg = layer.msg('正在导出数据...', {time:5000});
$.ajax({
url: obj.url,
data: tableWhere,
success:function(res){
table.exportFile(obj.id, res.data,'xls');
layer.close(msg);
}
});
})
}
});
return false;
}
});
}
//重写渲染方法
tablePlus.render=function(params){
let is_excel = params.is_excel||false;
let excel_limit = params.excel_limit||1000;
if(is_excel){
let toolbar = ['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'}];
if(!params.defaultToolbar){
params.defaultToolbar = toolbar;
}
else{
let _toolbar = params.defaultToolbar;
params.defaultToolbar = _toolbar.concat(toolbar);
}
if(typeof params.done === "function"){
let _done = params.done;
params.done = function(data){
let obj = this;
_done(data);
tablePlus.excel(data,excel_limit,obj);
}
}
else{
params.done = function(data){
let obj = this;
tablePlus.excel(data,excel_limit,obj);
}
}
}
tablePlus._render(params);
//console.log(params);
};
exports(MOD_NAME, tablePlus);
});