345 строки
13 KiB
HTML
345 строки
13 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<title>Essential JS 1 : TreeGrid</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta 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" />
|
|
<!--[if lt IE 9]>
|
|
<script type="text/javascript" src="../scripts/jquery-1.11.3.min.js" ></script>
|
|
<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"> </script>
|
|
<!--<![endif]-->
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="TreeGridContainer" style="height:370px;width:100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function _dateFormating(data) {
|
|
var dateFormat = ej.preferredCulture()["calendars"]["standard"]["patterns"]["d"];
|
|
return ej.format(this.data[data], dateFormat, ej.preferredCulture().name);
|
|
}
|
|
var helpers = {};
|
|
helpers["_treeGridDateFormatter"] = _dateFormating;
|
|
$.views.helpers(helpers);
|
|
var treeData = [{
|
|
"Name": "Robert King",
|
|
"FullName": "RobertKing",
|
|
"Designation": "Chief Executive Officer",
|
|
"EmployeeID": "EMP001",
|
|
"Address": "507 - 20th Ave. E.Apt. 2A, Seattle",
|
|
"Contact": "(206) 555-9857",
|
|
"Country": "USA",
|
|
"DOB": new Date("2/15/1963"),
|
|
|
|
"Children": [{
|
|
"Name": "David william",
|
|
"FullName": "DavidWilliam",
|
|
"Designation": "Vice President",
|
|
"EmployeeID": "EMP004",
|
|
"Address": "722 Moss Bay Blvd., Kirkland",
|
|
"Country": "USA",
|
|
"Contact": "(206) 555-3412",
|
|
"DOB": new Date("5/20/1971"),
|
|
|
|
|
|
"Children": [{
|
|
"Name": "Nancy Davolio",
|
|
"FullName": "NancyDavolio",
|
|
"Designation": "Marketing Executive",
|
|
"EmployeeID": "EMP035",
|
|
"Address": "4110 Old Redmond Rd., Redmond",
|
|
"Country": "USA",
|
|
"Contact": "(206) 555-8122",
|
|
"DOB": new Date("3/19/1966"),
|
|
"Children": [
|
|
{
|
|
"Name": "Andrew Fuller",
|
|
"FullName": "AndrewFuller",
|
|
"Designation": "Sales Representative",
|
|
"EmployeeID": "EMP045",
|
|
"Address": "14 Garrett Hill, London",
|
|
"Country": "UK",
|
|
"Contact": "(71) 555-4848",
|
|
"DOB": new Date("9/20/1980")
|
|
},
|
|
{
|
|
"Name": "Anne Dodsworth",
|
|
"FullName": "AnneDodsworth",
|
|
"Designation": "Sales Representative",
|
|
"EmployeeID": "EMP091",
|
|
"Address": "4726 - 11th Ave. N.E., Seattle",
|
|
"Country": "USA",
|
|
"Contact": "(206) 555-1189",
|
|
"DOB": new Date("10/19/1989")
|
|
},
|
|
{
|
|
"Name": "Michael Suyama",
|
|
"FullName": "MichaelSuyama",
|
|
"Designation": "Sales Representative",
|
|
"EmployeeID": "EMP110",
|
|
"Address": "Coventry House Miner Rd., London",
|
|
"Country": "UK",
|
|
"Contact": "(71) 555-3636",
|
|
"DOB": new Date("11/02/1987")
|
|
},
|
|
{
|
|
"Name": "Janet Leverling",
|
|
"FullName": "JanetLeverling",
|
|
"Designation": "Sales Coordinator",
|
|
"EmployeeID": "EMP131",
|
|
"Address": "Edgeham Hollow Winchester Way, London",
|
|
"Country": "UK",
|
|
"Contact": "(71) 555-3636",
|
|
"DOB": new Date("11/06/1990")
|
|
},
|
|
]
|
|
|
|
},
|
|
{
|
|
"Name": "Romey Wilson",
|
|
"FullName": "RomeyWilson",
|
|
"Designation": "Sales Executive",
|
|
"EmployeeID": "EMP039",
|
|
"Address": "7 Houndstooth Rd., London",
|
|
"Country": "UK",
|
|
"Contact": "(71) 555-3690",
|
|
"DOB": new Date("02/02/1980"),
|
|
"Children": [
|
|
{
|
|
"Name": "Margaret Peacock",
|
|
"FullName": "MargaretPeacock",
|
|
"Designation": "Sales Representative",
|
|
"EmployeeID": "EMP213",
|
|
"Address": "4726 - 11th Ave. N.E., California",
|
|
"Country": "USA",
|
|
"Contact": "(206) 555-1989",
|
|
"DOB": new Date("01/21/1986")
|
|
},
|
|
{
|
|
"Name": "Laura Callahan",
|
|
"FullName": "LauraCallahan",
|
|
"Designation": "Sales Coordinator",
|
|
"EmployeeID": "EMP201",
|
|
"Address": "Coventry House Miner Rd., London",
|
|
"Country": "UK",
|
|
"Contact": "(71) 555-2222",
|
|
"DOB": new Date( "12/01/1990")
|
|
},
|
|
{
|
|
"Name": "Steven Buchanan",
|
|
"FullName": "StevenBuchanan",
|
|
"Designation": "Sales Representative",
|
|
"EmployeeID": "EMP197",
|
|
"Address": "200 Lincoln Ave, Salinas, CA 93901",
|
|
"Country": "USA",
|
|
"Contact": "(831) 758-7408",
|
|
"DOB": new Date("03/23/1987")
|
|
},
|
|
{
|
|
"Name": "Tedd Lawson",
|
|
"FullName": "TeddLawson",
|
|
"Designation": "Sales Representative",
|
|
"EmployeeID": "EMP167",
|
|
"Address": "200 Lincoln Ave, Salinas, CA 93901",
|
|
"Country": "USA",
|
|
"Contact": "(831) 758-7368 ",
|
|
"DOB": new Date("08/09/1989")
|
|
},
|
|
]
|
|
}]
|
|
}]
|
|
}];
|
|
|
|
|
|
$(function () {
|
|
var dateFormat = "{0:" + ej.preferredCulture()["calendars"]["standard"]["patterns"]["d"] + "}";
|
|
$("#TreeGridContainer").ejTreeGrid({
|
|
dataSource: treeData,
|
|
childMapping: "Children",
|
|
allowColumnResize: true,
|
|
isResponsive:true,
|
|
rowTemplateID: "rowTemplateScript",
|
|
altRowTemplateID: "altRowTemplateScript",
|
|
editSettings: { allowEditing: true, editMode: "cellEditing" },
|
|
rowHeight: 83,
|
|
columns: [
|
|
{ field: "EmployeeID",headerText: "Employee ID", width: "180" },
|
|
{ field: "Name", headerText: "Employee Name" },
|
|
{ field: "Address", headerText: "Employee Details", width: "300" },
|
|
{ field: "DOB", headerText: "DOB", editType: "datepicker", format: dateFormat }
|
|
]
|
|
})
|
|
});
|
|
|
|
</script>
|
|
|
|
<script id="rowTemplateScript" type="text/x-jsrender">
|
|
|
|
<tr>
|
|
<td class="border" style='height:83px;'>
|
|
<div>{{:#data['EmployeeID']}}</div>
|
|
</td>
|
|
<td class="border" style='height:83px;'>
|
|
<div style="font-size:14px;">
|
|
{{:#data['Name']}}
|
|
<p style="font-size:9px;">{{:#data['Designation']}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="border" style='height:83px;'>
|
|
<div>
|
|
<div style="position:relative;display:inline-block;">
|
|
<div class="{{:#data['FullName']}}"></div>
|
|
</div>
|
|
<div style="display:inline-block;">
|
|
<div style="padding:5px;">{{:#data['Address']}}</div>
|
|
<div style="padding:5px;">{{:#data['Country']}}</div>
|
|
<div style="padding:5px;font-size:12px;">{{:#data['Contact']}}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="border" style='height:83px;'>
|
|
<div>{{:~_treeGridDateFormatter("DOB")}}</div>
|
|
</td>
|
|
|
|
</tr>
|
|
</script>
|
|
|
|
<script id="altRowTemplateScript" type="text/x-jsrender">
|
|
|
|
<tr>
|
|
<td class="border" style='height:83px;'>
|
|
<div>{{:#data['EmployeeID']}}</div>
|
|
</td>
|
|
<td class="border" style='height:83px;'>
|
|
<div style="font-size:14px;">
|
|
{{:#data['Name']}}
|
|
<p style="font-size:9px;">{{:#data['Designation']}}</p>
|
|
</div>
|
|
</td>
|
|
<td class="border" style='height:83px;'>
|
|
<div>
|
|
<div style="position:relative;display:inline-block;">
|
|
<div class="{{:#data['FullName']}}"></div>
|
|
</div>
|
|
<div style="display:inline-block;">
|
|
<div style="padding:5px;">{{:#data['Address']}}</div>
|
|
<div style="padding:5px;">{{:#data['Country']}}</div>
|
|
<div style="padding:5px;font-size:12px;">{{:#data['Contact']}}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="border" style='height:83px;'>
|
|
<div>{{:~_treeGridDateFormatter("DOB")}}</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
.border {
|
|
border-color: #BDBDBD;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.DavidWilliam {
|
|
background-image: url(../content/images/treegrid/DavidWilliam.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.RobertKing {
|
|
background-image: url(../content/images/treegrid/RobertKing.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.NancyDavolio {
|
|
background-image: url(../content/images/treegrid/NancyDavolio.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.AndrewFuller {
|
|
background-image: url(../content/images/treegrid/AndrewFuller.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.AnneDodsworth {
|
|
background-image: url(../content/images/treegrid/AnneDodsworth.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.MichaelSuyama {
|
|
background-image: url(../content/images/treegrid/MichaelSuyama.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.JanetLeverling {
|
|
background-image: url(../content/images/treegrid/JanetLeverling.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.RomeyWilson {
|
|
background-image: url(../content/images/treegrid/RomeyWilson.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.MargaretPeacock {
|
|
background-image: url(../content/images/treegrid/MargaretPeacock.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.LauraCallahan {
|
|
background-image: url(../content/images/treegrid/LauraCallahan.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.StevenBuchanan {
|
|
background-image: url(../content/images/treegrid/StevenBuchanan.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.TeddLawson {
|
|
background-image: url(../content/images/treegrid/TeddLawson.png);
|
|
width: 60px;
|
|
height: 60px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |