cms_dual_table

cms_dual_tree

Samples
API Reference
Styling & Controls
Dependences

Sample 1
Sample 2
Sample 3

Manage files list table using elFinder file manager

Files list

	No		ID¹	File	Cache²	Life³

Note 1: Click to enter ID

Note 2: Click to enter Cache: "caching", "nocache", "inline"

Note 3: Click to enter Life (-1 means unlimited cache life time)

Note 4: Drag and drop to change file order

Sample 1:

Left side table "ID" cell editable (<input>)
Left side table "Caching" cell editable (<select>)
Left side table "Cache" cell editable (<input>) with form validation
Left side table rows draggable
Right side source - elFinder file manager (using CMS access control: in this sample inherits access control list from current page access control list)
Button "Save" show left side table content in JSON format
Button "Clear" delete all rows from left side table
Buttons in the middle: add, remove, add all, remove all

jQuery code snippet:


$.validator.addMethod("life", function(value, element) { // create "life" validator method
	return this.optional(element) || /^\d+|-1$/.test(value);
});

var sam_1_dual_table = $("#sample-tabs-sam-1-dual-table").cms_dual_table({ // create cms_dual_table object
	editable:[
		{ type: [0], target: [3] }, // type 0 - source elFinder file manager, target 2 (id) set editable
		{ 
			type: [0], // type 0 - source elFinder file manager
			target: [6],  // target 6 (life) set editable
			onsubmit: function(settings, td){ // jeditable plugin onsubmit callback function
				var input = $(td).find('input')[0]; // get jeditable input
				input.name = "nameofinput"; // set jeditable input name="nameofinput"
		        $(this).validate({ // validate form
		            rules: {
		                'nameofinput': { // jeditable input
		                    "life": true // check with "life" validator method
		                }
		            },
		            messages: {
		                'nameofinput': { // // jeditable input
		                    "life": "Please enter valid cache lifetime number" // message if error			
		                }
		            }
		        });
		        return ($(this).valid()); // return validation result
			} 
		},
		{
			type: [0], // type 0 - source elFinder file manager
			target: [5], // target 5(caching) set editable
			data: {
				type:"select", // set input type select
				data: {'':'','caching':'caching','nocache':'nocache','inline':'inline', 'selected': ''} // set select options list 
			}
		}
	]
});
var t = [ // left side table initialization data array
	["0","sample1","sample_1.file","caching","3600"], // 1-st row: type, id, file, cache life
	["0","sample2","sample_2.file","nocache",""] //2-cnd  row: type, id, file, cache life
];
sam_1_dual_table.cms_dual_table("add",t); // load data into left side table
$(".sample-tabs-sam-1-dual-table-save", sam_1_dual_table).click(function(){ // on click button "Save"
	var t = sam_1_dual_table.cms_dual_table("getData"); // get data array from target dataTable() object
	alert("Save JSON data: " + JSON.stringify(t)); // convert to JSON and alert data array
});
$(".sample-tabs-sam-1-dual-table-clear", sam_1_dual_table).click(function(){ // on click button "Clear"
	sam_1_dual_table.cms_dual_table("clear"); // clear target dataTable() object
});

HTML code snippet:


