You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.5 KiB
113 lines
3.5 KiB
1 year ago
|
$(window).on("load", function () {
|
||
|
|
// Row Toggler
|
||
|
|
// -----------------------------------------------------------------
|
||
|
|
$("#demo-foo-row-toggler").footable();
|
||
|
|
|
||
|
|
// Accordion
|
||
|
|
// -----------------------------------------------------------------
|
||
|
|
$("#demo-foo-accordion")
|
||
|
|
.footable()
|
||
|
|
.on("footable_row_expanded", function (e) {
|
||
|
|
$("#demo-foo-accordion tbody tr.footable-detail-show")
|
||
|
|
.not(e.row)
|
||
|
|
.each(function () {
|
||
|
|
$("#demo-foo-accordion").data("footable").toggleDetail(this);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Accordion
|
||
|
|
// -----------------------------------------------------------------
|
||
|
|
$("#demo-foo-accordion2")
|
||
|
|
.footable()
|
||
|
|
.on("footable_row_expanded", function (e) {
|
||
|
|
$("#demo-foo-accordion2 tbody tr.footable-detail-show")
|
||
|
|
.not(e.row)
|
||
|
|
.each(function () {
|
||
|
|
$("#demo-foo-accordion").data("footable").toggleDetail(this);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Pagination & Filtering
|
||
|
|
// -----------------------------------------------------------------
|
||
|
|
$("[data-page-size]").on("click", function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var newSize = $(this).data("pageSize");
|
||
|
|
FooTable.get("#demo-foo-pagination").pageSize(newSize);
|
||
|
|
});
|
||
|
|
$("#demo-foo-pagination").footable();
|
||
|
|
|
||
|
|
$("#demo-foo-addrow").footable();
|
||
|
|
|
||
|
|
var addrow = $("#demo-foo-addrow2");
|
||
|
|
addrow.footable().on("click", ".delete-row-btn", function () {
|
||
|
|
//get the footable object
|
||
|
|
var footable = addrow.data("footable");
|
||
|
|
|
||
|
|
//get the row we are wanting to delete
|
||
|
|
var row = $(this).parents("tr:first");
|
||
|
|
|
||
|
|
//delete the row
|
||
|
|
footable.removeRow(row);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add & Remove Row
|
||
|
|
// -----------------------------------------------------------------
|
||
|
|
var $modal = $("#editor-modal"),
|
||
|
|
$editor = $("#editor"),
|
||
|
|
$editorTitle = $("#editor-title"),
|
||
|
|
ft = FooTable.init("#footable-addrow", {
|
||
|
|
columns: $.get(
|
||
|
|
"https://fooplugins.github.io/FooTable/docs/content/columns.json"
|
||
|
|
),
|
||
|
|
rows: $.get(
|
||
|
|
"https://fooplugins.github.io/FooTable/docs/content/rows.json"
|
||
|
|
),
|
||
|
|
editing: {
|
||
|
|
addRow: function () {
|
||
|
|
$modal.removeData("row");
|
||
|
|
$editor[0].reset();
|
||
|
|
$editorTitle.text("Add a new row");
|
||
|
|
$modal.modal("show");
|
||
|
|
},
|
||
|
|
editRow: function (row) {
|
||
|
|
var values = row.val();
|
||
|
|
$editor.find("#firstName").val(values.firstName);
|
||
|
|
$editor.find("#lastName").val(values.lastName);
|
||
|
|
$editor.find("#jobTitle").val(values.jobTitle);
|
||
|
|
$editor.find("#status").val(values.status);
|
||
|
|
$editor.find("#dob").val(values.dob.format("YYYY-MM-DD"));
|
||
|
|
$modal.data("row", row);
|
||
|
|
$editorTitle.text("Edit row #" + values.id);
|
||
|
|
$modal.modal("show");
|
||
|
|
},
|
||
|
|
deleteRow: function (row) {
|
||
|
|
if (confirm("Are you sure you want to delete the row?")) {
|
||
|
|
row.delete();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
uid = 10001;
|
||
|
|
|
||
|
|
$editor.on("submit", function (e) {
|
||
|
|
if (this.checkValidity && !this.checkValidity()) return;
|
||
|
|
e.preventDefault();
|
||
|
|
var row = $modal.data("row"),
|
||
|
|
values = {
|
||
|
|
firstName: $editor.find("#firstName").val(),
|
||
|
|
lastName: $editor.find("#lastName").val(),
|
||
|
|
jobTitle: $editor.find("#jobTitle").val(),
|
||
|
|
dob: moment($editor.find("#dob").val(), "YYYY-MM-DD"),
|
||
|
|
status: $editor.find("#status").val(),
|
||
|
|
};
|
||
|
|
|
||
|
|
if (row instanceof FooTable.Row) {
|
||
|
|
row.val(values);
|
||
|
|
} else {
|
||
|
|
values.id = uid++;
|
||
|
|
ft.rows.add(values);
|
||
|
|
}
|
||
|
|
$modal.modal("hide");
|
||
|
|
});
|
||
|
|
});
|