list input + checklist alpha
This commit is contained in:
vitalets
parent
903882e161
commit
d2f988d545
@ -1,6 +1,10 @@
|
||||
X-editable changelog
|
||||
=============================
|
||||
|
||||
|
||||
Version 1.0.2 wip
|
||||
----------------------------
|
||||
[enh] updated docs: inputs dropdown menu, global templates section (vitalets)
|
||||
|
||||
|
||||
Version 1.0.1 Nov 22, 2012
|
||||
----------------------------
|
||||
|
||||
@ -17,7 +17,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
||||
|
||||
EditableForm.prototype = {
|
||||
constructor: EditableForm,
|
||||
initInput: function() {
|
||||
initInput: function() { //called once
|
||||
var TypeConstructor, typeOptions;
|
||||
|
||||
//create input of specified type
|
||||
@ -247,7 +247,18 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
||||
|
||||
option: function(key, value) {
|
||||
this.options[key] = value;
|
||||
}
|
||||
if(key === 'value') {
|
||||
this.setValue(value);
|
||||
}
|
||||
},
|
||||
|
||||
setValue: function(value, convertStr) {
|
||||
if(convertStr) {
|
||||
this.value = this.input.str2value(value);
|
||||
} else {
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
150
src/inputs/checklist.js
Normal file
150
src/inputs/checklist.js
Normal file
@ -0,0 +1,150 @@
|
||||
/**
|
||||
Checklist input. Internally value stored as array.
|
||||
|
||||
@class checklist
|
||||
@extends list
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="status" data-type="checklist" data-pk="1" data-url="/post" data-original-title="Select options"></a>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#options').editable({
|
||||
value: [2, 3],
|
||||
source: [
|
||||
{value: 1, text: 'Active'},
|
||||
{value: 2, text: 'Blocked'},
|
||||
{value: 3, text: 'Deleted'}
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
**/
|
||||
(function ($) {
|
||||
|
||||
var Checklist = function (options) {
|
||||
this.init('checklist', options, Checklist.defaults);
|
||||
};
|
||||
|
||||
$.fn.editableform.utils.inherit(Checklist, $.fn.editableform.types.list);
|
||||
|
||||
$.extend(Checklist.prototype, {
|
||||
renderList: function() {
|
||||
var $label, $div;
|
||||
if(!$.isArray(this.sourceData)) {
|
||||
return;
|
||||
}
|
||||
|
||||
for(var i=0; i<this.sourceData.length; i++) {
|
||||
$label = $('<label>').text(' '+this.sourceData[i].text)
|
||||
.prepend($('<input>', {
|
||||
type: 'checkbox',
|
||||
value: this.sourceData[i].value,
|
||||
name: this.options.name
|
||||
}));
|
||||
|
||||
$('<div>').append($label).appendTo(this.$input);
|
||||
}
|
||||
},
|
||||
|
||||
value2str: function(value) {
|
||||
return $.isArray(value) ? value.join($.trim(this.options.separator)) : '';
|
||||
},
|
||||
|
||||
//parse separated string
|
||||
str2value: function(str) {
|
||||
var reg, value = null;
|
||||
if(typeof str === 'string' && str.length) {
|
||||
reg = new RegExp('\s*'+$.trim(this.options.separator)+'\s*');
|
||||
value = str.split(reg);
|
||||
} else if($.isArray(str)) {
|
||||
value = str;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
//set checked on required checkboxes
|
||||
value2input: function(value) {
|
||||
var $checks = this.$input.find('input[type="checkbox"]');
|
||||
$checks.removeAttr('checked');
|
||||
if($.isArray(value) && value.length) {
|
||||
$checks.each(function(i, el) {
|
||||
if($.inArray($(el).val(), value) !== -1) {
|
||||
$(el).attr('checked', 'checked');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
input2value: function() {
|
||||
var checked = [];
|
||||
this.$input.find('input:checked').each(function(i, el) {
|
||||
checked.push($(el).val());
|
||||
});
|
||||
return checked;
|
||||
},
|
||||
|
||||
//collect text of checked boxes
|
||||
value2htmlFinal: function(value, element) {
|
||||
var selected = [], html = '';
|
||||
if($.isArray(value) && value.length <= this.options.limit) {
|
||||
for(var i=0; i<value.length; i++){
|
||||
item = this.itemByVal(value[i]);
|
||||
if(item) {
|
||||
selected.push($('<div>').text(item.text).html());
|
||||
}
|
||||
}
|
||||
html = selected.join(this.options.viewseparator);
|
||||
} else {
|
||||
html = this.options.limitText.replace('{checked}', $.isArray(value) ? value.length : 0).replace('{count}', this.sourceData.length);
|
||||
}
|
||||
$(element).html(html);
|
||||
}
|
||||
});
|
||||
|
||||
Checklist.defaults = $.extend({}, $.fn.editableform.types.list.defaults, {
|
||||
/**
|
||||
@property tpl
|
||||
@default <div></div>
|
||||
**/
|
||||
tpl:'<div></div>',
|
||||
|
||||
/**
|
||||
Separator of values in string when sending to server
|
||||
|
||||
@property separator
|
||||
@type string
|
||||
@default ', '
|
||||
**/
|
||||
separator: ',',
|
||||
/**
|
||||
Separator of text when display as element content.
|
||||
|
||||
@property viewseparator
|
||||
@type string
|
||||
@default ', '
|
||||
**/
|
||||
viewseparator: '<br>',
|
||||
/**
|
||||
Maximum number of items shown as element content.
|
||||
If checked more items - <code>limitText</code> will be shown.
|
||||
|
||||
@property limit
|
||||
@type integer
|
||||
@default 4
|
||||
**/
|
||||
limit: 4,
|
||||
/**
|
||||
Text shown when count of checked items is greater than <code>limit</code> parameter.
|
||||
You can use <code>{checked}</code> and <code>count</code> placeholders.
|
||||
|
||||
@property limitText
|
||||
@type string
|
||||
@default 'Checked {checked} options of {count}'
|
||||
**/
|
||||
limitText: 'Checked {checked} options of {count}'
|
||||
});
|
||||
|
||||
$.fn.editableform.types.checklist = Checklist;
|
||||
|
||||
}(window.jQuery));
|
||||
@ -5,6 +5,7 @@ For localization you can include js file from here: https://github.com/eternicod
|
||||
|
||||
@class date
|
||||
@extends abstract
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="dob" data-type="date" data-pk="1" data-url="/post" data-original-title="Select date">15/05/1984</a>
|
||||
<script>
|
||||
|
||||
@ -5,6 +5,7 @@ Do not use it together with bootstrap-datepicker.
|
||||
|
||||
@class dateui
|
||||
@extends abstract
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="dob" data-type="date" data-pk="1" data-url="/post" data-original-title="Select date">15/05/1984</a>
|
||||
<script>
|
||||
|
||||
255
src/inputs/list.js
Normal file
255
src/inputs/list.js
Normal file
@ -0,0 +1,255 @@
|
||||
/**
|
||||
List - abstract class for inputs that have source option loaded from js array or via ajax
|
||||
|
||||
@class list
|
||||
@extends abstract
|
||||
**/
|
||||
(function ($) {
|
||||
|
||||
var List = function (options) {
|
||||
|
||||
};
|
||||
|
||||
$.fn.editableform.utils.inherit(List, $.fn.editableform.types.abstract);
|
||||
|
||||
$.extend(List.prototype, {
|
||||
render: function () {
|
||||
List.superclass.render.call(this);
|
||||
var deferred = $.Deferred();
|
||||
this.error = null;
|
||||
this.sourceData = null;
|
||||
this.prependData = null;
|
||||
this.onSourceReady(function () {
|
||||
this.renderList();
|
||||
deferred.resolve();
|
||||
}, function () {
|
||||
this.error = this.options.sourceError;
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
html2value: function (html) {
|
||||
return null; //can't set value by text
|
||||
},
|
||||
|
||||
value2html: function (value, element) {
|
||||
var deferred = $.Deferred();
|
||||
this.onSourceReady(function () {
|
||||
this.value2htmlFinal(value, element);
|
||||
deferred.resolve();
|
||||
}, function () {
|
||||
List.superclass.value2html(this.options.sourceError, element);
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
// ------------- additional functions ------------
|
||||
|
||||
onSourceReady: function (success, error) {
|
||||
//if allready loaded just call success
|
||||
if($.isArray(this.sourceData)) {
|
||||
success.call(this);
|
||||
return;
|
||||
}
|
||||
|
||||
// try parse json in single quotes (for double quotes jquery does automatically)
|
||||
try {
|
||||
this.options.source = $.fn.editableform.utils.tryParseJson(this.options.source, false);
|
||||
} catch (e) {
|
||||
error.call(this);
|
||||
return;
|
||||
}
|
||||
|
||||
//loading from url
|
||||
if (typeof this.options.source === 'string') {
|
||||
var cacheID = this.options.source + (this.options.name ? '-' + this.options.name : ''),
|
||||
cache;
|
||||
|
||||
if (!$(document).data(cacheID)) {
|
||||
$(document).data(cacheID, {});
|
||||
}
|
||||
cache = $(document).data(cacheID);
|
||||
|
||||
//check for cached data
|
||||
if (cache.loading === false && cache.sourceData) { //take source from cache
|
||||
this.sourceData = cache.sourceData;
|
||||
success.call(this);
|
||||
return;
|
||||
} else if (cache.loading === true) { //cache is loading, put callback in stack to be called later
|
||||
cache.callbacks.push($.proxy(function () {
|
||||
this.sourceData = cache.sourceData;
|
||||
success.call(this);
|
||||
}, this));
|
||||
|
||||
//also collecting error callbacks
|
||||
cache.err_callbacks.push($.proxy(error, this));
|
||||
return;
|
||||
} else { //no cache yet, activate it
|
||||
cache.loading = true;
|
||||
cache.callbacks = [];
|
||||
cache.err_callbacks = [];
|
||||
}
|
||||
|
||||
//loading sourceData from server
|
||||
$.ajax({
|
||||
url: this.options.source,
|
||||
type: 'get',
|
||||
cache: false,
|
||||
data: {name: this.options.name},
|
||||
dataType: 'json',
|
||||
success: $.proxy(function (data) {
|
||||
cache.loading = false;
|
||||
// this.options.source = data;
|
||||
this.sourceData = this.makeArray(data);
|
||||
if($.isArray(this.sourceData)) {
|
||||
this.doPrepend();
|
||||
//store result in cache
|
||||
cache.sourceData = this.sourceData;
|
||||
success.call(this);
|
||||
$.each(cache.callbacks, function () { this.call(); }); //run success callbacks for other fields
|
||||
} else {
|
||||
error.call(this);
|
||||
$.each(cache.err_callbacks, function () { this.call(); }); //run error callbacks for other fields
|
||||
}
|
||||
}, this),
|
||||
error: $.proxy(function () {
|
||||
cache.loading = false;
|
||||
error.call(this);
|
||||
$.each(cache.err_callbacks, function () { this.call(); }); //run error callbacks for other fields
|
||||
}, this)
|
||||
});
|
||||
} else { //options as json/array
|
||||
this.sourceData = this.makeArray(this.options.source);
|
||||
if($.isArray(this.sourceData)) {
|
||||
this.doPrepend();
|
||||
success.call(this);
|
||||
} else {
|
||||
error.call(this);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
doPrepend: function () {
|
||||
if(this.options.prepend === null || this.options.prepend === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(!$.isArray(this.prependData)) {
|
||||
//try parse json in single quotes
|
||||
this.options.prepend = $.fn.editableform.utils.tryParseJson(this.options.prepend, true);
|
||||
if (typeof this.options.prepend === 'string') {
|
||||
this.options.prepend = {'': this.options.prepend};
|
||||
}
|
||||
this.prependData = this.makeArray(this.options.prepend);
|
||||
}
|
||||
|
||||
if($.isArray(this.prependData) && $.isArray(this.sourceData)) {
|
||||
this.sourceData = this.prependData.concat(this.sourceData);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
renders input list
|
||||
*/
|
||||
renderList: function() {
|
||||
// this method should be overwritten in child class
|
||||
},
|
||||
|
||||
/*
|
||||
set element's html by value
|
||||
*/
|
||||
value2htmlFinal: function(value, element) {
|
||||
// this method should be overwritten in child class
|
||||
},
|
||||
|
||||
/**
|
||||
* convert data to array suitable for sourceData, e.g. [{value: 1, text: 'abc'}, {...}]
|
||||
*/
|
||||
makeArray: function(data) {
|
||||
var count, obj, result = [], iterateEl;
|
||||
if(!data || typeof data === 'string') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if($.isArray(data)) { //array
|
||||
iterateEl = function (k, v) {
|
||||
obj = {value: k, text: v};
|
||||
if(count++ >= 2) {
|
||||
return false;// exit each if object has more than one value
|
||||
}
|
||||
};
|
||||
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
if(typeof data[i] === 'object') {
|
||||
count = 0;
|
||||
$.each(data[i], iterateEl);
|
||||
if(count === 1) {
|
||||
result.push(obj);
|
||||
} else if(count > 1 && data[i].hasOwnProperty('value') && data[i].hasOwnProperty('text')) {
|
||||
result.push(data[i]);
|
||||
} else {
|
||||
//data contains incorrect objects
|
||||
}
|
||||
} else {
|
||||
result.push({value: i, text: data[i]});
|
||||
}
|
||||
}
|
||||
} else { //object
|
||||
$.each(data, function (k, v) {
|
||||
result.push({value: k, text: v});
|
||||
});
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
//search for item by particular value
|
||||
itemByVal: function(val) {
|
||||
if($.isArray(this.sourceData)) {
|
||||
for(i=0; i<this.sourceData.length; i++){
|
||||
/*jshint eqeqeq: false*/
|
||||
if(this.sourceData[i].value == val) {
|
||||
/*jshint eqeqeq: true*/
|
||||
return this.sourceData[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
List.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
|
||||
/**
|
||||
Source data for dropdown list. If string - considered ajax url to load items. Otherwise should be an array.
|
||||
Array format is: <code>[{value: 1, text: "text"}, {...}]</code><br>
|
||||
For compability it also supports format <code>{value1: text1, value2: text2 ...}</code> but it does not guarantee elements order.
|
||||
|
||||
@property source
|
||||
@type string|array|object
|
||||
@default null
|
||||
**/
|
||||
source:null,
|
||||
/**
|
||||
Data automatically prepended to the begining of dropdown list.
|
||||
|
||||
@property prepend
|
||||
@type string|array|object
|
||||
@default false
|
||||
**/
|
||||
prepend:false,
|
||||
/**
|
||||
Error message when list cannot be loaded (e.g. ajax error)
|
||||
|
||||
@property sourceError
|
||||
@type string
|
||||
@default Error when loading list
|
||||
**/
|
||||
sourceError: 'Error when loading list'
|
||||
});
|
||||
|
||||
$.fn.editableform.types.list = List;
|
||||
|
||||
}(window.jQuery));
|
||||
@ -2,7 +2,8 @@
|
||||
Select (dropdown) input
|
||||
|
||||
@class select
|
||||
@extends abstract
|
||||
@extends list
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-original-title="Select status"></a>
|
||||
<script>
|
||||
@ -25,160 +26,10 @@ $(function(){
|
||||
this.init('select', options, Select.defaults);
|
||||
};
|
||||
|
||||
$.fn.editableform.utils.inherit(Select, $.fn.editableform.types.abstract);
|
||||
$.fn.editableform.utils.inherit(Select, $.fn.editableform.types.list);
|
||||
|
||||
$.extend(Select.prototype, {
|
||||
render: function () {
|
||||
Select.superclass.render.call(this);
|
||||
var deferred = $.Deferred();
|
||||
this.error = null;
|
||||
this.sourceData = null;
|
||||
this.prependData = null;
|
||||
this.onSourceReady(function () {
|
||||
this.renderOptions();
|
||||
deferred.resolve();
|
||||
}, function () {
|
||||
this.error = this.options.sourceError;
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
html2value: function (html) {
|
||||
return null; //it's not good idea to set value by text for SELECT. Better set NULL
|
||||
},
|
||||
|
||||
value2html: function (value, element) {
|
||||
var deferred = $.Deferred();
|
||||
this.onSourceReady(function () {
|
||||
var i, text = '';
|
||||
if($.isArray(this.sourceData)) {
|
||||
for(i=0; i<this.sourceData.length; i++){
|
||||
/*jshint eqeqeq: false*/
|
||||
if(this.sourceData[i].value == value) {
|
||||
/*jshint eqeqeq: true*/
|
||||
text = this.sourceData[i].text;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
Select.superclass.value2html(text, element);
|
||||
deferred.resolve();
|
||||
}, function () {
|
||||
Select.superclass.value2html(this.options.sourceError, element);
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
// ------------- additional functions ------------
|
||||
|
||||
onSourceReady: function (success, error) {
|
||||
//if allready loaded just call success
|
||||
if($.isArray(this.sourceData)) {
|
||||
success.call(this);
|
||||
return;
|
||||
}
|
||||
|
||||
// try parse json in single quotes (for double quotes jquery does automatically)
|
||||
try {
|
||||
this.options.source = $.fn.editableform.utils.tryParseJson(this.options.source, false);
|
||||
} catch (e) {
|
||||
error.call(this);
|
||||
return;
|
||||
}
|
||||
|
||||
//loading from url
|
||||
if (typeof this.options.source === 'string') {
|
||||
var cacheID = this.options.source + (this.options.name ? '-' + this.options.name : ''),
|
||||
cache;
|
||||
|
||||
if (!$(document).data(cacheID)) {
|
||||
$(document).data(cacheID, {});
|
||||
}
|
||||
cache = $(document).data(cacheID);
|
||||
|
||||
//check for cached data
|
||||
if (cache.loading === false && cache.sourceData) { //take source from cache
|
||||
this.sourceData = cache.sourceData;
|
||||
success.call(this);
|
||||
return;
|
||||
} else if (cache.loading === true) { //cache is loading, put callback in stack to be called later
|
||||
cache.callbacks.push($.proxy(function () {
|
||||
this.sourceData = cache.sourceData;
|
||||
success.call(this);
|
||||
}, this));
|
||||
|
||||
//also collecting error callbacks
|
||||
cache.err_callbacks.push($.proxy(error, this));
|
||||
return;
|
||||
} else { //no cache yet, activate it
|
||||
cache.loading = true;
|
||||
cache.callbacks = [];
|
||||
cache.err_callbacks = [];
|
||||
}
|
||||
|
||||
//loading sourceData from server
|
||||
$.ajax({
|
||||
url: this.options.source,
|
||||
type: 'get',
|
||||
cache: false,
|
||||
data: {name: this.options.name},
|
||||
dataType: 'json',
|
||||
success: $.proxy(function (data) {
|
||||
cache.loading = false;
|
||||
// this.options.source = data;
|
||||
this.sourceData = this.makeArray(data);
|
||||
if($.isArray(this.sourceData)) {
|
||||
this.doPrepend();
|
||||
//store result in cache
|
||||
cache.sourceData = this.sourceData;
|
||||
success.call(this);
|
||||
$.each(cache.callbacks, function () { this.call(); }); //run success callbacks for other fields
|
||||
} else {
|
||||
error.call(this);
|
||||
$.each(cache.err_callbacks, function () { this.call(); }); //run error callbacks for other fields
|
||||
}
|
||||
}, this),
|
||||
error: $.proxy(function () {
|
||||
cache.loading = false;
|
||||
error.call(this);
|
||||
$.each(cache.err_callbacks, function () { this.call(); }); //run error callbacks for other fields
|
||||
}, this)
|
||||
});
|
||||
} else { //options as json/array
|
||||
this.sourceData = this.makeArray(this.options.source);
|
||||
if($.isArray(this.sourceData)) {
|
||||
this.doPrepend();
|
||||
success.call(this);
|
||||
} else {
|
||||
error.call(this);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
doPrepend: function () {
|
||||
if(this.options.prepend === null || this.options.prepend === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(!$.isArray(this.prependData)) {
|
||||
//try parse json in single quotes
|
||||
this.options.prepend = $.fn.editableform.utils.tryParseJson(this.options.prepend, true);
|
||||
if (typeof this.options.prepend === 'string') {
|
||||
this.options.prepend = {'': this.options.prepend};
|
||||
}
|
||||
this.prependData = this.makeArray(this.options.prepend);
|
||||
}
|
||||
|
||||
if($.isArray(this.prependData) && $.isArray(this.sourceData)) {
|
||||
this.sourceData = this.prependData.concat(this.sourceData);
|
||||
}
|
||||
},
|
||||
|
||||
renderOptions: function() {
|
||||
renderList: function() {
|
||||
if(!$.isArray(this.sourceData)) {
|
||||
return;
|
||||
}
|
||||
@ -187,83 +38,24 @@ $(function(){
|
||||
this.$input.append($('<option>', {value: this.sourceData[i].value}).text(this.sourceData[i].text));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* convert data to array suitable for sourceData, e.g. [{value: 1, text: 'abc'}, {...}]
|
||||
*/
|
||||
makeArray: function(data) {
|
||||
var count, obj, result = [], iterateEl;
|
||||
if(!data || typeof data === 'string') {
|
||||
return null;
|
||||
|
||||
value2htmlFinal: function(value, element) {
|
||||
var text = '', item = this.itemByVal(value);
|
||||
if(item) {
|
||||
text = item.text;
|
||||
}
|
||||
|
||||
if($.isArray(data)) { //array
|
||||
iterateEl = function (k, v) {
|
||||
obj = {value: k, text: v};
|
||||
if(count++ >= 2) {
|
||||
return false;// exit each if object has more than one value
|
||||
}
|
||||
};
|
||||
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
if(typeof data[i] === 'object') {
|
||||
count = 0;
|
||||
$.each(data[i], iterateEl);
|
||||
if(count === 1) {
|
||||
result.push(obj);
|
||||
} else if(count > 1 && data[i].hasOwnProperty('value') && data[i].hasOwnProperty('text')) {
|
||||
result.push(data[i]);
|
||||
} else {
|
||||
//data contains incorrect objects
|
||||
}
|
||||
} else {
|
||||
result.push({value: i, text: data[i]});
|
||||
}
|
||||
}
|
||||
} else { //object
|
||||
$.each(data, function (k, v) {
|
||||
result.push({value: k, text: v});
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
Select.superclass.constructor.superclass.value2html(text, element);
|
||||
}
|
||||
});
|
||||
|
||||
Select.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
|
||||
Select.defaults = $.extend({}, $.fn.editableform.types.list.defaults, {
|
||||
/**
|
||||
@property tpl
|
||||
@default <select></select>
|
||||
**/
|
||||
tpl:'<select></select>',
|
||||
/**
|
||||
Source data for dropdown list. If string - considered ajax url to load items. Otherwise should be an array.
|
||||
Array format is: <code>[{value: 1, text: "text"}, {...}]</code><br>
|
||||
For compability it also supports format <code>{value1: text1, value2: text2 ...}</code> but it does not guarantee elements order.
|
||||
|
||||
@property source
|
||||
@type string|array|object
|
||||
@default null
|
||||
**/
|
||||
source:null,
|
||||
/**
|
||||
Data automatically prepended to the begining of dropdown list.
|
||||
|
||||
@property prepend
|
||||
@type string|array|object
|
||||
@default false
|
||||
**/
|
||||
prepend:false,
|
||||
/**
|
||||
Error message shown when list cannot be loaded (e.g. ajax error)
|
||||
|
||||
@property sourceError
|
||||
@type string
|
||||
@default Error when loading options
|
||||
**/
|
||||
sourceError: 'Error when loading options'
|
||||
tpl:'<select></select>'
|
||||
});
|
||||
|
||||
$.fn.editableform.types.select = Select;
|
||||
|
||||
}(window.jQuery));
|
||||
}(window.jQuery));
|
||||
@ -3,6 +3,7 @@ Text input
|
||||
|
||||
@class text
|
||||
@extends abstract
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="username" data-type="text" data-pk="1">awesome</a>
|
||||
<script>
|
||||
|
||||
@ -3,6 +3,7 @@ Textarea input
|
||||
|
||||
@class textarea
|
||||
@extends abstract
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="comments" data-type="textarea" data-pk="1">awesome comment!</a>
|
||||
<script>
|
||||
|
||||
@ -31,9 +31,11 @@ function getAssets(f, c, src, libs) {
|
||||
containers+'editable-container.js',
|
||||
element+'editable-element.js',
|
||||
inputs+'abstract.js',
|
||||
inputs+'list.js',
|
||||
inputs+'text.js',
|
||||
inputs+'textarea.js',
|
||||
inputs+'select.js'
|
||||
inputs+'select.js',
|
||||
inputs+'checklist.js'
|
||||
],
|
||||
|
||||
css = [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user