<div id="sample-tabs-sam-1-dual-table">
	<table class="sample-jquery-dual-table" style="width:100%">
		<tr class="sample-jquery-dual-table-table">
			<td>
				<div class="cms_docs_title">Files list</div>
				<table cellpadding="0" cellspacing="0" border="0" width="100%" class="cms-doc-files cms-dual-table-selected display">
					<thead>
						<tr>
							<th></th>
							<th style="vertical-align:bottom">No</th>
							<th style="vertical-align:bottom"></th>
							<th style="vertical-align:bottom">ID<sup>1</sup></th>
							<th style="vertical-align:bottom">File</th>
							<th style="vertical-align:bottom">Cache<sup>2</sup></th>
							<th style="vertical-align:bottom">Life<sup>3</sup></th>
						</tr>
					</thead>
				</table>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin:0px; margin-top:10px">Note 1: Click to enter ID</p>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin:0px">Note 2: Click to enter Cache: "caching", "nocache", "inline"</p>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin:0px">Note 3: Click to enter Life (-1 means unlimited cache life time)</p>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin:0px">Note 4: Drag and drop to change file order</p>
				<input type="button" class="sample-tabs-sam-1-dual-table-save cms-form-submit" style="margin-top:10px" value="Save" title='Save'>
				<input type="button" class="sample-tabs-sam-1-dual-table-clear cms-form-submit" style="margin-top:10px" value="Clear" title='Clear'>
			</td>
		</tr>
		<tr class="sample-jquery-dual-table-buttons">
			<td>			
				<table>
					<tr><td><div class="cms-selectbox-button-add"><a href="#cms-dual-table-button-add" title="Add"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem"><a href="#cms-dual-table-button-rem" title="Remove"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-add-all"><a href="#cms-dual-table-button-add-all" title="Add all"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem-all"><a href="#cms-dual-table-button-rem-all" title="Remove all"></a></div></td></tr>
				</table>
			</td>
		</tr>
		<tr class="sample-jquery-dual-table-elfinder">
			<td><div class="cms-dual-table-elfinder"></div></td>
		</tr>
	</table>
</div>

Mange file list table using: elFinder file manager, external URL, prepared list (via Ajax RESTful API URL)

Files list

	No		Type	JScript File¹

Note 1: Click to edit external JScript file URL

Note 2: Drag and drop to change file order

Site
External
System

Enter URL:

System JScript Files

	No	ID	JScript File

Sample 2:

Left side table "JScript File" cell editable when type is "External" (<input>)
Left side table rows draggable
Right side source tabs:
- elFinder file manager (using CMS access control: in this sample inherits access control list from current page access control list)
- External URL using form field input with URL validation
- Prepared files list coming in JSON format via Ajax from RESTful API URL http://www.kusoftas.com/cms/files/guide/jquery/api/js/lst
Button "Save" show left side table content in JSON format
Button "Clear" delete all rows from left side table
Buttons in the middle: add, remove, add all, remove all

jQuery code snippet:


var sam_2_dual_table = $("#sample-tabs-sam-2-dual-table").cms_dual_table({ // create cms_dual_table object
	api: '/cms/files/guide/jquery/api/js/lst', // RESTful api URL address for dataTable Ajax source, 
	editable:[{type: [1], target: [4]}], // editable is 4-th position element in left side table when type: 1 - external source
	copy: [
		{type: [0,1,2], src: "title", to: 3}, // types: 0 - file manager, 1 - external, 2 - system list 
											  // src: "title" - source is current tab title (in this sample: "Site", "External", "System") 
											  // to: 3 - copy src to target (left side table) row 3-th position 
		{type: [0,1,2], src: "item", from: 3, to: 4} // types: 0 - file manager, 1 - external, 2 - system list
													 // src: "item" - source is right side table row
													 // from: 3, to: 4 - copy 3-th position element from right side table to 4-th position of left side table 
	]
})
var t = [ // left side table initialization data array
	["2",'jquery', '/cms/srv/js/jquery-1.10.2.min.js'], // 1-st row: type, id, file
	["2",'jquery-migrate', '/cms/srv/js/jquery-migrate-1.2.1.min.js'], //2-cnd  row: type, id, file
	["1",'', 'http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'], //3-rd  row: type, id, file
	["0",'', 'sample.js'], //4-th  row: type, id, file
];
sam_2_dual_table.cms_dual_table("add",t); // load data into left side table
$(".sample-tabs-sam-2-dual-table-save", sam_2_dual_table).click(function(){ // on click button "Save"
	var t = sam_2_dual_table.cms_dual_table("getData"); // get data array from target dataTable() object
	alert("Save JSON data: " + JSON.stringify(t)); // convert to JSON and alert data array
});
$(".sample-tabs-sam-2-dual-table-clear", sam_2_dual_table).click(function(){ // on click button "Clear"
	sam_2_dual_table.cms_dual_table("clear"); // clear target dataTable() object
});

HTML code snippet:


