EasyUI Forum
December 14, 2024, 03:30:11 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > [SOLVED] EasyUI Datagrid Export
Pages: [1]
« previous next »
  Print  
Author Topic: [SOLVED] EasyUI Datagrid Export  (Read 6439 times)
Wojak
Jr. Member
**
Posts: 62


View Profile WWW Email
« on: April 14, 2023, 06:47:09 AM »
Hi,
Is there a way to export a datagrid to XLSX not to XLS?
Why does it show that the file is in a different extension than XLS when I open it in Excel but the end of the file is XLS?

Regards
« Last Edit: May 18, 2023, 10:07:41 AM by Wojak » Logged
jarry
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #1 on: April 18, 2023, 05:12:19 AM »
The better way to export excel is to use the XLSX library. Here is the example shows how to export excel from the datagrid.
Code:
var items = $('#dg').datagrid('getRows');
const wb = XLSX.utils.book_new();
const sheet = XLSX.utils.json_to_sheet(items);
XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1');
XLSX.writeFile(wb, 'table1.xlsx');
Logged
Wojak
Jr. Member
**
Posts: 62


View Profile WWW Email
« Reply #2 on: April 19, 2023, 11:54:52 PM »
After iteration over the items
Code:
items.forEach(el => {
    delete el.id;
    delete el.children;
});

Works as it should
Thanks!
Logged
jega
Full Member
***
Posts: 199


View Profile
« Reply #3 on: May 02, 2023, 01:00:19 AM »
Hi Jarry

Where to find this library ?
Logged
jega
Full Member
***
Posts: 199


View Profile
« Reply #4 on: May 02, 2023, 03:19:25 AM »
Found it.

BUT. Can you explain this

Loaded data in my datagrid:

ID:"61"
endTimestamp:"01-05-2023 06:25:03"
logText:""
powershellFile:"trigger_06.ps1"
scheduleFile:"scheduled_cleanup.asp"
startTimestamp:"01-05-2023 06:25:00"

When call function to export i do this:

var items = $('#dgList').datagrid('getSelections');

to only export these rows

When look at the items data it has added a children key

ID:"61"
children:undefined
endTimestamp:"01-05-2023 06:25:03"
logText:""
powershellFile:"trigger_06.ps1"
scheduleFile:"scheduled_cleanup.asp"
startTimestamp:"01-05-2023 06:25:00"
Logged
jarry
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #5 on: May 03, 2023, 08:07:26 PM »
Please look at this example. It works fine.
Code:
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-export.js"></script>
<script>
var data = [
{
ID: "61",
endTimestamp: "01-05-2023 06:25:03",
logText: "",
powershellFile: "trigger_06.ps1",
scheduleFile: "scheduled_cleanup.asp",
startTimestamp: "01-05-2023 06:25:00"
},
{
ID: "62",
endTimestamp: "01-05-2023 06:25:03",
logText: "",
powershellFile: "trigger_06.ps1",
scheduleFile: "scheduled_cleanup.asp",
startTimestamp: "01-05-2023 06:25:00"
},
{
ID: "63",
endTimestamp: "01-05-2023 06:25:03",
logText: "",
powershellFile: "trigger_06.ps1",
scheduleFile: "scheduled_cleanup.asp",
startTimestamp: "01-05-2023 06:25:00"
},
];
function getselections() {
var items = $('#dg').datagrid('getSelections');
var s = JSON.stringify(items);
$.messager.alert({
title: 'GetSelections',
msg: s,
width: 600
});
}
</script>
</head>

<body>
<button class="easyui-linkbutton" onclick="getselections()">GetSelections</button>
<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="fitColumns:true,data:data">
<thead>
<tr>
<th data-options="field:'powershellFile',width:200">PowershellFile</th>
<th data-options="field:'scheduleFile',width:200">ScheduleFile</th>
<th data-options="field:'startTimestamp',width:200">StartTimestamp</th>
<th data-options="field:'endTimestamp',width:200">EndTimestamp</th>
</tr>
</thead>
</table>
</body>

</html>
Logged
jega
Full Member
***
Posts: 199


View Profile
« Reply #6 on: May 04, 2023, 12:54:57 AM »
Yes, your code works, also if i tried in on my page beside my dg

However, i found the error.

I have this code and enabled the filter.

    $(function(){
      var dg = $('#dgList').datagrid({
         url: 'getfromdb.asp?st=schedulerlog',
         pageList: [10,20,30,40,50,100],
         rownumbers:false,
         pagination: true,
         clientPaging: false,
         remoteFilter: true,
         fitColumns: false
      });
      dg.datagrid('enableFilter');
    });

