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: about 1 month 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 (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-04-02T17:37:43.000Z (over 4 years ago)
• Last Synced: 2024-09-30T10:40:58.748Z (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



  
This is element number 0 Remove



  
This is element number 1 Remove





```


## 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.