Creating Sortable & Editable Lists with jQuery and jQuery UI

File Size: 692 KB
Views Total: 5748
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Creating Sortable & Editable Lists with jQuery and jQuery UI

jQueryUISortable is a jQuery plugin which extends the jQuery UI sortable() functionality to make your lists sortable and editable with JSON support.

How to use it:

1. Load the needed jQuery library and jQuery UI in your html page.

<link rel="stylesheet" href="path/to/jquery-ui.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-ui.min.js"></script>

2. Load the jQueryUISortable plugin after jQuery library.

<script src="src/jQueryUISortable.js"></script>
<link rel="stylesheet" href="src/jQueryUISortable.css">

3. Create an empty html list on the web page.

<ul id="sortable">
</ul>

4. Add list items to the list via JSON data.

var mockData = {

    // start index is used when user add a new item, 
    // and we will use this start index as a part of element id.
    startIndex:4,

    // table's data array, json based. 
    // [{id:,isActiveFlag:,value}],
    sortJsonData:[{
          id:1,
          isActiveFlag:false,
          value:"item 1"
        },{
          id:2,
          isActiveFlag:true,
          value:"item 2"
        },{
          id:3,
          isActiveFlag:false,
          value:"item 3"
        },{
          id:4,
          isActiveFlag:true,
          value:"item 4"
        }
        ]
};

5. Initialize the plugin.

$("#sortable").sorttable(mockData);

6. API.

// active or inactive selected item
$("#sortable").sorttable("AcitveInactiveItems");

// edit item
$("#sortable").sorttable("EditItem");

// save item
$("#sortable").sorttable("SaveItem");

// delete item
$("#sortable").sorttable("DeleteItems");

// cancel item
$("#sortable").sorttable("CancelEdit");

// add item
$("#sortable").sorttable("AddItem");

// Batch Job
$("#sortable").sorttable("BatchMode");

// normal mode
$("#sortable").sorttable("NormalMode");

// get values
var sortId = "sortable";
$("#sortable").sorttable(mockData);
var alertStr = alertData(sortId);
    alert(alertStr);

7. Default options.

// $.sorttable(element,opitons);

//Group active and inactive items in two groups.
groupMode: true, 

//Make this plugin in key value mode or not.
keyValueMode: true, 

//if this option is true, new item which you added will be enable. default is false.
enableNewItem: false, 

//default new item's key
defaultNewItemKey: "NK", 

//default new item's value
defaultNewItemText: "new value", 

//table's data array, json based. [{key:,isActiveFlag:,value}].
sortJsonData: [], 

//show active/inactive button or not, default is true.
activeButton: true, 

//text on active button.
activeButtonText: "Active/Inactive", 

//batch job group

//show batch mode/normal button or not, default is true.
batchButton: true, 

//text on batch mode button.
batchButtonText: "Batch Mode", 

//text on normal mode button.
normalModeButtonText: "Normal Mode", 

//edit mode group

//show edit button or not, default is true.
editButton: true, 

//text on edit button.
editButtonText: "Edit Item", 

//text on save button.
saveButtonText: "save Item", 

//text on cancel button.
cancelButtonText: "Cancel", 

//show add item button or not, default is true.
addButton: true, 

//text on add item button.
addButtonText: "Add Item",

//show delete button or not, default is true. 
deleteButton: true, 

//text on delete button.
deleteButtonText: "Delete Item", 

//show submit button or not, default is true.
submitButton: true, 

//text on submit button.
submitButtonText: "Submit", 

//submit button callback.
submitCallBack: function() {}, 

Change logs:

2015-09-16

  • add default length for input box
  • fix some issue and change delete callback function

2015-09-11

  • change alert message box style

2015-09-08

  • It fix issue, key will not lost in value mode

2015-09-02

  • fix a small issue

2015-09-01

  • fix a json parameter
  • change plug name to jSortable

2015-08-31

  • fix display issue in firefox
  • fix can not be null issue

2015-08-30

  • fix safari display issue

2015-08-28

  • add sort before fill the table base on index

2015-08-25

  • add deep clone when return value

2015-08-24

  • add new return context: new items and delete items

2015-08-21

  • add an animation when edit

2015-08-20

  • fix a set option issue

2015-08-19

  • fixed a minor bug.

2015-08-17

  • add group mode.

2015-08-16

  • add a new functionality to format JSON data.

This awesome jQuery plugin is developed by Mars-Shen. For more Advanced Usages, please check the demo page or visit the official website.