97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
/**
|
|
Select (dropdown)
|
|
|
|
@class select
|
|
@extends list
|
|
@final
|
|
@example
|
|
<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status"></a>
|
|
<script>
|
|
$(function(){
|
|
$('#status').editable({
|
|
value: 2,
|
|
source: [
|
|
{value: 1, text: 'Active'},
|
|
{value: 2, text: 'Blocked'},
|
|
{value: 3, text: 'Deleted'}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
**/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var Select = function (options) {
|
|
this.init('select', options, Select.defaults);
|
|
};
|
|
|
|
$.fn.editableutils.inherit(Select, $.fn.editabletypes.list);
|
|
|
|
$.extend(Select.prototype, {
|
|
renderList: function() {
|
|
this.$input.empty();
|
|
|
|
var fillItems = function($el, data) {
|
|
var attr;
|
|
if($.isArray(data)) {
|
|
for(var i=0; i<data.length; i++) {
|
|
attr = {};
|
|
if(data[i].children) {
|
|
attr.label = data[i].text;
|
|
$el.append(fillItems($('<optgroup>', attr), data[i].children));
|
|
} else {
|
|
attr.value = data[i].value;
|
|
if(data[i].disabled) {
|
|
attr.disabled = true;
|
|
}
|
|
$el.append($('<option>', attr).text(data[i].text));
|
|
}
|
|
}
|
|
}
|
|
return $el;
|
|
};
|
|
|
|
fillItems(this.$input, this.sourceData);
|
|
|
|
this.setClass();
|
|
|
|
//enter submit
|
|
this.$input.on('keydown.editable', function (e) {
|
|
if (e.which === 13) {
|
|
$(this).closest('form').submit();
|
|
}
|
|
});
|
|
},
|
|
|
|
value2htmlFinal: function(value, element) {
|
|
var text = '',
|
|
items = $.fn.editableutils.itemsByValue(value, this.sourceData);
|
|
|
|
if(items.length) {
|
|
text = items[0].text;
|
|
}
|
|
|
|
//$(element).text(text);
|
|
$.fn.editabletypes.abstractinput.prototype.value2html.call(this, text, element);
|
|
},
|
|
|
|
autosubmit: function() {
|
|
this.$input.off('keydown.editable').on('change.editable', function(){
|
|
$(this).closest('form').submit();
|
|
});
|
|
}
|
|
});
|
|
|
|
Select.defaults = $.extend({}, $.fn.editabletypes.list.defaults, {
|
|
/**
|
|
@property tpl
|
|
@default <select></select>
|
|
**/
|
|
tpl:'<select></select>'
|
|
});
|
|
|
|
$.fn.editabletypes.select = Select;
|
|
|
|
}(window.jQuery));
|