jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
135 lines (121 loc) • 6.02 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script src="../../scripts/angular.min.js"></script>
<script src="../../scripts/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.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.columnsresize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-resource.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript">
angular.module('jqxgrid.error', ['ngResource', 'ui.router', 'jqwidgets']).config(configDetails);
function configDetails($stateProvider) {
$stateProvider.state('ng1', {
url: '/jqwidget/ng1',
template: '<div name="first page" ng-controller="jqxgridErrorController"><jqx-grid id="grid1" jqx-create="createWidget" jqx-settings="gridSettings" jqx-alt-rows="true" ></jqx-grid></div>'
//controller: jqxgridErrorController
}).state('ng2', {
url: '/jqwidget/ng2',
template: '<div name="second page" ng-controller="jqxgridErrorController"><jqx-grid id="grid2" jqx-create="createWidget" jqx-settings="gridSettings" jqx-alt-rows="true" ></jqx-grid></div>'
//controller: jqxgridErrorController
});
}
angular
.module('jqxgrid.error')
.controller('jqxgridErrorController', jqxgridErrorController);
function jqxgridErrorController($scope) {
var generatedata = function (startindex, endindex) {
var data = [];
for (var i = startindex; i < endindex; i++) {
var row = {};
row["data1"] = 1;
row["data2"] = 'Joe';
row["data3"] = '123';
row["data4"] = 5;
row["data5"] = 'Smith';
row["data6"] = '789';
row["data7"] = 'USA';
data[i] = row;
}
return data;
};
var source =
{
datatype: 'array',
localdata: {},
//id: 'customerNumber',
datafields: [
{ name: 'data1' },
{ name: 'data2' },
{ name: 'data3' },
{ name: 'data4' },
{ name: 'data5' },
{ name: 'data6' },
{ name: 'data7' }
]
};
source.localdata = generatedata(0, 100);
var dataAdapter = new $.jqx.dataAdapter(source);
$scope.gridSettings =
{
source: dataAdapter,
altrows: true, // alternating row styling
virtualmode: true,
theme: 'energyblue',
rendergridrows: function () {
//return obj.data;
//var data = generatedata(params.startindex, params.endindex);
var data = generatedata(0, 100);
return data;
},
sortable: false,
columns: [
{ text: 'col 1', datafield: 'data1', width: 50, cellsalign: 'right' },
{ text: 'col 2', datafield: 'data2', minwidth: 120 },
{ text: 'col 3', datafield: 'data3', width: 120 },
{ text: 'col 4', datafield: 'data4', cellsalign: 'right', width: 50 },
{ text: 'col 5', datafield: 'data5', width: 130 },
{ text: 'col 6', datafield: 'data6', width: 130 },
{ text: 'col 7', datafield: 'data7', width: 150 }
]
};
activate();
function activate() {
$scope.createWidget = true;
}
}
</script>
</head>
<body>
<div ng-app="jqxgrid.error">
<div>
<div ui-view>
<div ng-controller="jqxgridErrorController">
<jqx-grid id="grid1" jqx-create="createWidget" jqx-settings="gridSettings" jqx-alt-rows="true">
</jqx-grid>
</div>
</div>
</div>
<br />
<a href="#/jqwidget/ng1">page 1</a>
<a href="#/jqwidget/ng2">page 2</a>
</div>
</body>
</html>