LimeGRID can interface with Bootstrap, JQuery and also Pikaday and Moment to provide date editing.
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script> <link href="limegrid.css" type="text/css" rel="stylesheet"/> <link href="limegridtheme-1.2.1.css" type="text/css" rel="stylesheet"/> <script language='javascript' src='limegrid-1.2.1.js'></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.3/moment.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pikaday@1.8.2/css/pikaday.css"> <script src="https://cdn.jsdelivr.net/npm/pikaday@1.8.2/pikaday.js"></script> </head>
Grids can be bound to an array of JSON objects or an array of arrays. Data can be fetched from a REST API, file or script.
var _listData = [
{ Surname: 'Rojas-Sanchez', Forenames: 'Oscar', DOB: new Date(1980, 8, 3), Score: 44},
{ Surname: 'Craig', Forenames: 'Anthony', DOB: new Date(1988, 11, 3), Score: 44},
{ Surname: 'Devlin', Forenames: 'Brendan', DOB: new Date(1965, 2, 22), Score: 65},
{ Surname: 'Boyd', Forenames: 'Sara', DOB: new Date(1990, 4, 13), Score: 66},
{ Surname: 'de Bruin', Forenames: 'Pierre', DOB: new Date(1955, 12, 26), Score: 10},
{ Surname: 'Collins', Forenames: 'Henry', DOB: new Date(1989, 8, 9), Score: 82, Flags: 1},
{ Surname: 'Zuckerberg', Forenames: 'Dan', DOB: new Date(1974, 6, 1)},
{ Surname: 'Lee', Forenames: 'Ken', DOB: new Date(1973, 3, 3)},
{ Surname: 'Roberts', Forenames: 'John', DOB: new Date(1980, 8, 3)}
];
var _grid;
function TestGrid()
{
let container = document.getElementById('grdTest');
let list = [];
list = list.concat(_listData);
var grid = new LimeGrid({
data: list,
colHeaders: [
'Forenames',
'Surname',
'Email',
'Date of Birth',
'Score',
'Phone',
'Staff No',
'Active',
''
],
columns: [
{
data: 'Forenames'
},
{
data: 'Surname',
bold: true
},
{
data: 'Email'
},
{
data: 'DOB',
type: 'date'
},
{
data: 'Score',
type: 'progressbar',
readOnly: true,
max: 100
},
{
data: 'PhoneNumber'
},
{
data: 'StaffReference'
},
{
data: 'Flags',
type: 'checkedit',
mask: 1,
readOnly: false,
//onChanged: WorkbooksOnPublishedChanged,
align: 'center'
},
{
type: 'hyperlink',
className: 'iconbutton hidden-child',
align: 'right',
width: '60px',
readOnly: true,
link: "javascript:DeleteItem(\"{ID}\", {_index})",
value: "<img src='bingrey128.png' height='20px'/></a>"
}
],
deletedField: 'DateDeleted',
showFilter: true,
columnSorting: true,
sortIndicator: true,
showIndicator: true,
rowSelect: true,
showSelection: true,
sortColumn: 'Surname',
onRowClick: function(rowIndex, data, event)
{
//alert("You chose: " + data.Surname);
}
});
grid.render(container);
_grid = grid;
}
TestGrid();
Column data formats may be set on individual columns to give better data validation and user experience.
columns: [
{
data: 'Forenames'
},
{
data: 'Surname',
bold: true
},
{
data: 'Email'
},
{
data: 'DOB',
type: 'date'
},
{
data: 'Score',
type: 'progressbar',
readOnly: true,
max: 100
}
Cells of a column may be formatted with custom .html or by callback using .formatHTML.
var grid = new LimeGrid({
data: list,
colHeaders: [
'Email'
],
columns: [
{
data: 'Email'
}
],
onRowClick: function(rowIndex, data, event)
{
alert("You chose: " + data.Email);
}
};
grid.render(container);
var grid = new LimeGrid({
data: list,
colHeaders: [
'Email'
],
columns: [
{
data: 'Email'
onClick: function(rowIndex, data, event)
{
alert("You chose: " + data.Email);
}
}
],
};
grid.render(container);