jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
227 lines (214 loc) • 11.3 kB
HTML
<html lang="en">
<head>
<title id="Description">Data Rows with customized rendering in jqxDataTable</title>
<meta name="description" content="This sample demonstrates how we can customize the rendering of the Data Rows in the jQWidgets DataTable widget.">
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = [
{
laptops:
[
{ img: '../../../images/l-13.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 2999, display: 15.4, hdd: '512GB SSD', model: 'Apple MacBook Pro' },
{ img: '../../../images/l-14.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3667U', price: 1299, display: 13.3, hdd: '256GB SSD', model: 'Apple MacBook Air' },
{ img: '../../../images/l-15.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3632QM', price: 2199, display: 15.4, hdd: '256GB SSD', model: 'Asus ZenBook UX51VZ' }
]
},
{
laptops:
[
{ img: '../../../images/l-16.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U', price: 1899, display: 13.3, hdd: '128GB SSD', model: 'ASUS TAICHI31-CX009H' },
{ img: '../../../images/l-17.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3517U', price: 1799, display: 13.3, hdd: '628GB', model: 'Asus TX300CA-C4024H' },
{ img: '../../../images/l-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' }
]
},
{
laptops:
[
{ img: '../../../images/l-19.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3210M', price: 1499, display: 15.6, hdd: '750GB', model: 'Samsung Series 7 Chronos' },
{ img: '../../../images/l-20.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 1499, display: 17.3, hdd: '256GB SSD', model: 'HP EliteBook 8770w' },
{ img: '../../../images/l-21.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3517U', price: 1499, display: 14.0, hdd: '512GB', model: 'Dell XPS 14' }
]
},
{
laptops:
[
{ img: '../../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' },
{ img: '../../../images/l-23.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1699, display: 15.6, hdd: '1TB', model: 'Acer Aspire R7-571G' },
{ img: '../../../images/l-24.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-4500U', price: 1599, display: 15.6, hdd: '256GB SSD', model: 'Acer Aspire V5-573G' }
]
},
{
laptops:
[
{ img: '../../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
{ img: '../../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
{ img: '../../../images/l-27.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' }
]
},
{
laptops:
[
{ img: '../../../images/l-28.png', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
{ img: '../../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
{ img: '../../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' }
]
}
];
var source =
{
localData: data,
dataType: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
var itemsInCart = 0;
$("#dataTable").jqxDataTable(
{
width: 640,
source: dataAdapter,
sortable: true,
pageable: true,
pageSize: 2,
pagerButtonsCount: 5,
enableHover: false,
selectionMode: 'none',
rendered: function () {
$(".buy").jqxButton();
$(".buy").click(function () {
itemsInCart++;
$(".cart-top p").html(itemsInCart + " products");
});
},
columns: [
{
text: 'Products', align: 'left', dataField: 'model',
// row - row's index.
// column - column's data field.
// value - cell's value.
// rowData - rendered row's object.
cellsRenderer: function (row, column, value, rowData) {
var laptops = rowData.laptops;
var container = "<div>";
for (var i = 0; i < laptops.length; i++) {
var laptop = laptops[i];
var item = "<div style='float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;'>";
var image = "<div style='margin: 5px; margin-bottom: 3px;'>";
var imgurl = laptop.img;
var img = '<img width=160 height=120 style="display: block;" src="' + imgurl + '"/>';
image += img;
image += "</div>";
var info = "<div style='margin: 5px; margin-left: 10px; margin-bottom: 3px;'>";
info += "<div><i>" + laptop.model + "</i></div>";
info += "<div>Price: $" + laptop.price + "</div>";
info += "<div>RAM: " + laptop.ram + "</div>";
info += "<div>HDD: " + laptop.hdd + "</div>";
info += "<div>CPU: " + laptop.cpu + "</div>";
info += "<div>Display: " + laptop.display + "</div>";
info += "</div>";
var buy = "<button class='buy' style='margin: 5px; width: 80px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;'>Buy</button>";
item += image;
item += info;
item += buy;
item += "</div>";
container += item;
}
container += "</div>";
return container;
}
}
]
});
});
</script>
<style>
h4 {
font-size: 14px;
margin: 18px 0 15px 15px;
}
.tag-title-info {
background: transparent;
width: 1px;
height: 0px;
border-color: #4272b8 transparent #4272b8 #4272b8 ;
border-width: 26px 26px;
border-style: solid;
z-index: 1000;
top: 0px;
position: absolute;
left: 598px;
}
.tag-title {
font-size: 16px;
color: #fff;
position: absolute;
z-index: 100;
left: 0;
line-height: 100%;
background: #4272b8 ;
height: 52px;
padding: 0px;
margin: 0px;
top: 0px;
width: 500px;
vertical-align: middle;
}
.cart-top {
font-family: Arial, Helvetica, sans-serif;
height: 35px;
position: absolute;
left: 500px;
top: 0;
color: #fff;
padding: 16px 14px 1px 14px;
font-size: 11px;
font-weight: 400;
background: #4272b8 ;
z-index: 199;
}
.cart-top p {
font-weight: bold;
font-size: 11px;
background: url(../../../images/cart-icon.png) no-repeat right center;
min-height: 16px;
text-align: left;
padding: 0 24px 0 0;
margin-top: 2px;
float: left;
font-size: 11px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body class='default'>
<div class="cart-top">
<p>0 products</p>
</div>
<div>
<div>
<div class="tag-title">
<h4>Welcome to our online shop!</h4>
<span class="tag-title-info"></span>
</div>
</div>
</div>
<br />
<div style="margin-top: 60px;" id="dataTable"></div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>