133 строки
6.5 KiB
HTML
133 строки
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1 : Templates</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
|
|
<link href="../content/spreadsheet-css/ej.spreadsheet.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript" ></script>
|
|
<![endif]-->
|
|
<!--[if IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"> </script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/jquery.validate.min.js"></script>
|
|
<script src="../scripts/jquery.validate.unobtrusive.min.js"></script>
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
<script src="../scripts/xljsondata.min.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div class="e-container-spreadsheet">
|
|
<div id="Spreadsheet"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
$("#Spreadsheet").ejSpreadsheet({
|
|
sheetCount: 4,
|
|
allowFormulaBar: false,
|
|
allowFreezing: true,
|
|
scrollSettings:
|
|
{
|
|
width: "100%",
|
|
height: "100%",
|
|
isResponsive: true
|
|
},
|
|
exportSettings: {
|
|
allowExporting: false
|
|
},
|
|
importSettings: {
|
|
importMapper: window.baseurl + "api/Spreadsheet/Import"
|
|
},
|
|
sheets: [
|
|
{ rangeSettings: [{ dataSource: window.fifaSchedule, startCell: "B7", showHeader: false }], showGridlines: false }, { rangeSettings: [{ dataSource: window.fifaTopScorers, startCell: "A4", showHeader: false }], showGridlines: false },
|
|
{ rangeSettings: [{ dataSource: window.fifaMOM, startCell: "B4", showHeader: false }], showGridlines: false }, { rangeSettings: [{ dataSource: window.fifaTeamPlaces, startCell: "B4", showHeader: false }], showGridlines: false }
|
|
],
|
|
actionBegin: "actionBegin",
|
|
loadComplete: "loadComplete",
|
|
openFailure: "openfailure"
|
|
});
|
|
});
|
|
function actionBegin(args) {
|
|
if (args.reqType === "gotoSheet" && !args.newSheet) {
|
|
var charts, len, i = 0;
|
|
charts = this.getSheetElement(args.gotoIndex).find(".e-datavisualization-chart");
|
|
len = charts.length;
|
|
while (i < len) {
|
|
$(charts[i]).ejChart("redraw");
|
|
i++;
|
|
}
|
|
}
|
|
}
|
|
function openfailure(args) {
|
|
var alertDlg = $("#" + this._id + "_alertdlg");
|
|
this._renderAlertDlgContent(alertDlg, "Alert", args.statusText);
|
|
alertDlg.ejDialog("open");
|
|
}
|
|
function loadComplete(args) {
|
|
if (this.model.isImport)
|
|
return;
|
|
var i, xlFormat = this.XLFormat, sheetIdx = 1, bcolor = "#F2F2F2", hbcolor = "#FFFFFF", hstyle = { "font-weight": "bold", "color": "#000000", "text-align": "center" }, formatName = ["TableStyleLight8", "TableStyleLight9", "TableStyleLight10", "TableStyleLight12"], formatObj = [], xlFormat = xlFormat;
|
|
for (i = 0; i < formatName.length; i++)
|
|
formatObj[i] = { "header": true, "name": "Table" + (i + 1), "formatName": formatName[i], hideTab: true };
|
|
this.setWidthToColumns([55, 200, 80, 80, 180, 200, 80]);
|
|
xlFormat.format({ "style": { "background-color": bcolor } }, "B8:G71");
|
|
xlFormat.format({ "style": { "background-color": "#3b2f8d" } }, "B1:G6");
|
|
this.XLShape.setPicture('B1', "../content/images/spreadsheet/fifa.png", 817, 117);
|
|
xlFormat.format({ "style": { "font-weight": "bold" } }, "B8:B71");
|
|
xlFormat.format({ "style": { "color": "#996600" } }, "C8:C71");
|
|
xlFormat.format({ "style": { "color": "#3333FF" } }, "D8:D71");
|
|
this.XLFreeze.freezeRows(7);
|
|
xlFormat.createTable(formatObj[0], "B7:G71");
|
|
sheetIdx = 2; //sheet 2
|
|
this.gotoPage(sheetIdx, false);
|
|
this.setWidthToColumns([42, 130, 50, 82, 50, 62]);
|
|
xlFormat.format({ "style": { "background-color": bcolor } }, "A5:F19");
|
|
this.mergeCells("B2:E2", true);
|
|
this.XLEdit.updateValue('B2', "TOP GOAL SCORERS");
|
|
xlFormat.format({ "style": hstyle }, "B2:B2");
|
|
xlFormat.format({ "style": { "text-align": "center" } }, "A5:A19");
|
|
xlFormat.format({ "style": { "text-align": "center" } }, "C5:C19");
|
|
xlFormat.createTable(formatObj[1], "A4:F19");
|
|
this.XLSelection.selectRange("H4");
|
|
this.XLChart.createChart("B5:C19", { type: "bar", enable3D: false, marker: { visible: false }, top: 61, left: 600, hideTab: true });
|
|
sheetIdx = 3; //sheet 3;
|
|
this.gotoPage(sheetIdx, false);
|
|
this.setWidthToColumns([75, 100, 195, 175, 235, 100, 75]);
|
|
xlFormat.format({ "style": { "background-color": bcolor } }, "B5:F42");
|
|
xlFormat.format({ "style": { "text-align": "center" } }, "B5:B45");
|
|
xlFormat.format({ "style": { "background-color": "#ca6828" } }, "B1:F3");
|
|
this.XLShape.setPicture('B1', "../content/images/spreadsheet/m-o-m.png", 803, 117);
|
|
this.XLResize.setRowHeight(0, 81);
|
|
this.XLFreeze.freezeRows(4);
|
|
xlFormat.createTable(formatObj[2], "B4:F42");
|
|
sheetIdx = 4; //sheet 3;
|
|
this.gotoPage(sheetIdx, false);
|
|
this.setWidthToColumns([70, 95, 133, 100, 100, 110, 132, 135, 70]);
|
|
xlFormat.format({ "style": { "background-color": bcolor } }, "B5:H36");
|
|
this.XLShape.setPicture('B1', "../content/images/spreadsheet/rankings.png", 803, 117);
|
|
this.XLResize.setRowHeight(0, 81);
|
|
xlFormat.format({ "style": { "text-align": "center" } }, "B5:B36");
|
|
xlFormat.format({ "style": { "background-color": "#f7971d" } }, "B1:H3");
|
|
this.XLFreeze.freezeRows(4);
|
|
xlFormat.createTable(formatObj[3], "B4:H36");
|
|
this.gotoPage(1, false);
|
|
this.performSelection("B8");
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|