javascript-ej1-demos/grid/gridsorting.html

50 строки
2.2 KiB
HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 1 : Sorting</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/jsondata.min.js"></script>
<script src="../scripts/jsrender.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="Grid"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
allowSorting: true,
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 100 },
{ field: "ShipCity", headerText: "Ship City", width: 130 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 120 },
{ field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 100, format: "{0:C}" },
{ field: "Verified", headerText: "Verified", width: 100 }
]
});
});
</script>
</body>
</html>