<div id="sample-tabs-sam-2-dual-table">
	<table class="sample-jquery-dual-table" style="width:100%">
		<tr class="sample-jquery-dual-table-table">
			<td>
				<div class="cms_docs_title">Files list</div>
				<table cellpadding="0" cellspacing="0" border="0" width="100%" class="cms-doc-files cms-dual-table-selected display">
					<thead>
						<tr>
							<th></th>
							<th style="vertical-align:bottom">No</th>
							<th style="vertical-align:bottom"></th>
							<th style="vertical-align:bottom">Type</th>
							<th style="vertical-align:bottom">JScript File<sup>1</sup></th>
						</tr>
					</thead>
				</table>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin-bottom:0px">Note 1: Click to edit external JScript file URL</p>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin-top:0px">Note 2: Drag and drop to change file order</p>
				<input type="button" class="sample-tabs-sam-2-dual-table-save cms-form-submit" style="margin-top:10px" value="Save" title='Save'>
				<input type="button" class="sample-tabs-sam-2-dual-table-clear cms-form-submit" style="margin-top:10px" value="Clear" title='Clear'>
			</td>
		</tr>
		<tr class="sample-jquery-dual-table-buttons">
			<td>			
				<table>
					<tr><td><div class="cms-selectbox-button-add"><a href="#cms-dual-table-button-add" title="Add"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem"><a href="#cms-dual-table-button-rem" title="Remove"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-add-all"><a href="#cms-dual-table-button-add-all" title="Add all"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem-all"><a href="#cms-dual-table-button-rem-all" title="Remove all"></a></div></td></tr>
				</table>
			</td>
		</tr>
		<tr class="sample-jquery-dual-table-elfinder">
			<td>
				<div class="cms-dual-table-tabs">
					<ul>
						<li><a href="#cms-dual-table-loc" title='Select file in site file system'>Site</a></li>
						<li><a href="#cms-dual-table-ext" title='Enter URL to external file'>External</a></li>
						<li><a href="#cms-dual-table-sys" title='Select file from list defined in system configuration'>System</a></li>
					</ul>
					<div class="cms-dual-table-loc">
						<div class="cms-dual-table-elfinder"></div>
					</div>
					<div class="cms-dual-table-ext">
						<div style="white-space:nowrap">
							Enter URL: <input class="cms-dual-table-input" type="text" style="width: 150px" value="http://" title='Enter URL to external file'>
						</div>
					</div>
					<div class="cms-dual-table-sys">
						<div class="cms_docs_title">System JScript Files</div>
						<table cellpadding="0" cellspacing="0" border="0" width="100%" class="cms-doc-files cms-dual-table-list display">
							<thead>
								<tr>
									<th></th>
									<th style="vertical-align:bottom">No</th>
									<th style="vertical-align:bottom">ID</th>
									<th style="vertical-align:bottom">JScript File</th>
								</tr>
							</thead>
						</table>
						<div style="height:20px"></div>
					</div>
				</div>
			</td>
		</tr>
	</table>
</div>

API URL: "/cms/files/guide/jquery/api/js/lst" returns JSON data:


{"aaData":[["<input type=\"checkbox\" \/>",1,"jquery","\/cms\/srv\/js\/jquery-1.10.2.min.js"],["<input type=\"checkbox\" \/>",2,"jquery-migrate","\/cms\/srv\/js\/jquery-migrate-1.2.1.min.js"],["<input type=\"checkbox\" \/>",3,"superfish","\/cms\/srv\/lib\/superfish-1.7.4\/js\/superfish.min.js"],["<input type=\"checkbox\" \/>",4,"jquery-ui","\/cms\/srv\/lib\/jquery-ui-1.10.3.custom\/js\/jquery-ui-1.10.3.custom.min.js"],["<input type=\"checkbox\" \/>",5,"cookie","\/cms\/srv\/js\/jquery.cookie.1.3.1.js"],["<input type=\"checkbox\" \/>",6,"dynatree","\/cms\/srv\/lib\/dynatree-1.2.5\/dist\/jquery.dynatree.min.js"],["<input type=\"checkbox\" \/>",7,"datatables","\/cms\/srv\/lib\/DataTables-1.9.4\/media\/js\/jquery.dataTables.min.js"],["<input type=\"checkbox\" \/>",8,"datatables-rowreordering","\/cms\/srv\/js\/jquery.dataTables.rowReordering.js"],["<input type=\"checkbox\" \/>",9,"validate","\/cms\/srv\/lib\/jquery-validation-master\/jquery.validate.js"],["<input type=\"checkbox\" \/>",10,"validate-add","\/cms\/srv\/lib\/jquery-validation-master\/additional-methods.js"],["<input type=\"checkbox\" \/>",11,"form","\/cms\/srv\/js\/jquery.form.3.32.0.js"]]}

