jscrud
this make project help you to implement crud cycle view as simple as possible; you can create form , grid , modal and etc with json object
for example you can create a grid with this code:
new Grid({
id: 'grid-id',
holder: 'grid-holder-on-page',
ajax: 'https://jsonplaceholder.typicode.com/posts',
columns: [
{ data: "userId" , title: 'User ID' },
{ data: "id", title: 'ID' },
{ data: "title" , title: 'Title'},
{ data: "body" , title: 'Body'}
]
}).load();you can create a form with this code:
let form = new Form({
id: 'search-form',
holder: 'form-holder',
columns: [[{
type: 'select',
id: 'product_type',
title: 'Product Type',
source: {
data: [{id: 'class', name: 'Class'},{id: 'mock', name: 'Mock'},{id: 'exam', name: 'Exam'}],
def: {value: 'id', title: 'name'},
},
}, {
type: 'select',
id: 'product_id',
title: 'Products',
source: {
data: [{id: 'all', name: 'All'}],
ajax: '/api/product/list',
def: {value: 'id', title: 'name'},
}
}, {
type: 'select',
id: 'event_date',
title: 'Events Date',
source: {
ajax: '/api/product/list',
def: {value: 'id', title: 'name'},
}
}],[{
type: 'date',
id: 'event_start_date',
title: 'Event Start Date From',
hint: 'start date of event is bigger than this date'
}, {
type: 'date',
id: 'event_end_date',
title: 'Event Start Date to',
hint: 'start date of event is smaller than this date'
}]],
actions: [{
type: 'search',
id: "form-search",
title: 'Descriptional Report',
action: "descReport",
params: []
},{
type: 'search',
id: "form-search",
title: 'Statistical Report',
action: "statReport",
params: []
}]
});
```