jSortable

Introductions

This is a plugin extend from jQuery Ui Sortable

In oredr to build a sortable and editable list

Demo

you can find a demo in this project demo folder.

Live Demo

Screenshot

What We Can Do

• Add Item to list
• Delete Item(s) from list
• Edit Selected Item
• Active/Inactive Item(s) in list
• Reorder element in list using the mouse
• Json Data Format
• Online and offline mode

Required

• jQuery 1.7+
• jQuery UI

How To Use

First, you need import our js and css file in your html file's head. Don't forget to import jQuery and jQuery UI

  <script src="../jquery-ui/jquery-1.11.3.js"></script>
  <script src="../jquery-ui/jquery-ui.js"></script>
  <script src="../src/jSortable.js"></script>
  <link rel="stylesheet" href="../src/jSortable.css">

The plugin can also be loaded as AMD module.

In Html page, you just need put an <div> element! That's all!

Html code snippet from demo:

  some codes ...
  <div id="sortable">
  </div>
  other codes ...

In your own js file, first of all, you need to initialize our plugin.

$("#sortable").jSortable(options);

Here, options is a json string, it looks like this:

var options = {
		defaultNewItemText:"New Item",
  		sortJsonData :  //list's data source array, json based. [{key:,isActiveFlag:,value}],
  		[{
  				index : 1,		//Must, order in data sequence
  				isActiveFlag : false,   //Must, active flag
  				value : "item 1",       //Must, value of this key value pair.
  				key : 1,                 //Optional if keyValueMode is false, it's the key of key value pair.
  				primaryKey : 1543       //Optional, mapping your own bussiness logic, like if you want to store a primaryKey of database, you can put it here.
  			}, {
  				key : 2,
  				index : 2,
  				isActiveFlag : true,
  				value : "item 2"
  			}, {
  				key : 3,
  				index : 3,
  				isActiveFlag : false,
  				value : "item 3"
  			}, {
  				key : 4,
  				index : 4,
  				isActiveFlag : true,
  				value : "item 4"
  			}
  		]
  	};

This form show all options:

Name	Description	Default
onlineMode	Add or delete function will process on sever side.	false
saveURL	Save function ajax url, if onlineMode is true, this url must be not null.	""
deleteURL	Delete function ajax url, if onlineMode is true, this url must be not null.	""
activeURL	Active function ajax url, if onlineMode is true, this url must be not null.	""
blockfunction	Block page function when ajax call is happening	""
unblockfunction	Unblock page function when ajax call has done	""
keyValueMode	Make this plugin in key value mode or not.	true
valueNotNull	Value like key or value can not be null.	true
enableNewItem	if this option is true, new item which you added will be enable as default.	false
defaultNewItemKey	Default new item's key	"NK"
defaultNewItemText	Default new item's value	"new value"
sortJsonData	List's source data array, json based. [{id:,isActiveFlag:,value}].	[]
activeButton	Show active/inactive button or not.	true
inlineActiveButton	Show inline active/inactive button or not.	false
activeButtonText	Default text on active button.	"Active/Inactive"
batchMode	show checkbox or not.	true
editButton	Show edit button or not.	true
editButtonText	Default text on edit button.	"Edit"
saveButtonText	Default text on save button.	"Save"
cancelButtonText	Default text on cancel button.	"Cancel"
addButton	Show add item button or not.	true
addButtonText	Default text on add item button.	"Add"
deleteButton	Show delete button or not.	true
inlineDeleteButton	Show inline delete button or not.	false
deleteButtonText	Default text on delete button.	"Delete"
saveOrderButton	Show save order button or not.	true
saveOrderButtonText	Default text on save order button.	"Save Order"
submitCallBack	Submit button callback.	function
buttonClass	Custom button css class.	""
deleteCallBack	Delete button callback. use to confirm delete action. argument is select item(s).	function

Online mode

coming soon..

After these step, you can set a callback for your buttons.

sortObj.jSortable("SubmitCallback", function () {
	var str = "";
	var obj = sortObj.jSortable("ModelData");
	$.each(obj.sortJsonData, function (i, v) {
		str += "Record " + v.id + "'s status is " + v.isActiveFlag + "(key: "+ v.key +", value: " + v.value + ").\n ";
	});
   	alert(str);
});

There are some medthods you can inovke right now.

Name	Description	Arguments
ModelData	Get or reset list's options in a json format	options
Destroy	Destroy this plugin
SubmitCallback	Set submit button callback	function
DeleteCallBack	Set delete button callback	function
You can get json based data from ModelData medthod

	var data = sortObj.jSortable("ModelData");

Json based data structure from ModelData medthod:

	{
		sortJsonData : [{key:,isActiveFlag:,value}],//list's data source array, json based.
		activedData : [],//active data in list
		inactivedData : [],//inactiva data in list
		newAddedItems: [],//added items
		deletedItems: []//deleted items
	};

You can aslo reset the options source into this plugin,

	sortObj.jSortable("ModelData",options);

##License Licensed under the MIT License

##Changelog #####v0.0.2 26 Aug 2015

• new UI, new online mode.

#####v0.0.1 origin version: 5 Aug 2015

• this is a origin version for this plugin.
• this is my first jQuery plugin, there must be a lot defect or some bad smell, welcome any help or advice to imporve this plug. Thanks.