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.
262 lines
6.7 KiB
262 lines
6.7 KiB
1 year ago
|
!(function (document, window, $) {
|
||
|
"use strict";
|
||
|
var Site = window.Site;
|
||
|
$(document).ready(function ($) {}),
|
||
|
jsGrid.setDefaults({
|
||
|
tableClass: "jsgrid-table table table-striped table-hover",
|
||
|
}),
|
||
|
jsGrid.setDefaults("text", {
|
||
|
_createTextBox: function () {
|
||
|
return $("<input>")
|
||
|
.attr("type", "text")
|
||
|
.attr("class", "form-control input-sm");
|
||
|
},
|
||
|
}),
|
||
|
jsGrid.setDefaults("number", {
|
||
|
_createTextBox: function () {
|
||
|
return $("<input>")
|
||
|
.attr("type", "number")
|
||
|
.attr("class", "form-control input-sm");
|
||
|
},
|
||
|
}),
|
||
|
jsGrid.setDefaults("textarea", {
|
||
|
_createTextBox: function () {
|
||
|
return $("<input>")
|
||
|
.attr("type", "textarea")
|
||
|
.attr("class", "form-control");
|
||
|
},
|
||
|
}),
|
||
|
jsGrid.setDefaults("control", {
|
||
|
_createGridButton: function (cls, tooltip, clickHandler) {
|
||
|
var grid = this._grid;
|
||
|
return $("<button>")
|
||
|
.addClass(this.buttonClass)
|
||
|
.addClass(cls)
|
||
|
.attr({
|
||
|
type: "button",
|
||
|
title: tooltip,
|
||
|
})
|
||
|
.on("click", function (e) {
|
||
|
clickHandler(grid, e);
|
||
|
});
|
||
|
},
|
||
|
}),
|
||
|
jsGrid.setDefaults("select", {
|
||
|
_createSelect: function () {
|
||
|
var $result = $("<select>").attr("class", "form-control input-sm"),
|
||
|
valueField = this.valueField,
|
||
|
textField = this.textField,
|
||
|
selectedIndex = this.selectedIndex;
|
||
|
return (
|
||
|
$.each(this.items, function (index, item) {
|
||
|
var value = valueField ? item[valueField] : index,
|
||
|
text = textField ? item[textField] : item,
|
||
|
$option = $("<option>")
|
||
|
.attr("value", value)
|
||
|
.text(text)
|
||
|
.appendTo($result);
|
||
|
$option.prop("selected", selectedIndex === index);
|
||
|
}),
|
||
|
$result
|
||
|
);
|
||
|
},
|
||
|
}),
|
||
|
(function () {
|
||
|
$("#basicgrid").jsGrid({
|
||
|
height: "500px",
|
||
|
width: "100%",
|
||
|
filtering: !0,
|
||
|
editing: !0,
|
||
|
sorting: !0,
|
||
|
paging: !0,
|
||
|
autoload: !0,
|
||
|
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: 70,
|
||
|
},
|
||
|
{
|
||
|
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: !1,
|
||
|
},
|
||
|
{
|
||
|
type: "control",
|
||
|
},
|
||
|
],
|
||
|
});
|
||
|
})(),
|
||
|
(function () {
|
||
|
$("#staticgrid").jsGrid({
|
||
|
height: "500px",
|
||
|
width: "100%",
|
||
|
sorting: !0,
|
||
|
paging: !0,
|
||
|
data: db.clients,
|
||
|
fields: [
|
||
|
{
|
||
|
name: "Name",
|
||
|
type: "text",
|
||
|
width: 150,
|
||
|
},
|
||
|
{
|
||
|
name: "Age",
|
||
|
type: "number",
|
||
|
width: 70,
|
||
|
},
|
||
|
{
|
||
|
name: "Address",
|
||
|
type: "text",
|
||
|
width: 200,
|
||
|
},
|
||
|
{
|
||
|
name: "Country",
|
||
|
type: "select",
|
||
|
items: db.countries,
|
||
|
valueField: "Id",
|
||
|
textField: "Name",
|
||
|
},
|
||
|
{
|
||
|
name: "Married",
|
||
|
type: "checkbox",
|
||
|
title: "Is Married",
|
||
|
},
|
||
|
],
|
||
|
});
|
||
|
})(),
|
||
|
(function () {
|
||
|
$("#exampleSorting").jsGrid({
|
||
|
height: "500px",
|
||
|
width: "100%",
|
||
|
autoload: !0,
|
||
|
selecting: !1,
|
||
|
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",
|
||
|
},
|
||
|
],
|
||
|
}),
|
||
|
$("#sortingField").on("change", function () {
|
||
|
var field = $(this).val();
|
||
|
$("#exampleSorting").jsGrid("sort", field);
|
||
|
});
|
||
|
})(),
|
||
|
(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 () {
|
||
|
if (!this.inserting) return "";
|
||
|
var $result = (this.insertControl = this._createTextBox());
|
||
|
return $result;
|
||
|
},
|
||
|
editTemplate: function (value) {
|
||
|
if (!this.editing) return this.itemTemplate(value);
|
||
|
var $result = (this.editControl = this._createTextBox());
|
||
|
return $result.val(value), $result;
|
||
|
},
|
||
|
insertValue: function () {
|
||
|
return this.insertControl.datepicker("getDate");
|
||
|
},
|
||
|
editValue: function () {
|
||
|
return this.editControl.datepicker("getDate");
|
||
|
},
|
||
|
_createTextBox: function () {
|
||
|
return $("<input>")
|
||
|
.attr("type", "text")
|
||
|
.addClass("form-control input-sm")
|
||
|
.datepicker({
|
||
|
autoclose: !0,
|
||
|
});
|
||
|
},
|
||
|
})),
|
||
|
(jsGrid.fields.myDateField = MyDateField),
|
||
|
$("#exampleCustomGridField").jsGrid({
|
||
|
height: "500px",
|
||
|
width: "100%",
|
||
|
inserting: !0,
|
||
|
editing: !0,
|
||
|
sorting: !0,
|
||
|
paging: !0,
|
||
|
data: db.users,
|
||
|
fields: [
|
||
|
{
|
||
|
name: "Account",
|
||
|
width: 150,
|
||
|
align: "center",
|
||
|
},
|
||
|
{
|
||
|
name: "Name",
|
||
|
type: "text",
|
||
|
},
|
||
|
{
|
||
|
name: "RegisterDate",
|
||
|
type: "myDateField",
|
||
|
width: 100,
|
||
|
align: "center",
|
||
|
},
|
||
|
{
|
||
|
type: "control",
|
||
|
editButton: !1,
|
||
|
modeSwitchButton: !1,
|
||
|
},
|
||
|
],
|
||
|
});
|
||
|
})();
|
||
|
})(document, window, jQuery);
|