the resut is

ID:"74",children: undefined,endTimestamp:"03-05-2023 06:15:19",logText:""..........

And if filter is not enabled i get this

ID:"74",endTimestamp:"03-05-2023 06:15:19",logText:""..........

I need the filter. Have i something wrong ?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #7 on: May 04, 2023, 06:09:56 PM »
Please try to download the latest 'datagrid-filter.js' file from https://www.jeasyui.com/extension/datagrid_filter.php
Logged
jega
Full Member
***
Posts: 199


View Profile
« Reply #8 on: May 05, 2023, 01:19:47 AM »
Hi jarry

Updated to latest version, still the same.

I have stripped all other code on the site, only the grid is left. Filter is enabled

When do a filter to 1 record, select it and push excel button, then it has a child column. When delete the filter text, it still have the child. After refresh site the child column is gone.

My site is an classic ASP page .asp. I changed it to html before attach it here. Exactly the same site, just changed the .asp to .html and now it works.

Very strange.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #9 on: May 05, 2023, 01:40:20 AM »
This example works fine.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Test data</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/locale/easyui-lang-da.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>


</head>

<body>

<table id="dgList" title="LOG LIST" class="easyui-datagrid" style="padding:10px 10px 10px 10px" data-options="
singleSelect:false,
idField:'ID',
striped:true,
toolbar:'#toolbarDG'">
<thead>
<tr>
<th data-options="field:'powershellFile',width:250">powershellFile</th>
<th data-options="field:'scheduleFile',width:250">schedulerFile</th>
<th data-options="field:'startTimestamp',width:175">Log start</th>
<th data-options="field:'endTimestamp',width:175">Log end</th>
</tr>
</thead>
</table>
<div id="toolbarDG">
<a id="exportExcelButton2" href="javascript:void(0)" class="easyui-linkbutton" onclick="exportExcel()">Excel export</a>
</div>

<script type="text/javascript">

$(document).ready(function(){

})

var data = [
{
ID: "63",
endTimestamp: "02-05-2023 23:45:02",
logText: "",
powershellFile: "trigger_10.ps1",
scheduleFile: "scheduled_autosend.asp",
startTimestamp: "02-05-2023 00:00:02"
},
{
ID: "61",
endTimestamp: "01-05-2023 06:25:03",
logText: "",
powershellFile: "trigger_06.ps1",
scheduleFile: "scheduled_cleanup.asp",
startTimestamp: "01-05-2023 06:25:00"
},
{
ID: "62",
endTimestamp: "01-05-2023 06:37:13",
logText: "",
powershellFile: "trigger_03.ps1",
scheduleFile: "scheduled_aut_settlement.asp",
startTimestamp: "01-05-2023 06:20:00"
}
];

    $(function(){
var dg = $('#dgList').datagrid({
data: data,
pageList: [10,20,30,40,50,100],
rownumbers:false,
remoteFilter: false,
fitColumns: false
});
dg.datagrid('enableFilter');
    });

function exportExcel(){
var items = $('#dgList').datagrid('getSelections');
const wb = XLSX.utils.book_new();
const sheet = XLSX.utils.json_to_sheet(items);
XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1');
XLSX.writeFile(wb, 'scheduler_log.xlsx');
}
</script>

</body>
</html>
Logged
jega
Full Member
***
Posts: 199


View Profile
« Reply #10 on: May 05, 2023, 05:32:08 AM »
argh. Damm

The filter js was in cache, so it did not use the new 1.0.6 but 1.0.2

What is the best way to ensure that it always load the file and not use cache, without disable cache


Thanks for your time.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #11 on: May 05, 2023, 06:54:25 PM »
Please include this line instead.
Code:
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js?v=1.0.6"></script>
Logged
jega
Full Member
***
Posts: 199


View Profile
« Reply #12 on: May 08, 2023, 09:34:45 AM »
Hi jarry

I know this. Maybe i do something not so smart.

Because i have the script file on every page where it is used, i'll have to add/change ?v=x.x.x on every one of these pages, everytime i'll upgrade, and therefor i dont have ?v= on all pages. Maybe this is stupid. Maybe i just have to load all used script files from index file, and then only add/update ?v= on this page. It should not affect performance, because they are loaded from cache other than first load and after upgrade. What do you think ?

Jesper

 
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!