API URL page XML definition in pages.xml file:


<doc><url>/js/lst</url><method>GET</method><fnc>sample_class::jsList</fnc></doc>

Full subsite (based on KUSoftas CMS) configuration and PHP code of sample RESTful API can be found in folder: /cms/files/guide/jquery/api (see using CMS tool "Files": http://www.kusoftas.com/cms/srv/admin/doc)

Manage file list table using: form field inputs

Files list

	No		ID¹	Label	Data list file path²

Note 1: Click to edit list ID

Note 2: Click to edit data list file path

Note 3: Drag and drop to change list order

Enter file data

ID:
Label:
Path:

Sample 3:

Left side table "ID" cell editable (<input>)
Left side table "Data list file path" cell editable (<input>)
Left side table rows draggable
Right side source: form fields inputs
Only unique combination of concatenate cells "ID", "Label" and "Datalist file path" can be added to left side list table
Button "Save" show left side table content in JSON format
Button "Clear" delete all rows from left side table
Buttons in the middle: add, remove, add all, remove all

jQuery code snippet:


var validateEmpty = function(settings, td){ // validate empty on left side table cell editing
	var input = $(td).find('input')[0]; // editable input
	input.name = "nameofinput"; // editable input name
    $(this).validate({ // form validate
        rules: {
            'nameofinput': { // input name
                "required": true // check if not empty
            }
        },
        messages: {
            'nameofinput': { // error message for input name
                "required": "Please enter data"	// error message	
            }
        }
    });
	return $(this).valid(); // return validation results
}
var sam_3_dual_table = $("#sample-tabs-sam-3-dual-table").cms_dual_table({ // create cms_dual_table object
	editable:[{type: [1], target: [3,4,5], onsubmit: validateEmpty}], 
	// type: 1 - external (form fields in this case)
	// target: 3,4,5 - copy form fields into target row positions
	// onsubmit: validateEmpty - execute validation function validateEmpty on jeditable input submit
	copy: [
		{type: [1], src: "item", from: 3, to: 3, length: 3, unique: 1} 
		// type: 1 - external (form fields in this case)
		// src: "item" - source is right side form inputs
		// to: 3 - copy form fields from right to left side table starting with 3-rd position of left side table row
		// unique: 1 - only unique data (concatenate all fields when checking) can be copied
		// check: 0 - do not check data on right side form are valid URL (suitable when there are form fields)
	] 
});
var t = [ // left side table initialization data array
	["1","id1","label1","file.path1"], // 1-st row: type, id, label, file
	["1","id2","label2","file.path2"] //2-cnd  row: type, id, label, file
];
sam_3_dual_table.cms_dual_table("add", t, "id"); // load data into left side table ("id" - means insert ID instead of type name = tab id
$(".sample-tabs-sam-3-dual-table-save", sam_3_dual_table).click(function(){ // on click button "Save"
	var t = sam_3_dual_table.cms_dual_table("getData"); // get data array from target dataTable() object
	alert("Save JSON data: " + JSON.stringify(t)); // convert to JSON and alert data array
});
$(".sample-tabs-sam-3-dual-table-clear", sam_3_dual_table).click(function(){ // on click button "Clear"
	sam_3_dual_table.cms_dual_table("clear"); // clear target dataTable() object
});

HTML code snippet:


<div id="sample-tabs-sam-3-dual-table">
	<table class="sample-jquery-dual-table" style="width:100%">
		<tr class="sample-jquery-dual-table-table">
			<td>
				<div class="cms_docs_title">Files list</div>
				<table cellpadding="0" cellspacing="0" border="0" width="100%" class="cms-doc-files cms-dual-table-selected display">
					<thead>
						<tr>
							<th></th>
							<th style="vertical-align:bottom">No</th>
							<th style="vertical-align:bottom"></th>
							<th style="vertical-align:bottom">ID<sup>1</sup></th>
							<th style="vertical-align:bottom">Label</th>
							<th style="vertical-align:bottom">Data list file path<sup>2</sup></th>
						</tr>
					</thead>
				</table>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin-bottom:0px">Note 1: Click to edit list ID</p>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin-top:0px; margin-bottom:0px">Note 2: Click to edit data list file path</p>
				<p style="font-size:10px; font-weight:bold; font-style:italic; margin-top:0px">Note 3: Drag and drop to change list order</p>
				<input type="button" class="sample-tabs-sam-3-dual-table-save cms-form-submit" style="margin-top:10px" value="Save" title='Save'>
				<input type="button" class="sample-tabs-sam-3-dual-table-clear cms-form-submit" style="margin-top:10px" value="Clear" title='Clear'>
			</td>
		</tr>
		<tr class="sample-jquery-dual-table-buttons">
			<td>			
				<table>
					<tr><td><div class="cms-selectbox-button-add"><a href="#cms-dual-table-button-add" title="Add"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem"><a href="#cms-dual-table-button-rem" title="Remove"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-add-all"><a href="#cms-dual-table-button-add-all" title="Add all"></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem-all"><a href="#cms-dual-table-button-rem-all" title="Remove all"></a></div></td></tr>
				</table>
			</td>
		</tr>
		<tr class="sample-jquery-dual-table-elfinder">
			<td>
				<div class="cms-dual-table-tabs">
					<ul>
						<li><a href="#cms-dual-table-ext" title='Enter file id, label and path'>Enter file data</a></li>
					</ul>
					<div class="cms-dual-table-ext">
						<div style="white-space:nowrap">
							<table>
								<tr>
									<td class="cms-form-td">ID: </td>
									<td class="cms-form-td"><input class="cms-dual-table-input cms-form-input" type="text"  style="width:150px" value="" title='Enter file ID'></td>
								</tr>
								<tr>
									<td class="cms-form-td">Label: </td>
									<td class="cms-form-td"><input class="cms-dual-table-input cms-form-input" type="text" style="width:150px" value="" title='Enter label'></td>
								</tr>
								<tr>
									<td class="cms-form-td">Path: </td>
									<td class="cms-form-td"><input class="cms-dual-table-input cms-form-input" type="text" style="width:150px" value="" title='Enter file path'></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</table>
</div>

.cms_dual_table()

Option	Method	Callback
editable	dataTable	beforeButtonsCallback
copy	elfinder	afterButtonsCallback
reordering	getData
defaultValue	clear
elfinder	add
selected	load
list
cms_path
uniqueID

.cms_dual_table( [settings] )

Returns: cms_dual_table()

Description: Plugin let to manage left side list table (dataTable() object) using following right side sources:

elFinder file manager (source type: 0)
External URL or other form field inputs (source type: 2)
Prepared list table (dataTable() object) filled via Ajax API or other method (source type: 1)

Left side list table can be managed using:

Drag & drop list items
Add/Remove/Add all/Remove all items with buttons
Add/Remove with dblclick
Click and edit cell on left side list table

Data can be controlled for unique, as html tags, with validation rules; to be editable as <input>, <select> and other input types.

.cms_dual_table( [settings] )

- settings
- Type: PlainObject
- A set of key/value pairs that configure cms_dual_table() plugin. All settings are optional.
  - - editable
    - Type: Array of PlainObject items
    - Left side list table cells editable options (default: 1 item in array):
      - type (default: [0])
        
        Type: Array
        
        Editable cells types array. Available types:
        
        0 - copied from elFinder file manager tab
        
        1 - copied from external URL or form fields inputs tab
        
        2 - copied from prepared list table dataTable() object tab
      - target (default: [3])
        
        Type: Array
        
        Left side list table array cell numbers array
      - html (default: 0)
        
        Type: Integer
        
        Available values:
        
        0 - editable cell does not contain HTML tags
        
        1 - editable cell contains HTML tags
      - data
        
        Type: PlainObject
        
        Options:
        
        type (String):
        
        'default' (default)
        
        'select'
        
        'datetimepicker'
        
        loadurl (String) - select list PlainObject type data in JSON format returning URL (see jeditable plugin documentation for json data structure)
        
        data (PlainObject) - {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'} (see jeditable plugin documentation for json data structure)
        
        onsubmit(settings, td) - jeditable() object callback function on editable cell value submit (default: n/a)
  - - copy
    - Type: Array
    - Copy from right side to left side list table cells options (default: 1 item in array):
      - type (default: [0])
        
        Type: Array
        
        Copy cells types array. Available types:
        
        0 - copied from elFinder file manager tab
        
        1 - copied from external URL or form fields inputs tab
        
        2 - copied from prepared list table dataTable() object tab
      - src (default: 'item')
        
        Type: String
        
        Copy source:
        
        'item' - elFinder file name / form input value
        
        'type' - right side tab title
      - from (default: 3, depends on type: 2)
        
        Type: Integer
        
        Right side list table cell number to be copied
      - to (default: 4)
        
        Type: Integer
        
        Left side list table cell number where item to be copied
      - length (default: 1)
        
        Type: Integer
        
        Number of cells to be copied to left list table
      - unique (default: 1)
        
        Type: Integer
        
        0 - any rows can be copied
        
        1 - only unique rows can be copied
      - uniqueTarget (default: [])
        
        Type: Array
        
        index array of cells to be checked for unique; default - check unique of all cells
      - unique_ignore_type (unique_ignore_type: false)
        
        Type: Boolean
        
        false - unique only for type
        
        true - ignore type when checking unique
      - html (html: 0)
        
        Type: Integer
        
        0 - right side input does not have html tags
        
        1 - right side input has html tags
      - validate ( default: null - return true if form fields are valid; else return false; )
        
        Type: Function( Array input)
        
        It is validate function executed before form fields inputs (type=1) are copied to dataTable row cells. Function parameters:
        
        input
        
        Type: Array
        
        form fields inputs array
  - - reordering (default: true)
    - Type: Boolean
    - Left side list table dataTable() object rows are draggable
  - - defaultValue (default: '')
    - Type: String
    - Default text to fill table dataTable() object row cells
  - - cms_path (default: '/cms/srv')
    - Type: String
    - Relative path to CMS software
  - - uniqueID (default: false)
    - Type: Boolean
    - Generate unique ID for plugin and it's internals. Prepend plugin id to all iternals if false
  - - elfinder
    - Type: PlainObject
    - elFinder file manager configuration options. Defaults are:
    - { // elFinder file system navigtator config url : '/cms/srv/program/components/elfinder/elfinder_dt.php', // connector URL (REQUIRED) getfile : { // send only URL or URL+path if false onlyURL : false, // allow to return multiple files info multiple : false, // allow to return folders info folders : false, // action after callback (close/destroy) oncomplete : '' }, getFileCallback: function(url) { }, height: 250, debug : ['all'], commands : [ 'open', 'reload', 'home', 'up', 'back', 'forward', 'getfile', 'quicklook', 'download', 'rm', 'duplicate', 'rename', 'mkdir', 'mkfile', 'upload', 'copy', 'cut', 'paste', 'edit', 'extract', 'archive', 'search', 'info', 'view', 'help', 'resize', 'sort', 'access' ], contextmenu : { // navbarfolder menu navbar : ['open', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'info', '|', 'access'], // current directory menu cwd : ['reload', 'back', '|', 'upload', 'mkdir', 'mkfile', 'paste', '|', 'sort', '|', 'info', '|', 'access'], // current directory file menu files : ['getfile', '|','open', 'quicklook', '|', 'download', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'edit', 'rename', 'resize', '|', 'archive', 'extract', '|', 'info', '|', 'access'] }, uiOptions : { // toolbar configuration toolbar : [ ['back', 'forward'], ['reload'], ['home', 'up'], ['mkdir', 'mkfile', 'upload'], ['open', 'download', 'getfile'], ['info'], ['quicklook'], ['copy', 'cut', 'paste'], ['rm'], ['duplicate', 'rename', 'edit', 'resize'], ['extract', 'archive'], ['search'], ['view'], ['help'], ['access'] ], // directories tree options tree : { // expand current root on init openRootOnLoad : true, // auto load current dir parents syncTree : true }, // navbar options navbar : { minWidth : 150, maxWidth : 500 }, // current working directory options cwd : { // display parent directory in listing as ".." oldSchool : false } }, clientFormatDate: true, fancyDateFormat : '$1 H:m:i', dateFormat : 'Y-m-d H:m:i' }
  - - selected
    - Type: PlainObject
    - Left side list table dataTable() object configuration options. Defaults are:
    - { // selected rows table configuration sDom: '<"cms_table_top"f><"cms_table_mid"rt><"cms_table_bot">', "aaSorting": [], "bPaginate": false, "fnDrawCallback": function ( oSettings ) {}, // when data table is redrawing "fnCreatedRow": function( nRow, aData, iDataIndex ) {} }
  - - list (depends on type: 2)
    - Type: PlainObject
    - Right side list table dataTable() object configuration options. Defaults are:
    - { // selectable system defined items table configuration sDom: '<"cms_table_top"f><"cms_table_mid"rt><"cms_table_bot"ip>', aoColumnDefs: [ { "sWidth": "1%", "aTargets": [ 0,1]}, // to be small width row sequence column { "bSortable": false, "aTargets": [0,1] } // no sort columns ], aaSorting: [ [2,'asc'] ] }
  - - beforeButtonsCallback ( default: {} )
    - Type: Function( String action, dataTable() selected, elfinder() filemanager, Array input, dataTable() list, tabs() tabs, jQuery element, PlainObject options)
    - It is callback function executed before buttons or enter actions. Function parameters:
      - action
        
        Type: String
        
        Action text values:
        
        'add'
        
        'rem'
        
        'add_all'
        
        'rem_all'
      - selected
        
        Type: dataTable()
        
        Selected items dataTable jQuery object
      - filemanager
        
        Type: elfinder()
        
        elFinder file manager jQuery object
      - input
        
        Type: Array
        
        Array of form inputs
      - list
        
        Type: dataTable()
        
        Selectable items dataTable object
      - tabs
        
        Type: tabs()
        
        UI Tabs jQuery object
      - element
        
        Type: jQuery
        
        Selected element for this jQuery plugin
      - options
        
        Type: PlainObject
        
        Plugin options
  - - afterButtonsCallback ( default: {} )
    - Type: Function( String action, dataTable() selected, elfinder() filemanager, Array input, dataTable() list, tabs() tabs, jQuery element, PlainObject options)
    - It is callback function executed after buttons or enter actions. Function parameters:
      - action
        
        Type: String
        
        Action text values:
        
        'add'
        
        'rem'
        
        'add_all'
        
        'rem_all'
      - selected
        
        Type: dataTable()
        
        Selected items dataTable jQuery object
      - filemanager
        
        Type: elfinder()
        
        elFinder file manager jQuery object
      - input
        
        Type: Array
        
        Array of form inputs
      - list
        
        Type: dataTable()
        
        Selectable items dataTable object
      - tabs
        
        Type: tabs()
        
        UI Tabs jQuery object
      - element
        
        Type: jQuery
        
        Selected element for this jQuery plugin
      - options
        
        Type: PlainObject
        
        Plugin options

.cms_dual_table( 'dataTable' )

Returns: dataTable()

- dataTable
- Type: String
- Returns dataTable() object of left side list table.

.cms_dual_table( 'elfinder' )

Returns: elfinder()

- elfinder
- Type: String
- Returns elfinder() object of right side input.

.cms_dual_table( 'getData' )

Returns: fnGetData()

- getData
- Type: String
- Returns fnGetData() function result of left side list table dataTable() object.

.cms_dual_table( 'clear' )

Returns: dataTable()

- clear
- Type: String
- Delete all rows from left side list table dataTable() object.
- Returns dataTable() object of left side list table.

.cms_dual_table( 'add', [ data , [ arg ]] )

Returns: dataTable()

- add
- Type: String, Array Boolean | String
- Add data to left side list table dataTable() object from data array
- Returns dataTable() object of left side list table.
- - data (optional)
  - Type: Array
  - Array of arrays of data.
- - arg (optional)
  - Type: Boolean | String
  - Type of ID:
    - n/a or false - compose add to dataTable() object row as ['<input type="checkbox"/>', 99999999, type, id, value, values], where:
      - type = data row cells[0]
      - id = name of tab (where right side tab[data row cells[0]] name and tab exist) or id = data row cells[1] (otherwise)
      - value = data row cells[2]
      - values = data row cells[3] ... data row cells[cells.length-1]
    - true - compose add to dataTable() object row as ['<input type="checkbox"/>', 99999999, type, value, values], where:
      - type = data row cell[0]
      - value = data row cells[2]
      - values = data row cells[2] ... data[data.length-1]
    - 'id' - compose add to dataTable() object row as ['<input type="checkbox"/>', 99999999, type, value, values], where:
      - type = data row cells[0]
      - value = data row cells[1]
      - values = data row cells[2] ... data row cells[cells.length-1]

.cms_dual_table( 'load', [ data , [ arg ]] )

Returns: dataTable()

- load
- Type: String, Array Boolean | String
- Load data to left side list table dataTable() object from data array
- Returns dataTable() object of left side list table.
- - data (optional)
  - Type: Array
  - Array of arrays of data.
- - arg (optional)
  - Type: Boolean | String
  - Type of ID:
    - n/a or false - compose load to dataTable() object rows as ['<input type="checkbox"/>', 99999999, type, id, value, values], where:
      - type = data row cells[0]
      - id = name of tab (where right side tab[data row cells[0]] name and tab exist) or id = data row cells[1] (otherwise)
      - value = data row cells[2]
      - values = data row cells[3] ... data row cells[cells.length-1]
    - true - compose load to dataTable() object rows as ['<input type="checkbox"/>', 99999999, type, value, values], where:
      - type = data row cell[0]
      - value = data row cells[2]
      - values = data row cells[2] ... data[data.length-1]
    - 'id' - compose load to dataTable() object rows as ['<input type="checkbox"/>', 99999999, type, value, values], where:
      - type = data row cells[0]
      - value = data row cells[1]
      - values = data row cells[2] ... data row cells[cells.length-1]

For jQuery UI based elements (dataTable, elRTE, elFinder, dialog) styling you can use jQuery UI Theming

cms_dual_table plugin has its own additional elements for styling and control:

class 'cms-dual-table-tabs' - right side tabs object
Right side tabs list item anchor href attribute '#cms-dual-table-loc' - elFinder file manager tab (type: 0)
Right side tabs list item anchor href attribute '#cms-dual-table-ext' - external URL or form fields tab (type: 1)
Right side tabs list item anchor href attribute '#cms-dual-table-sys' - prepared list table tab (type: 2)
eLfinder container (<div>) class 'cms-dual-table-elfinder' in right side list item '#cms-dual-table-loc'
Form fields (<input>) class 'cms-dual-table-input' in right side list item '#cms-dual-table-ext'
dataTable container (<table>) class 'cms-dual-table-list' in right side list item '#cms-dual-table-sys'
Left side list table (<table>) class 'cms-dual-table-selected'
class 'cms-dual-table-button-rem' - remove selected item/items from left side list table button class
class 'cms-dual-table-button-add' - add selected item/items to left side list table button class
class 'cms-dual-table-button-rem-all' - remove all items from left side list table button class
class 'cms-dual-table-button-add-all' - add all items to left side list table button class

Plugin cms_dual_table depends on following jQuery packages:

User ID:
User Password: