jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
80 lines (73 loc) • 4.22 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example illustrates Knockout integration of pageable jqxGrid.
</title>
<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="../../../scripts/json2.js"></script>
<script type="text/javascript" src="../../../scripts/knockout-3.0.0.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxknockout.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
function Person(data) {
this.Title = ko.observable(data.Title);
this.Company = ko.observable(data.Company);
this.Name = ko.observable(data.Name);
};
var viewModel = {
items: ko.observableArray([
new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
new Person({ Title: "Vice President", Company: "Berglunds snabbkop", Name: "Robert King" })
])
};
$(document).ready(function () {
ko.applyBindings(viewModel);
});
function addRow() {
var count = viewModel.items().length;
viewModel.items.push(new Person({ Title: "Title" + count, Company: "Company" + count, Name: "Name" + count }));
};
</script>
</head>
<body>
<div>
<div id="jqxgrid" data-bind="jqxGrid: { source: items, columns: [
{ text: 'Title', dataField: 'Title', width: 200 },
{ text: 'Company', dataField: 'Company', width: 200},
{ text: 'Name', dataField: 'Name', width: 200 }
], pageable: true, pagesize: 5, autoheight: true}">
</div>
<table style="margin-top: 20px;">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: Title"></td>
<td data-bind="text: Company"></td>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
<div>
<input data-bind="jqxButton: {}" type="button" id="addRowButton" onclick="addRow()" value="Add row" />
</div>
</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>