159 строки
9.3 KiB
HTML
159 строки
9.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<title></title>
|
|||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<!--[if gte IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<script src="../scripts/pivotgrid.datasource.js"></script>
|
|||
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="content-container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area" style="width: 100%">
|
|||
|
|
<div class="control">
|
|||
|
|
<div id="PivotGrid" style="height: 350px; width: 100%; overflow: auto; float: left;
|
|||
|
|
display: block">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area" style="min-height:100px;">
|
|||
|
|
<div id="sampleProperties">
|
|||
|
|
<div class="prop-grid">
|
|||
|
|
<div class="row">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<td class="chkrad">
|
|||
|
|
DataSource :
|
|||
|
|
</td>
|
|||
|
|
<td class="chkrad">
|
|||
|
|
<input type="radio" name="dataSource" id="rdbRelational" checked="checked" /><label for="rdbRelational" class="radioBtnLabel">Relational</label>
|
|||
|
|
</td>
|
|||
|
|
<td class="chkrad" colspan="2">
|
|||
|
|
<input type="radio" name="dataSource" id="rdbOlap" /><label for="rdbOlap" class="radioBtnLabel">OLAP</label>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="row" style="margin-top: 5px;">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<td class=" chkrad">
|
|||
|
|
Mode :
|
|||
|
|
</td>
|
|||
|
|
<td class="chkrad">
|
|||
|
|
<input type="radio" name="dataMode" id="rdbClient" checked /><label for="rdbClient" class="radioBtnLabel">Client</label>
|
|||
|
|
</td>
|
|||
|
|
<td class="chkrad" colspan="2">
|
|||
|
|
<input type="radio" name="dataMode" id="rdbServer" /><label for="rdbServer" class="radioBtnLabel">Server</label>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="row" style="margin-top: 5px;">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<td class="chkrad">
|
|||
|
|
Export Option :
|
|||
|
|
</td>
|
|||
|
|
<td class="chkrad" colspan="2">
|
|||
|
|
<select id="drpdwn">
|
|||
|
|
<option value="excel">Excel</option>
|
|||
|
|
<option value="word">Word</option>
|
|||
|
|
<option value="pdf">PDF</option>
|
|||
|
|
<option value="csv">CSV</option>
|
|||
|
|
</select>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="row" style="margin:20px 0px 10px 20px">
|
|||
|
|
<button id="btnExport" value="Export" name="Export" title="Export">Export</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var btnTarget, rdbRelational, rdbOlap, rdbClient, rdbServer, pGridObj;
|
|||
|
|
$(function () {
|
|||
|
|
$("#PivotGrid").ejPivotGrid({ dataSource: { data: pivot_dataset, cube: "", rows: [{ fieldName: "Country", fieldCaption: "Country", showSubTotal: false, }, { fieldName: "State", fieldCaption: "State", showSubTotal: false, }], columns: [{ fieldName: "Product", fieldCaption: "Product", showSubTotal: false, }], values: [{ fieldName: "Amount", fieldCaption: "Amount" }, { fieldName: "Quantity", fieldCaption: "Quantity" }], filters: [] }, enableRowGrandTotal:false });
|
|||
|
|
$("#rdbRelational,#rdbOlap,#rdbClient,#rdbServer").ejRadioButton({ change: "renderPivotGrid" });
|
|||
|
|
$('#drpdwn').ejDropDownList({ selectedIndex: 0 });
|
|||
|
|
$("#btnExport").ejButton({ roundedCorner: true, size: "small", type: ej.ButtonType.Button, click: "exportPivotGrid" });
|
|||
|
|
rdbRelational = $('#rdbRelational').data("ejRadioButton"); rdbOlap = $('#rdbOlap').data("ejRadioButton"); rdbClient = $('#rdbClient').data("ejRadioButton"); rdbServer = $('#rdbServer').data("ejRadioButton");
|
|||
|
|
pGridObj = $('#PivotGrid').data("ejPivotGrid");
|
|||
|
|
});
|
|||
|
|
function exportPivotGrid(args) {
|
|||
|
|
var dropDownObj = $('#drpdwn').data("ejDropDownList");
|
|||
|
|
var exportOption = dropDownObj.model.value;
|
|||
|
|
if (exportOption == "excel")
|
|||
|
|
pGridObj.exportPivotGrid(window.baseurl + "api/PivotGrid/Olap/ExcelExport", "fileName");
|
|||
|
|
else if (exportOption == "word")
|
|||
|
|
pGridObj.exportPivotGrid(window.baseurl + "api/PivotGrid/Olap/WordExport", "fileName");
|
|||
|
|
else if (exportOption == "pdf")
|
|||
|
|
pGridObj.exportPivotGrid(window.baseurl + "api/PivotGrid/Olap/PDFExport", "fileName");
|
|||
|
|
else
|
|||
|
|
pGridObj.exportPivotGrid(window.baseurl + "api/PivotGrid/Olap/CSVExport", "fileName");
|
|||
|
|
}
|
|||
|
|
function renderPivotGrid(args) {
|
|||
|
|
$(pGridObj.element).html("");
|
|||
|
|
if (rdbClient.model.checked) {
|
|||
|
|
var pivotdataSource = { data: pivot_dataset, cube: "", rows: [{ fieldName: "Country", fieldCaption: "Country", showSubTotal: false, }, { fieldName: "State", fieldCaption: "State", showSubTotal: false, }], columns: [{ fieldName: "Product", fieldCaption: "Product", showSubTotal: false, }], values: [{ fieldName: "Amount", fieldCaption: "Amount" }, { fieldName: "Quantity", fieldCaption: "Quantity" }], filters: [] };
|
|||
|
|
var olapDataSource = { data: window.biurl + "olap/msmdpump.dll", catalog: "Adventure Works DW 2008 SE", cube: "Adventure Works", rows: [{ fieldName: "[Date].[Fiscal]" }], columns: [{ fieldName: "[Customer].[Customer Geography]" }], values: [{ measures: [{ fieldName: "[Measures].[Internet Sales Amount]" }], axis: "columns" }], filters: [] };
|
|||
|
|
pGridObj.model.dataSource = rdbRelational.model.checked ? pivotdataSource : rdbOlap.model.checked ? olapDataSource : pivotdataSource;
|
|||
|
|
pGridObj.model.enableRowGrandTotal = false;
|
|||
|
|
pGridObj.model.url = "";
|
|||
|
|
pGridObj.model.operationalMode = "clientmode";
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
pGridObj.model.dataSource = { data: null, cube: "" };
|
|||
|
|
pGridObj.model.operationalMode = "servermode";
|
|||
|
|
pGridObj.model.url = window.baseurl + (rdbRelational.model.checked ? "api/PivotGrid/Relational" : "api/PivotGrid/Olap");
|
|||
|
|
pGridObj.model.enableRowGrandTotal = false;
|
|||
|
|
pGridObj.model.serviceMethodSettings.initialize = "Initialize";
|
|||
|
|
pGridObj.model.serviceMethodSettings.drillDown = "Drill";
|
|||
|
|
pGridObj.model.serviceMethodSettings.nodeStateModified = "ModifyNodeState";
|
|||
|
|
pGridObj.model.serviceMethodSettings.nodeDropped = "DropNode";
|
|||
|
|
pGridObj.model.serviceMethodSettings.removeButton = "RemoveButton";
|
|||
|
|
pGridObj.model.serviceMethodSettings.memberExpand = "ExpandMember";
|
|||
|
|
}
|
|||
|
|
pGridObj._load();
|
|||
|
|
}
|
|||
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<style>
|
|||
|
|
.radioBtnLabel {
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cols-prop-area .content {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row .cols-prop-area {
|
|||
|
|
min-height: 210px;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#btnExport {
|
|||
|
|
margin-left: 170px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 1920px) { .row .cols-prop-area { width: 28% !important; } }
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</body>
|
|||
|
|
</html>
|