127 строки
4.3 KiB
HTML
127 строки
4.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<title>Essential JS 1 : Card Template</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 src="../scripts/jquery-1.11.3.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<!--[if gte IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<script src="../scripts/jsonkanbandata.js"></script>
|
|||
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|||
|
|
<script src="../scripts/jquery.validate.min.js"></script>
|
|||
|
|
<script src="../scripts/jquery.validate.unobtrusive.min.js"></script>
|
|||
|
|
<script src="../scripts/ej.web.all.min.js"></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="Kanban"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script id="cardtemplate" type="text/x-jsrender">
|
|||
|
|
<table class="e-templatetable">
|
|||
|
|
<colgroup>
|
|||
|
|
<col style="width:10%">
|
|||
|
|
<col style="width:90%">
|
|||
|
|
</colgroup>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td class="photo">
|
|||
|
|
<img src="../content/images/kanban/{{:Priority}}.png" alt="">
|
|||
|
|
</td>
|
|||
|
|
<td class="details">
|
|||
|
|
<table>
|
|||
|
|
<colgroup>
|
|||
|
|
<col style="width:10%">
|
|||
|
|
<col style="width:90%">
|
|||
|
|
</colgroup>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td class="CardHeader"> Assignee: </td>
|
|||
|
|
<td>{{:Assignee}}</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td class="CardHeader"> Summary: </td>
|
|||
|
|
<td>{{:Summary}}</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td class="CardHeader"> Type: </td>
|
|||
|
|
<td>{{:Type}}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</script>
|
|||
|
|
<style type="text/css">
|
|||
|
|
.e-templatetable {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.details >table {
|
|||
|
|
margin-left:2px;
|
|||
|
|
border-collapse: separate;
|
|||
|
|
border-spacing: 2px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.details td {
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.details {
|
|||
|
|
padding: 8px 8px 10px 0;
|
|||
|
|
}
|
|||
|
|
.photo {
|
|||
|
|
padding: 8px 6px 10px 6px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.CardHeader {
|
|||
|
|
font-weight: bolder;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(function () {
|
|||
|
|
var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(30));
|
|||
|
|
$("#Kanban").ejKanban(
|
|||
|
|
{
|
|||
|
|
dataSource: data,
|
|||
|
|
columns: [
|
|||
|
|
{ headerText: "Backlog", key: "Open"},
|
|||
|
|
{ headerText: "In Progress", key: "InProgress"},
|
|||
|
|
{ headerText: "Done", key: "Close"}
|
|||
|
|
],
|
|||
|
|
keyField: "Status",
|
|||
|
|
allowTitle: true,
|
|||
|
|
fields: {
|
|||
|
|
primaryKey: "Id",
|
|||
|
|
color: "Type",
|
|||
|
|
},
|
|||
|
|
cardSettings: {
|
|||
|
|
template: "#cardtemplate",
|
|||
|
|
colorMapping: {
|
|||
|
|
"#cb2027": "Bug,Story",
|
|||
|
|
"#67ab47": "Improvement",
|
|||
|
|
"#fbae19": "Epic",
|
|||
|
|
"#6a5da8": "Others"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
allowSelection: false
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|