|
Wojak
|
 |
« 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
|
|
« 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. 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
|
|
« Reply #2 on: April 19, 2023, 11:54:52 PM » |
|
After iteration over the items items.forEach(el => {
delete el.id;
delete el.children;
});
Works as it should Thanks! |
|
|
|
|
Logged
|
|
|
|
|
jega
|
|
« Reply #3 on: May 02, 2023, 01:00:19 AM » |
|
Hi Jarry
Where to find this library ?
|
|
|
|
|
Logged
|
|
|
|
|
jega
|
|
« 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
|
|
« Reply #5 on: May 03, 2023, 08:07:26 PM » |
|
Please look at this example. It works fine. <!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
|
|
« 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
|
|
|
|
|
|
|
jega
|
|
« 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
|
|
« Reply #9 on: May 05, 2023, 01:40:20 AM » |
|
This example works fine. <!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
|
|
« 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
|
|
« Reply #11 on: May 05, 2023, 06:54:25 PM » |
|
Please include this line instead. <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js?v=1.0.6"></script>
|
|
|
|
|
Logged
|
|
|
|
|
jega
|
|
« 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
|
|
|
|
|
