new ui with AdminLTE
This commit is contained in:
59
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/basic.html
Executable file
59
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/basic.html
Executable file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Basic Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Basic Scenario</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
inserting: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
deleteConfirm: "Do you really want to delete the client?",
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{ type: "control" }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
102
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/batch-delete.html
Executable file
102
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/batch-delete.html
Executable file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Batch Delete</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Batch Delete</h1>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
confirmDeleting: false,
|
||||
paging: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
return db.clients;
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
headerTemplate: function() {
|
||||
return $("<button>").attr("type", "button").text("Delete")
|
||||
.on("click", function () {
|
||||
deleteSelectedItems();
|
||||
});
|
||||
},
|
||||
itemTemplate: function(_, item) {
|
||||
return $("<input>").attr("type", "checkbox")
|
||||
.prop("checked", $.inArray(item, selectedItems) > -1)
|
||||
.on("change", function () {
|
||||
$(this).is(":checked") ? selectItem(item) : unselectItem(item);
|
||||
});
|
||||
},
|
||||
align: "center",
|
||||
width: 50
|
||||
},
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
var selectedItems = [];
|
||||
|
||||
var selectItem = function(item) {
|
||||
selectedItems.push(item);
|
||||
};
|
||||
|
||||
var unselectItem = function(item) {
|
||||
selectedItems = $.grep(selectedItems, function(i) {
|
||||
return i !== item;
|
||||
});
|
||||
};
|
||||
|
||||
var deleteSelectedItems = function() {
|
||||
if(!selectedItems.length || !confirm("Are you sure?"))
|
||||
return;
|
||||
|
||||
deleteClientsFromDb(selectedItems);
|
||||
|
||||
var $grid = $("#jsGrid");
|
||||
$grid.jsGrid("option", "pageIndex", 1);
|
||||
$grid.jsGrid("loadData");
|
||||
|
||||
selectedItems = [];
|
||||
};
|
||||
|
||||
var deleteClientsFromDb = function(deletingClients) {
|
||||
db.clients = $.map(db.clients, function(client) {
|
||||
return ($.inArray(client, deletingClients) > -1) ? null : client;
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
97
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/custom-grid-field.html
Executable file
97
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/custom-grid-field.html
Executable file
@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom Grid Field Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css' />
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
|
||||
<style>
|
||||
.hasDatepicker {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-datepicker * {
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-size: 14px;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom Grid DateField</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
var MyDateField = function(config) {
|
||||
jsGrid.Field.call(this, config);
|
||||
};
|
||||
|
||||
MyDateField.prototype = new jsGrid.Field({
|
||||
sorter: function(date1, date2) {
|
||||
return new Date(date1) - new Date(date2);
|
||||
},
|
||||
|
||||
itemTemplate: function(value) {
|
||||
return new Date(value).toDateString();
|
||||
},
|
||||
|
||||
insertTemplate: function(value) {
|
||||
return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
|
||||
},
|
||||
|
||||
editTemplate: function(value) {
|
||||
return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
|
||||
},
|
||||
|
||||
insertValue: function() {
|
||||
return this._insertPicker.datepicker("getDate").toISOString();
|
||||
},
|
||||
|
||||
editValue: function() {
|
||||
return this._editPicker.datepicker("getDate").toISOString();
|
||||
}
|
||||
});
|
||||
|
||||
jsGrid.fields.myDateField = MyDateField;
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
inserting: true,
|
||||
editing: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
fields: [
|
||||
{ name: "Account", width: 150, align: "center" },
|
||||
{ name: "Name", type: "text" },
|
||||
{ name: "RegisterDate", type: "myDateField", width: 100, align: "center" },
|
||||
{ type: "control", editButton: false, modeSwitchButton: false }
|
||||
],
|
||||
data: db.users
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom Load Indicator</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script>
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.textarea.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
|
||||
<style>
|
||||
.rating {
|
||||
color: #F8CA03;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom Load Indicator</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
sorting: true,
|
||||
paging: false,
|
||||
autoload: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
var d = $.Deferred();
|
||||
|
||||
$.ajax({
|
||||
url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
|
||||
dataType: "json"
|
||||
}).done(function(response) {
|
||||
setTimeout(function() {
|
||||
d.resolve(response.value);
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
return d.promise();
|
||||
}
|
||||
},
|
||||
loadIndicator: function(config) {
|
||||
var container = config.container[0];
|
||||
var spinner = new Spinner();
|
||||
|
||||
return {
|
||||
show: function() {
|
||||
spinner.spin(container);
|
||||
},
|
||||
hide: function() {
|
||||
spinner.stop();
|
||||
}
|
||||
};
|
||||
},
|
||||
fields: [
|
||||
{ name: "Name", type: "text" },
|
||||
{ name: "Description", type: "textarea", width: 150 },
|
||||
{ name: "Rating", type: "number", width: 50, align: "center",
|
||||
itemTemplate: function(value) {
|
||||
return $("<div>").addClass("rating").append(Array(value + 1).join("★"));
|
||||
}
|
||||
},
|
||||
{ name: "Price", type: "number", width: 50,
|
||||
itemTemplate: function(value) {
|
||||
return value.toFixed(2) + "$"; }
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/custom-row-renderer.html
Executable file
79
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/custom-row-renderer.html
Executable file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom Row Renderer</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
|
||||
<style>
|
||||
.client-photo { float: left; margin: 0 20px 0 10px; }
|
||||
.client-photo img { border-radius: 50%; border: 1px solid #ddd; }
|
||||
.client-info { margin-top: 10px; }
|
||||
.client-info p { line-height: 25px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom Row Renderer</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "80%",
|
||||
width: "50%",
|
||||
autoload: true,
|
||||
paging: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
var deferred = $.Deferred();
|
||||
|
||||
$.ajax({
|
||||
url: 'http://api.randomuser.me/?results=40',
|
||||
dataType: 'jsonp',
|
||||
success: function(data){
|
||||
deferred.resolve(data.results);
|
||||
}
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
},
|
||||
rowRenderer: function(item) {
|
||||
var user = item;
|
||||
var $photo = $("<div>").addClass("client-photo").append($("<img>").attr("src", user.picture.large));
|
||||
var $info = $("<div>").addClass("client-info")
|
||||
.append($("<p>").append($("<strong>").text(user.name.first.capitalize() + " " + user.name.last.capitalize())))
|
||||
.append($("<p>").text("Location: " + user.location.city.capitalize() + ", " + user.location.street))
|
||||
.append($("<p>").text("Email: " + user.email))
|
||||
.append($("<p>").text("Phone: " + user.phone))
|
||||
.append($("<p>").text("Cell: " + user.cell));
|
||||
|
||||
return $("<tr>").append($("<td>").append($photo).append($info));
|
||||
},
|
||||
fields: [
|
||||
{ title: "Clients" }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
String.prototype.capitalize = function() {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/custom-view.html
Executable file
85
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/custom-view.html
Executable file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Custom View Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
|
||||
<style>
|
||||
.config-panel {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e9e9e9;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.config-panel label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Custom View</h1>
|
||||
<div class="config-panel">
|
||||
<label><input id="heading" type="checkbox" checked /> Heading</label>
|
||||
<label><input id="filtering" type="checkbox" checked /> Filtering</label>
|
||||
<label><input id="inserting" type="checkbox" /> Inserting</label>
|
||||
<label><input id="editing" type="checkbox" checked /> Editing</label>
|
||||
<label><input id="paging" type="checkbox" checked /> Paging</label>
|
||||
<label><input id="sorting" type="checkbox" checked /> Sorting</label>
|
||||
<label><input id="selecting" type="checkbox" checked /> Selecting</label>
|
||||
</div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{ type: "control", modeSwitchButton: false, editButton: false }
|
||||
]
|
||||
});
|
||||
|
||||
$(".config-panel input[type=checkbox]").on("click", function() {
|
||||
var $cb = $(this);
|
||||
$("#jsGrid").jsGrid("option", $cb.attr("id"), $cb.is(":checked"));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
212
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/data-manipulation.html
Executable file
212
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/data-manipulation.html
Executable file
@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Data Manipulation</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
||||
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
|
||||
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
|
||||
<style>
|
||||
.ui-widget *, .ui-widget input, .ui-widget select, .ui-widget button {
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-size: 14px;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.details-form-field input,
|
||||
.details-form-field select {
|
||||
width: 250px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.details-form-field {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.details-form-field:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.details-form-field:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.details-form-field button {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input.error, select.error {
|
||||
border: 1px solid #ff9999;
|
||||
background: #ffeeee;
|
||||
}
|
||||
|
||||
label.error {
|
||||
float: right;
|
||||
margin-left: 100px;
|
||||
font-size: .8em;
|
||||
color: #ff6666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Data Manipulation</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<div id="detailsDialog">
|
||||
<form id="detailsForm">
|
||||
<div class="details-form-field">
|
||||
<label for="name">Name:</label>
|
||||
<input id="name" name="name" type="text" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="age">Age:</label>
|
||||
<input id="age" name="age" type="number" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="address">Address:</label>
|
||||
<input id="address" name="address" type="text" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="country">Country:</label>
|
||||
<select id="country" name="country">
|
||||
<option value="">(Select)</option>
|
||||
<option value="1">United States</option>
|
||||
<option value="2">Canada</option>
|
||||
<option value="3">United Kingdom</option>
|
||||
<option value="4">France</option>
|
||||
<option value="5">Brazil</option>
|
||||
<option value="6">China</option>
|
||||
<option value="7">Russia</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<label for="married">Is Married</label>
|
||||
<input id="married" name="married" type="checkbox" />
|
||||
</div>
|
||||
<div class="details-form-field">
|
||||
<button type="submit" id="save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
editing: true,
|
||||
autoload: true,
|
||||
paging: true,
|
||||
deleteConfirm: function(item) {
|
||||
return "The client \"" + item.Name + "\" will be removed. Are you sure?";
|
||||
},
|
||||
rowClick: function(args) {
|
||||
showDetailsDialog("Edit", args.item);
|
||||
},
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{
|
||||
type: "control",
|
||||
modeSwitchButton: false,
|
||||
editButton: false,
|
||||
headerTemplate: function() {
|
||||
return $("<button>").attr("type", "button").text("Add")
|
||||
.on("click", function () {
|
||||
showDetailsDialog("Add", {});
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$("#detailsDialog").dialog({
|
||||
autoOpen: false,
|
||||
width: 400,
|
||||
close: function() {
|
||||
$("#detailsForm").validate().resetForm();
|
||||
$("#detailsForm").find(".error").removeClass("error");
|
||||
}
|
||||
});
|
||||
|
||||
$("#detailsForm").validate({
|
||||
rules: {
|
||||
name: "required",
|
||||
age: { required: true, range: [18, 150] },
|
||||
address: { required: true, minlength: 10 },
|
||||
country: "required"
|
||||
},
|
||||
messages: {
|
||||
name: "Please enter name",
|
||||
age: "Please enter valid age",
|
||||
address: "Please enter address (more than 10 chars)",
|
||||
country: "Please select country"
|
||||
},
|
||||
submitHandler: function() {
|
||||
formSubmitHandler();
|
||||
}
|
||||
});
|
||||
|
||||
var formSubmitHandler = $.noop;
|
||||
|
||||
var showDetailsDialog = function(dialogType, client) {
|
||||
$("#name").val(client.Name);
|
||||
$("#age").val(client.Age);
|
||||
$("#address").val(client.Address);
|
||||
$("#country").val(client.Country);
|
||||
$("#married").prop("checked", client.Married);
|
||||
|
||||
formSubmitHandler = function() {
|
||||
saveClient(client, dialogType === "Add");
|
||||
};
|
||||
|
||||
$("#detailsDialog").dialog("option", "title", dialogType + " Client")
|
||||
.dialog("open");
|
||||
};
|
||||
|
||||
var saveClient = function(client, isNew) {
|
||||
$.extend(client, {
|
||||
Name: $("#name").val(),
|
||||
Age: parseInt($("#age").val(), 10),
|
||||
Address: $("#address").val(),
|
||||
Country: parseInt($("#country").val(), 10),
|
||||
Married: $("#married").is(":checked")
|
||||
});
|
||||
|
||||
$("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client);
|
||||
|
||||
$("#detailsDialog").dialog("close");
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
884
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/db.js
Normal file
884
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/db.js
Normal file
@ -0,0 +1,884 @@
|
||||
(function() {
|
||||
|
||||
var db = {
|
||||
|
||||
loadData: function(filter) {
|
||||
return $.grep(this.clients, function(client) {
|
||||
return (!filter.Name || client.Name.indexOf(filter.Name) > -1)
|
||||
&& (filter.Age === undefined || client.Age === filter.Age)
|
||||
&& (!filter.Address || client.Address.indexOf(filter.Address) > -1)
|
||||
&& (!filter.Country || client.Country === filter.Country)
|
||||
&& (filter.Married === undefined || client.Married === filter.Married);
|
||||
});
|
||||
},
|
||||
|
||||
insertItem: function(insertingClient) {
|
||||
this.clients.push(insertingClient);
|
||||
},
|
||||
|
||||
updateItem: function(updatingClient) { },
|
||||
|
||||
deleteItem: function(deletingClient) {
|
||||
var clientIndex = $.inArray(deletingClient, this.clients);
|
||||
this.clients.splice(clientIndex, 1);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
window.db = db;
|
||||
|
||||
|
||||
db.countries = [
|
||||
{ Name: "", Id: 0 },
|
||||
{ Name: "United States", Id: 1 },
|
||||
{ Name: "Canada", Id: 2 },
|
||||
{ Name: "United Kingdom", Id: 3 },
|
||||
{ Name: "France", Id: 4 },
|
||||
{ Name: "Brazil", Id: 5 },
|
||||
{ Name: "China", Id: 6 },
|
||||
{ Name: "Russia", Id: 7 }
|
||||
];
|
||||
|
||||
db.clients = [
|
||||
{
|
||||
"Name": "Otto Clay",
|
||||
"Age": 61,
|
||||
"Country": 6,
|
||||
"Address": "Ap #897-1459 Quam Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Connor Johnston",
|
||||
"Age": 73,
|
||||
"Country": 7,
|
||||
"Address": "Ap #370-4647 Dis Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lacey Hess",
|
||||
"Age": 29,
|
||||
"Country": 7,
|
||||
"Address": "Ap #365-8835 Integer St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Timothy Henson",
|
||||
"Age": 78,
|
||||
"Country": 1,
|
||||
"Address": "911-5143 Luctus Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Ramona Benton",
|
||||
"Age": 43,
|
||||
"Country": 5,
|
||||
"Address": "Ap #614-689 Vehicula Street",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Ezra Tillman",
|
||||
"Age": 51,
|
||||
"Country": 1,
|
||||
"Address": "P.O. Box 738, 7583 Quisque St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Dante Carter",
|
||||
"Age": 59,
|
||||
"Country": 1,
|
||||
"Address": "P.O. Box 976, 6316 Lorem, St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Christopher Mcclure",
|
||||
"Age": 58,
|
||||
"Country": 1,
|
||||
"Address": "847-4303 Dictum Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Ruby Rocha",
|
||||
"Age": 62,
|
||||
"Country": 2,
|
||||
"Address": "5212 Sagittis Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Imelda Hardin",
|
||||
"Age": 39,
|
||||
"Country": 5,
|
||||
"Address": "719-7009 Auctor Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Jonah Johns",
|
||||
"Age": 28,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 939, 9310 A Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Herman Rosa",
|
||||
"Age": 49,
|
||||
"Country": 7,
|
||||
"Address": "718-7162 Molestie Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Arthur Gay",
|
||||
"Age": 20,
|
||||
"Country": 7,
|
||||
"Address": "5497 Neque Street",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Xena Wilkerson",
|
||||
"Age": 63,
|
||||
"Country": 1,
|
||||
"Address": "Ap #303-6974 Proin Street",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lilah Atkins",
|
||||
"Age": 33,
|
||||
"Country": 5,
|
||||
"Address": "622-8602 Gravida Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Malik Shepard",
|
||||
"Age": 59,
|
||||
"Country": 1,
|
||||
"Address": "967-5176 Tincidunt Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Keely Silva",
|
||||
"Age": 24,
|
||||
"Country": 1,
|
||||
"Address": "P.O. Box 153, 8995 Praesent Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Hunter Pate",
|
||||
"Age": 73,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 771, 7599 Ante, Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Mikayla Roach",
|
||||
"Age": 55,
|
||||
"Country": 5,
|
||||
"Address": "Ap #438-9886 Donec Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Upton Joseph",
|
||||
"Age": 48,
|
||||
"Country": 4,
|
||||
"Address": "Ap #896-7592 Habitant St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Jeanette Pate",
|
||||
"Age": 59,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 177, 7584 Amet, St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kaden Hernandez",
|
||||
"Age": 79,
|
||||
"Country": 3,
|
||||
"Address": "366 Ut St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Kenyon Stevens",
|
||||
"Age": 20,
|
||||
"Country": 3,
|
||||
"Address": "P.O. Box 704, 4580 Gravida Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Jerome Harper",
|
||||
"Age": 31,
|
||||
"Country": 5,
|
||||
"Address": "2464 Porttitor Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Jelani Patel",
|
||||
"Age": 36,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 541, 5805 Nec Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Keaton Oconnor",
|
||||
"Age": 21,
|
||||
"Country": 1,
|
||||
"Address": "Ap #657-1093 Nec, Street",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Bree Johnston",
|
||||
"Age": 31,
|
||||
"Country": 2,
|
||||
"Address": "372-5942 Vulputate Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Maisie Hodges",
|
||||
"Age": 70,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 445, 3880 Odio, Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kuame Calhoun",
|
||||
"Age": 39,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 609, 4105 Rutrum St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Carlos Cameron",
|
||||
"Age": 38,
|
||||
"Country": 5,
|
||||
"Address": "Ap #215-5386 A, Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Fulton Parsons",
|
||||
"Age": 25,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 523, 3705 Sed Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Wallace Christian",
|
||||
"Age": 43,
|
||||
"Country": 3,
|
||||
"Address": "416-8816 Mauris Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Caryn Maldonado",
|
||||
"Age": 40,
|
||||
"Country": 1,
|
||||
"Address": "108-282 Nonummy Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Whilemina Frank",
|
||||
"Age": 20,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 681, 3938 Egestas. Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Emery Moon",
|
||||
"Age": 41,
|
||||
"Country": 4,
|
||||
"Address": "Ap #717-8556 Non Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Price Watkins",
|
||||
"Age": 35,
|
||||
"Country": 4,
|
||||
"Address": "832-7810 Nunc Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lydia Castillo",
|
||||
"Age": 59,
|
||||
"Country": 7,
|
||||
"Address": "5280 Placerat, Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lawrence Conway",
|
||||
"Age": 53,
|
||||
"Country": 1,
|
||||
"Address": "Ap #452-2808 Imperdiet St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kalia Nicholson",
|
||||
"Age": 67,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 871, 3023 Tellus Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Brielle Baxter",
|
||||
"Age": 45,
|
||||
"Country": 3,
|
||||
"Address": "Ap #822-9526 Ut, Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Valentine Brady",
|
||||
"Age": 72,
|
||||
"Country": 7,
|
||||
"Address": "8014 Enim. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Rebecca Gardner",
|
||||
"Age": 57,
|
||||
"Country": 4,
|
||||
"Address": "8655 Arcu. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Vladimir Tate",
|
||||
"Age": 26,
|
||||
"Country": 1,
|
||||
"Address": "130-1291 Non, Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Vernon Hays",
|
||||
"Age": 56,
|
||||
"Country": 4,
|
||||
"Address": "964-5552 In Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Allegra Hull",
|
||||
"Age": 22,
|
||||
"Country": 4,
|
||||
"Address": "245-8891 Donec St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Hu Hendrix",
|
||||
"Age": 65,
|
||||
"Country": 7,
|
||||
"Address": "428-5404 Tempus Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Kenyon Battle",
|
||||
"Age": 32,
|
||||
"Country": 2,
|
||||
"Address": "921-6804 Lectus St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Gloria Nielsen",
|
||||
"Age": 24,
|
||||
"Country": 4,
|
||||
"Address": "Ap #275-4345 Lorem, Street",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Illiana Kidd",
|
||||
"Age": 59,
|
||||
"Country": 2,
|
||||
"Address": "7618 Lacus. Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Adria Todd",
|
||||
"Age": 68,
|
||||
"Country": 6,
|
||||
"Address": "1889 Tincidunt Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kirsten Mayo",
|
||||
"Age": 71,
|
||||
"Country": 1,
|
||||
"Address": "100-8640 Orci, Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Willa Hobbs",
|
||||
"Age": 60,
|
||||
"Country": 6,
|
||||
"Address": "P.O. Box 323, 158 Tristique St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Alexis Clements",
|
||||
"Age": 69,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 176, 5107 Proin Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Akeem Conrad",
|
||||
"Age": 60,
|
||||
"Country": 2,
|
||||
"Address": "282-495 Sed Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Montana Silva",
|
||||
"Age": 79,
|
||||
"Country": 6,
|
||||
"Address": "P.O. Box 120, 9766 Consectetuer St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kaseem Hensley",
|
||||
"Age": 77,
|
||||
"Country": 6,
|
||||
"Address": "Ap #510-8903 Mauris. Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Christopher Morton",
|
||||
"Age": 35,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 234, 3651 Sodales Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Wade Fernandez",
|
||||
"Age": 49,
|
||||
"Country": 6,
|
||||
"Address": "740-5059 Dolor. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Illiana Kirby",
|
||||
"Age": 31,
|
||||
"Country": 2,
|
||||
"Address": "527-3553 Mi Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kimberley Hurley",
|
||||
"Age": 65,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 637, 9915 Dictum St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Arthur Olsen",
|
||||
"Age": 74,
|
||||
"Country": 5,
|
||||
"Address": "887-5080 Eget St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Brody Potts",
|
||||
"Age": 59,
|
||||
"Country": 2,
|
||||
"Address": "Ap #577-7690 Sem Road",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Dillon Ford",
|
||||
"Age": 60,
|
||||
"Country": 1,
|
||||
"Address": "Ap #885-9289 A, Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Hannah Juarez",
|
||||
"Age": 61,
|
||||
"Country": 2,
|
||||
"Address": "4744 Sapien, Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Vincent Shaffer",
|
||||
"Age": 25,
|
||||
"Country": 2,
|
||||
"Address": "9203 Nunc St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "George Holt",
|
||||
"Age": 27,
|
||||
"Country": 6,
|
||||
"Address": "4162 Cras Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Tobias Bartlett",
|
||||
"Age": 74,
|
||||
"Country": 4,
|
||||
"Address": "792-6145 Mauris St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Xavier Hooper",
|
||||
"Age": 35,
|
||||
"Country": 1,
|
||||
"Address": "879-5026 Interdum. Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Declan Dorsey",
|
||||
"Age": 31,
|
||||
"Country": 2,
|
||||
"Address": "Ap #926-4171 Aenean Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Clementine Tran",
|
||||
"Age": 43,
|
||||
"Country": 4,
|
||||
"Address": "P.O. Box 176, 9865 Eu Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Pamela Moody",
|
||||
"Age": 55,
|
||||
"Country": 6,
|
||||
"Address": "622-6233 Luctus Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Julie Leon",
|
||||
"Age": 43,
|
||||
"Country": 6,
|
||||
"Address": "Ap #915-6782 Sem Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Shana Nolan",
|
||||
"Age": 79,
|
||||
"Country": 5,
|
||||
"Address": "P.O. Box 603, 899 Eu St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Vaughan Moody",
|
||||
"Age": 37,
|
||||
"Country": 5,
|
||||
"Address": "880 Erat Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Randall Reeves",
|
||||
"Age": 44,
|
||||
"Country": 3,
|
||||
"Address": "1819 Non Street",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Dominic Raymond",
|
||||
"Age": 68,
|
||||
"Country": 1,
|
||||
"Address": "Ap #689-4874 Nisi Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lev Pugh",
|
||||
"Age": 69,
|
||||
"Country": 5,
|
||||
"Address": "Ap #433-6844 Auctor Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Desiree Hughes",
|
||||
"Age": 80,
|
||||
"Country": 4,
|
||||
"Address": "605-6645 Fermentum Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Idona Oneill",
|
||||
"Age": 23,
|
||||
"Country": 7,
|
||||
"Address": "751-8148 Aliquam Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Lani Mayo",
|
||||
"Age": 76,
|
||||
"Country": 1,
|
||||
"Address": "635-2704 Tristique St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Cathleen Bonner",
|
||||
"Age": 40,
|
||||
"Country": 1,
|
||||
"Address": "916-2910 Dolor Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Sydney Murray",
|
||||
"Age": 44,
|
||||
"Country": 5,
|
||||
"Address": "835-2330 Fringilla St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Brenna Rodriguez",
|
||||
"Age": 77,
|
||||
"Country": 6,
|
||||
"Address": "3687 Imperdiet Av.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Alfreda Mcdaniel",
|
||||
"Age": 38,
|
||||
"Country": 7,
|
||||
"Address": "745-8221 Aliquet Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Zachery Atkins",
|
||||
"Age": 30,
|
||||
"Country": 1,
|
||||
"Address": "549-2208 Auctor. Road",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Amelia Rich",
|
||||
"Age": 56,
|
||||
"Country": 4,
|
||||
"Address": "P.O. Box 734, 4717 Nunc Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kiayada Witt",
|
||||
"Age": 62,
|
||||
"Country": 3,
|
||||
"Address": "Ap #735-3421 Malesuada Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lysandra Pierce",
|
||||
"Age": 36,
|
||||
"Country": 1,
|
||||
"Address": "Ap #146-2835 Curabitur St.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Cara Rios",
|
||||
"Age": 58,
|
||||
"Country": 4,
|
||||
"Address": "Ap #562-7811 Quam. Ave",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Austin Andrews",
|
||||
"Age": 55,
|
||||
"Country": 7,
|
||||
"Address": "P.O. Box 274, 5505 Sociis Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Lillian Peterson",
|
||||
"Age": 39,
|
||||
"Country": 2,
|
||||
"Address": "6212 A Avenue",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Adria Beach",
|
||||
"Age": 29,
|
||||
"Country": 2,
|
||||
"Address": "P.O. Box 183, 2717 Nunc Avenue",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Oleg Durham",
|
||||
"Age": 80,
|
||||
"Country": 4,
|
||||
"Address": "931-3208 Nunc Rd.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Casey Reese",
|
||||
"Age": 60,
|
||||
"Country": 4,
|
||||
"Address": "383-3675 Ultrices, St.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kane Burnett",
|
||||
"Age": 80,
|
||||
"Country": 1,
|
||||
"Address": "759-8212 Dolor. Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Stewart Wilson",
|
||||
"Age": 46,
|
||||
"Country": 7,
|
||||
"Address": "718-7845 Sagittis. Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Charity Holcomb",
|
||||
"Age": 31,
|
||||
"Country": 6,
|
||||
"Address": "641-7892 Enim. Ave",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Kyra Cummings",
|
||||
"Age": 43,
|
||||
"Country": 4,
|
||||
"Address": "P.O. Box 702, 6621 Mus. Av.",
|
||||
"Married": false
|
||||
},
|
||||
{
|
||||
"Name": "Stuart Wallace",
|
||||
"Age": 25,
|
||||
"Country": 7,
|
||||
"Address": "648-4990 Sed Rd.",
|
||||
"Married": true
|
||||
},
|
||||
{
|
||||
"Name": "Carter Clarke",
|
||||
"Age": 59,
|
||||
"Country": 6,
|
||||
"Address": "Ap #547-2921 A Street",
|
||||
"Married": false
|
||||
}
|
||||
];
|
||||
|
||||
db.users = [
|
||||
{
|
||||
"ID": "x",
|
||||
"Account": "A758A693-0302-03D1-AE53-EEFE22855556",
|
||||
"Name": "Carson Kelley",
|
||||
"RegisterDate": "2002-04-20T22:55:52-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
|
||||
"Name": "Prescott Griffin",
|
||||
"RegisterDate": "2011-02-22T05:59:55-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
|
||||
"Name": "Amir Saunders",
|
||||
"RegisterDate": "2014-08-13T09:17:49-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
|
||||
"Name": "Derek Thornton",
|
||||
"RegisterDate": "2012-02-27T01:31:07-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
|
||||
"Name": "Fletcher Romero",
|
||||
"RegisterDate": "2010-06-25T15:49:54-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
|
||||
"Name": "Thaddeus Stein",
|
||||
"RegisterDate": "2013-11-10T07:29:41-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "658DBF5A-176E-569A-9273-74FB5F69FA42",
|
||||
"Name": "Nash Knapp",
|
||||
"RegisterDate": "2005-06-24T09:11:19-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "76D2EE4B-7A73-1212-F6F2-957EF8C1F907",
|
||||
"Name": "Quamar Vega",
|
||||
"RegisterDate": "2011-04-13T20:06:29-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "00E46809-A595-CE82-C5B4-D1CAEB7E3E58",
|
||||
"Name": "Philip Galloway",
|
||||
"RegisterDate": "2008-08-21T18:59:38-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "C196781C-DDCC-AF83-DDC2-CA3E851A47A0",
|
||||
"Name": "Mason French",
|
||||
"RegisterDate": "2000-11-15T00:38:37-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "5911F201-818A-B393-5888-13157CE0D63F",
|
||||
"Name": "Ross Cortez",
|
||||
"RegisterDate": "2010-05-27T17:35:32-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "B8BB78F9-E1A1-A956-086F-E12B6FE168B6",
|
||||
"Name": "Logan King",
|
||||
"RegisterDate": "2003-07-08T16:58:06-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "06F636C3-9599-1A2D-5FD5-86B24ADDE626",
|
||||
"Name": "Cedric Leblanc",
|
||||
"RegisterDate": "2011-06-30T14:30:10-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "FE880CDD-F6E7-75CB-743C-64C6DE192412",
|
||||
"Name": "Simon Sullivan",
|
||||
"RegisterDate": "2013-06-11T16:35:07-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "BBEDD673-E2C1-4872-A5D3-C4EBD4BE0A12",
|
||||
"Name": "Jamal West",
|
||||
"RegisterDate": "2001-03-16T20:18:29-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "19BC22FA-C52E-0CC6-9552-10365C755FAC",
|
||||
"Name": "Hector Morales",
|
||||
"RegisterDate": "2012-11-01T01:56:34-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "A8292214-2C13-5989-3419-6B83DD637D6C",
|
||||
"Name": "Herrod Hart",
|
||||
"RegisterDate": "2008-03-13T19:21:04-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "0285564B-F447-0E7F-EAA1-7FB8F9C453C8",
|
||||
"Name": "Clark Maxwell",
|
||||
"RegisterDate": "2004-08-05T08:22:24-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "EA78F076-4F6E-4228-268C-1F51272498AE",
|
||||
"Name": "Reuben Walter",
|
||||
"RegisterDate": "2011-01-23T01:55:59-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "6A88C194-EA21-426F-4FE2-F2AE33F51793",
|
||||
"Name": "Ira Ingram",
|
||||
"RegisterDate": "2008-08-15T05:57:46-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "4275E873-439C-AD26-56B3-8715E336508E",
|
||||
"Name": "Damian Morrow",
|
||||
"RegisterDate": "2015-09-13T01:50:55-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "A0D733C4-9070-B8D6-4387-D44F0BA515BE",
|
||||
"Name": "Macon Farrell",
|
||||
"RegisterDate": "2011-03-14T05:41:40-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "B3683DE8-C2FA-7CA0-A8A6-8FA7E954F90A",
|
||||
"Name": "Joel Galloway",
|
||||
"RegisterDate": "2003-02-03T04:19:01-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "01D95A8E-91BC-2050-F5D0-4437AAFFD11F",
|
||||
"Name": "Rigel Horton",
|
||||
"RegisterDate": "2015-06-20T11:53:11-07:00"
|
||||
},
|
||||
{
|
||||
"Account": "F0D12CC0-31AC-A82E-FD73-EEEFDBD21A36",
|
||||
"Name": "Sylvester Gaines",
|
||||
"RegisterDate": "2004-03-12T09:57:13-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "874FCC49-9A61-71BC-2F4E-2CE88348AD7B",
|
||||
"Name": "Abbot Mckay",
|
||||
"RegisterDate": "2008-12-26T20:42:57-08:00"
|
||||
},
|
||||
{
|
||||
"Account": "B8DA1912-20A0-FB6E-0031-5F88FD63EF90",
|
||||
"Name": "Solomon Green",
|
||||
"RegisterDate": "2013-09-04T01:44:47-07:00"
|
||||
}
|
||||
];
|
||||
|
||||
}());
|
||||
@ -0,0 +1,82 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
color: #262626;
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 16px 0 8px 0;
|
||||
font-size: 18px;
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2ba6cb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #258faf;
|
||||
}
|
||||
|
||||
input, button, select {
|
||||
font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.navigation li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.demo-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
iframe[name='demo'] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
72
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/external-pager.html
Executable file
72
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/external-pager.html
Executable file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - External Pager Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
|
||||
<style>
|
||||
.external-pager {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.external-pager .jsgrid-pager-current-page {
|
||||
background: #c4e2ff;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>External Customized Pager</h1>
|
||||
<div id="externalPager" class="external-pager"></div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
paging: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
pagerContainer: "#externalPager",
|
||||
pagerFormat: "current page: {pageIndex} {first} {prev} {pages} {next} {last} total pages: {pageCount} total items: {itemCount}",
|
||||
pagePrevText: "<",
|
||||
pageNextText: ">",
|
||||
pageFirstText: "<<",
|
||||
pageLastText: ">>",
|
||||
pageNavigatorNextText: "…",
|
||||
pageNavigatorPrevText: "…",
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
],
|
||||
data: db.clients
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Simple jQuery DataGrid - Demos</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navigation">
|
||||
<h1>jsGrid Demos</h1>
|
||||
<ul>
|
||||
<li><a href="basic.html" target="demo">Basic Scenario</a></li>
|
||||
<li><a href="static-data.html" target="demo">Static Data</a></li>
|
||||
<li><a href="odata-service.html" target="demo">OData Service</a></li>
|
||||
<li><a href="data-manipulation.html" target="demo">Data Manipulation</a></li>
|
||||
<li><a href="validation.html" target="demo">Validation</a></li>
|
||||
<li><a href="sorting.html" target="demo">Sorting</a></li>
|
||||
<li><a href="loading-by-page.html" target="demo">Loading by Page</a></li>
|
||||
<li><a href="custom-view.html" target="demo">Custom View</a></li>
|
||||
<li><a href="custom-row-renderer.html" target="demo">Custom Row Renderer</a></li>
|
||||
<li><a href="external-pager.html" target="demo">External Pager</a></li>
|
||||
<li><a href="custom-grid-field.html" target="demo">Custom Grid Field</a></li>
|
||||
<li><a href="localization.html" target="demo">Localization</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="demo-frame">
|
||||
<iframe name="demo" src="basic.html"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
90
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/loading-by-page.html
Executable file
90
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/loading-by-page.html
Executable file
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Loading Data by Page Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
|
||||
<style>
|
||||
.pager-panel {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e9e9e9;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Loading Data by Page</h1>
|
||||
<div class="pager-panel">
|
||||
<label>Page:
|
||||
<select id="pager">
|
||||
<option>1</option>
|
||||
<option selected>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
paging: true,
|
||||
pageLoading: true,
|
||||
pageSize: 15,
|
||||
pageIndex: 2,
|
||||
controller: {
|
||||
loadData: function(filter) {
|
||||
var startIndex = (filter.pageIndex - 1) * filter.pageSize;
|
||||
return {
|
||||
data: db.clients.slice(startIndex, startIndex + filter.pageSize),
|
||||
itemsCount: db.clients.length
|
||||
};
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
]
|
||||
});
|
||||
|
||||
$("#pager").on("change", function() {
|
||||
var page = parseInt($(this).val(), 10);
|
||||
$("#jsGrid").jsGrid("openPage", page);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
62
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/localization.html
Executable file
62
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/localization.html
Executable file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Localization (FR)</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.validation.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
<script src="../src/i18n/fr.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Localization (FR)</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
jsGrid.locale("fr");
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
inserting: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", title: "Nom", type: "text", width: 150, validate: "required" },
|
||||
{ name: "Age", title: "Âge", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
|
||||
{ name: "Address", title: "Adresse", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
|
||||
{ name: "Country", title: "Pays", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", title: "Marié", type: "checkbox", sorting: false },
|
||||
{ type: "control" }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
74
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/odata-service.html
Executable file
74
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/odata-service.html
Executable file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - OData Service Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.textarea.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
|
||||
<style>
|
||||
.rating {
|
||||
color: #F8CA03;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>OData Service</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "auto",
|
||||
width: "auto",
|
||||
sorting: true,
|
||||
paging: false,
|
||||
autoload: true,
|
||||
controller: {
|
||||
loadData: function() {
|
||||
var d = $.Deferred();
|
||||
|
||||
$.ajax({
|
||||
url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
|
||||
dataType: "json"
|
||||
}).done(function(response) {
|
||||
d.resolve(response.value);
|
||||
});
|
||||
|
||||
return d.promise();
|
||||
}
|
||||
},
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 100 },
|
||||
{ name: "Description", type: "textarea", width: 200 },
|
||||
{ name: "Rating", type: "number", width: 150, align: "center",
|
||||
itemTemplate: function(value) {
|
||||
return $("<div>").addClass("rating").append(Array(value + 1).join("★"));
|
||||
}
|
||||
},
|
||||
{ name: "Price", type: "number", width: 100,
|
||||
itemTemplate: function(value) {
|
||||
return value.toFixed(2) + "$"; }
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Rows Reordering Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Rows Reordering Scenario</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
|
||||
rowClass: function(item, itemIndex) {
|
||||
return "client-" + itemIndex;
|
||||
},
|
||||
|
||||
controller: {
|
||||
loadData: function() {
|
||||
return db.clients.slice(0, 15);
|
||||
}
|
||||
},
|
||||
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false }
|
||||
],
|
||||
|
||||
onRefreshed: function() {
|
||||
var $gridData = $("#jsGrid .jsgrid-grid-body tbody");
|
||||
|
||||
$gridData.sortable({
|
||||
update: function(e, ui) {
|
||||
// array of indexes
|
||||
var clientIndexRegExp = /\s*client-(\d+)\s*/;
|
||||
var indexes = $.map($gridData.sortable("toArray", { attribute: "class" }), function(classes) {
|
||||
return clientIndexRegExp.exec(classes)[1];
|
||||
});
|
||||
alert("Reordered indexes: " + indexes.join(", "));
|
||||
|
||||
// arrays of items
|
||||
var items = $.map($gridData.find("tr"), function(row) {
|
||||
return $(row).data("JSGridItem");
|
||||
});
|
||||
console && console.log("Reordered items", items);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
78
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/sorting.html
Executable file
78
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/sorting.html
Executable file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Sorting Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
|
||||
<style>
|
||||
.sort-panel {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e9e9e9;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sorting</h1>
|
||||
<div class="sort-panel">
|
||||
<label>Sorting Field:
|
||||
<select id="sortingField">
|
||||
<option>Name</option>
|
||||
<option>Age</option>
|
||||
<option>Address</option>
|
||||
<option>Country</option>
|
||||
<option>Married</option>
|
||||
</select>
|
||||
<button type="button" id="sort">Sort</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
autoload: true,
|
||||
selecting: false,
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
]
|
||||
});
|
||||
|
||||
$("#sort").click(function() {
|
||||
var field = $("#sortingField").val();
|
||||
$("#jsGrid").jsGrid("sort", field);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
50
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/static-data.html
Executable file
50
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/static-data.html
Executable file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Static Data Scenario</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Static Data</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
sorting: true,
|
||||
paging: true,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150 },
|
||||
{ name: "Age", type: "number", width: 50 },
|
||||
{ name: "Address", type: "text", width: 200 },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married" }
|
||||
],
|
||||
data: db.clients
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/validation.html
Executable file
61
resources/wwwroot/lib/AdminLTE/plugins/jsgrid/demos/validation.html
Executable file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>jsGrid - Validation</title>
|
||||
<link rel="stylesheet" type="text/css" href="demos.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
|
||||
|
||||
<script src="../external/jquery/jquery-1.8.3.js"></script>
|
||||
<script src="db.js"></script>
|
||||
|
||||
<script src="../src/jsgrid.core.js"></script>
|
||||
<script src="../src/jsgrid.load-indicator.js"></script>
|
||||
<script src="../src/jsgrid.load-strategies.js"></script>
|
||||
<script src="../src/jsgrid.sort-strategies.js"></script>
|
||||
<script src="../src/jsgrid.validation.js"></script>
|
||||
<script src="../src/jsgrid.field.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.text.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.number.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.select.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
|
||||
<script src="../src/fields/jsgrid.field.control.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Validation</h1>
|
||||
<div id="jsGrid"></div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$("#jsGrid").jsGrid({
|
||||
height: "70%",
|
||||
width: "100%",
|
||||
filtering: true,
|
||||
editing: true,
|
||||
inserting: true,
|
||||
sorting: true,
|
||||
paging: true,
|
||||
autoload: true,
|
||||
pageSize: 15,
|
||||
pageButtonCount: 5,
|
||||
deleteConfirm: "Do you really want to delete the client?",
|
||||
controller: db,
|
||||
fields: [
|
||||
{ name: "Name", type: "text", width: 150, validate: "required" },
|
||||
{ name: "Age", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
|
||||
{ name: "Address", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
|
||||
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name",
|
||||
validate: { message: "Country should be specified", validator: function(value) { return value > 0; } } },
|
||||
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
|
||||
{ type: "control" }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user