Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/improvein/jquery-crudlistin
Lightweight jQuery plugin to enable dynamic CRUD list to add/remove/edit elements in a dynamic list and/or table.
https://github.com/improvein/jquery-crudlistin
crud jquery jquery-plugin
Last synced: 30 days ago
JSON representation
Lightweight jQuery plugin to enable dynamic CRUD list to add/remove/edit elements in a dynamic list and/or table.
- Host: GitHub
- URL: https://github.com/improvein/jquery-crudlistin
- Owner: improvein
- Created: 2016-03-16T15:26:19.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-04-02T17:37:43.000Z (over 4 years ago)
- Last Synced: 2024-11-14T09:09:19.933Z (about 2 months ago)
- Topics: crud, jquery, jquery-plugin
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery CRUDListin
Lightweight jQuery plugin to enable dynamic CRUD list to add/remove/edit elements in a dynamic list and/or table. It is super simple and style (CSS) agnostic.
[![npm version](https://badge.fury.io/js/jquery-crudlistin.svg)](https://badge.fury.io/js/jquery-crudlistin)
## Install
### Bower
Run this command:
```
$ bower install jquery-crudlistin
```### npm
Run this command:
```
$ npm i jquery-crudlistin
```### Manual
Just copy the file from "dist" into your project## How to use
This is how you activate and use the plugin:
```javascript
$('.crud-listin').crudlistin({
newButton: $('#list-add-btn')
});
```
Corresponding HTML (you need to have a *data-prototype* attribute in the main list element):
```html
Add element
```
How it will look after adding two elements
```html
Add element
```## Options
These are all the default options:
```javascript
$('.crud-listin').crudlistin({
newButton: null,
removeButtonSelector: '.delete-item-btn',
newItemLast: true,
itemClass: 'crud-item',
itemIndexPlaceholder: /__name__/g,
beforeAddElement: function() {},
afterAddElement: function(newItem) {},
beforeRemoveElement: function(item) {},
afterRemoveElement: function() {}
});
```- newButton: the "Add" or "New" button which click will add a new element
- itemClass: class to identify an element from the list
- removeButtonSelector: selector to identify the "Remove" button.
- newItemLast: indicates whether add new items at the end of the list (*true*) or at the beginning (*false*)
- itemIndexPlaceholder: placeholder, inside the prototype, where the list index should be. It will be replaced by the index number for the corresponding element when adding### Events
- beforeAddElement: fires before adding the element. Return *false* to cancel.
- afterAddElement: fires after adding the element. *newItem* is the item being added.
- beforeRemoveElement: fires before removing the element. *item* is the item about to be removed. Return *false* to cancel.
- afterRemoveElement: fires after removing the element.