提交 9d0d9c99 编写于 作者: T Terry

appadmin 增加可以编辑的select类型

上级 067a2421
......@@ -79,6 +79,8 @@ class AppadminbaseBlockEdit extends BaseObject
<input type="hidden" value="{$this->_param[$this->_primaryKey]}" size="30" name="{$this->_editFormData}[{$this->_primaryKey}]" class="textInput ">
EOF;
}
$idsj = md5(time());
$idsji = 0;
foreach ($editArr as $column) {
$name = $column['name'];
$require = $column['require'] ? 'required' : '';
......@@ -209,6 +211,45 @@ EOF;
<label>{$label}:</label>
{$select_str}
</p>
EOF;
} elseif ($display_type == 'editSelect') {
$data = isset($display['data']) ? $display['data'] : '';
//var_dump($data);
//echo $value;
$select_str = '';
if (is_array($data)) {
$idsji++;
$selectId = $idsj.$idsji;
$select_str .= <<<EOF
<select id="{$selectId}" class=" {$require}" name="{$this->_editFormData}[{$name}]" >
EOF;
$select_str .= '<option value="">'.$label.'</option>';
$editSelectChosen = false;
foreach ($data as $k => $v) {
if ($value == $k) {
//echo $value."#".$k;
$select_str .= '<option selected value="'.$k.'">'.$v.'</option>';
$editSelectChosen = true;
} else {
$select_str .= '<option value="'.$k.'">'.$v.'</option>';
}
}
if (!$editSelectChosen) {
$select_str .= '<option selected value="'.$value.'">'.$value.'</option>';
}
$select_str .= '</select>';
}
$str .= <<<EOF
<p class="edit_p">
<label>{$label}:</label>
{$select_str}
</p>
<script type="text/javascript">
$('#{$selectId}').editableSelect(
{ filter: false }
);
</script>
EOF;
} elseif ($display_type == 'textarea') {
$rows = isset($display['rows']) ? $display['rows'] : 15;
......
......@@ -242,11 +242,15 @@ class Manageredit extends AppadminbaseBlockEdit implements AppadminbaseBlockEdit
if (!empty($editArr) && is_array($editArr)) {
foreach ($editArr as $k => $v) {
$editArr[$k]['label'] = Yii::$service->page->translate->__($k);
if (isset($v['display']['type']) && $v['display']['type'] == 'select') {
if (isset($v['display']['type']) && in_array($v['display']['type'], ['select', 'editSelect'])) {
if (isset($v['display']['data']) && is_array($v['display']['data'])) {
$select_data = [];
foreach ($v['display']['data'] as $v2) {
$select_data[$v2] = Yii::$service->page->translate->__($v2);
if ($v['display']['type'] == 'select') {
$select_data[$v2] = Yii::$service->page->translate->__($v2);
} else {
$select_data[$v2] = $v2;
}
}
$editArr[$k]['display']['data'] = $select_data;
}
......
/**
* jQuery Editable Select
* Indri Muska <indrimuska@gmail.com>
*
* Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
*/
input.es-input { padding-right: 20px !important; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat; }
input.es-input.open {
-webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; }
.es-list { position: absolute; padding: 0; margin: 0; border: 1px solid #d1d1d1; display: none; z-index: 1000; background: #fff; max-height: 160px; overflow-y: auto;
-moz-box-shadow: 0 2px 3px #ccc; -webkit-box-shadow: 0 2px 3px #ccc; box-shadow: 0 2px 3px #ccc; }
.es-list li { display: block; padding: 5px 10px; margin: 0; }
.es-list li.selected { background: #f3f3f3; }
.es-list li[disabled] { opacity: .5; }
\ No newline at end of file
/**
* jQuery Editable Select
* Indri Muska <indrimuska@gmail.com>
*
* Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
*/
+(function ($) {
// jQuery Editable Select
EditableSelect = function (select, options) {
var that = this;
this.options = options;
this.$select = $(select);
this.$input = $('<input type="text" autocomplete="off">');
this.$list = $('<ul class="es-list">');
this.utility = new EditableSelectUtility(this);
if (['focus', 'manual'].indexOf(this.options.trigger) < 0) this.options.trigger = 'focus';
if (['default', 'fade', 'slide'].indexOf(this.options.effects) < 0) this.options.effects = 'default';
if (isNaN(this.options.duration) && ['fast', 'slow'].indexOf(this.options.duration) < 0) this.options.duration = 'fast';
// create text input
this.$select.replaceWith(this.$input);
this.$list.appendTo(this.options.appendTo || this.$input.parent());
// initalization
this.utility.initialize();
this.utility.initializeList();
this.utility.initializeInput();
this.utility.trigger('created');
}
EditableSelect.DEFAULTS = { filter: true, effects: 'default', duration: 'fast', trigger: 'focus' };
EditableSelect.prototype.filter = function () {
var hiddens = 0;
var search = this.$input.val().toLowerCase().trim();
this.$list.find('li').addClass('es-visible').show();
if (this.options.filter) {
hiddens = this.$list.find('li').filter(function (i, li) { return $(li).text().toLowerCase().indexOf(search) < 0; }).hide().removeClass('es-visible').length;
if (this.$list.find('li').length == hiddens) this.hide();
}
};
EditableSelect.prototype.show = function () {
this.$list.css({
top: this.$input.position().top + this.$input.outerHeight() - 1,
left: this.$input.position().left,
width: this.$input.outerWidth()
});
if (!this.$list.is(':visible') && this.$list.find('li.es-visible').length > 0) {
var fns = { default: 'show', fade: 'fadeIn', slide: 'slideDown' };
var fn = fns[this.options.effects];
this.utility.trigger('show');
this.$input.addClass('open');
this.$list[fn](this.options.duration, $.proxy(this.utility.trigger, this.utility, 'shown'));
}
};
EditableSelect.prototype.hide = function () {
var fns = { default: 'hide', fade: 'fadeOut', slide: 'slideUp' };
var fn = fns[this.options.effects];
this.utility.trigger('hide');
this.$input.removeClass('open');
this.$list[fn](this.options.duration, $.proxy(this.utility.trigger, this.utility, 'hidden'));
};
EditableSelect.prototype.select = function ($li) {
if (!this.$list.has($li) || !$li.is('li.es-visible:not([disabled])')) return;
this.$input.val($li.text());
if (this.options.filter) this.hide();
this.filter();
this.utility.trigger('select', $li);
};
EditableSelect.prototype.add = function (text, index, attrs, data) {
var $li = $('<li>').html(text);
var $option = $('<option>').text(text);
var last = this.$list.find('li').length;
if (isNaN(index)) index = last;
else index = Math.min(Math.max(0, index), last);
if (index == 0) {
this.$list.prepend($li);
this.$select.prepend($option);
} else {
this.$list.find('li').eq(index - 1).after($li);
this.$select.find('option').eq(index - 1).after($option);
}
this.utility.setAttributes($li, attrs, data);
this.utility.setAttributes($option, attrs, data);
this.filter();
};
EditableSelect.prototype.remove = function (index) {
var last = this.$list.find('li').length;
if (isNaN(index)) index = last;
else index = Math.min(Math.max(0, index), last - 1);
this.$list.find('li').eq(index).remove();
this.$select.find('option').eq(index).remove();
this.filter();
};
EditableSelect.prototype.clear = function () {
this.$list.find('li').remove();
this.$select.find('option').remove();
this.filter();
};
EditableSelect.prototype.destroy = function () {
this.$list.off('mousemove mousedown mouseup');
this.$input.off('focus blur input keydown');
this.$input.replaceWith(this.$select);
this.$list.remove();
this.$select.removeData('editable-select');
};
// Utility
EditableSelectUtility = function (es) {
this.es = es;
}
EditableSelectUtility.prototype.initialize = function () {
var that = this;
that.setAttributes(that.es.$input, that.es.$select[0].attributes, that.es.$select.data());
that.es.$input.addClass('es-input').data('editable-select', that.es);
that.es.$select.find('option').each(function (i, option) {
var $option = $(option).remove();
that.es.add($option.text(), i, option.attributes, $option.data());
if ($option.attr('selected')) that.es.$input.val($option.text());
});
that.es.filter();
};
EditableSelectUtility.prototype.initializeList = function () {
var that = this;
that.es.$list
.on('mousemove', 'li:not([disabled])', function () {
that.es.$list.find('.selected').removeClass('selected');
$(this).addClass('selected');
})
.on('mousedown', 'li', function (e) {
if ($(this).is('[disabled]')) e.preventDefault();
else that.es.select($(this));
})
.on('mouseup', function () {
that.es.$list.find('li.selected').removeClass('selected');
});
};
EditableSelectUtility.prototype.initializeInput = function () {
var that = this;
switch (this.es.options.trigger) {
default:
case 'focus':
that.es.$input
.on('focus', $.proxy(that.es.show, that.es))
.on('blur', $.proxy(that.es.hide, that.es));
break;
case 'manual':
break;
}
that.es.$input.on('input keydown', function (e) {
switch (e.keyCode) {
case 38: // Up
var visibles = that.es.$list.find('li.es-visible:not([disabled])');
var selectedIndex = visibles.index(visibles.filter('li.selected'));
that.highlight(selectedIndex - 1);
e.preventDefault();
break;
case 40: // Down
var visibles = that.es.$list.find('li.es-visible:not([disabled])');
var selectedIndex = visibles.index(visibles.filter('li.selected'));
that.highlight(selectedIndex + 1);
e.preventDefault();
break;
case 13: // Enter
if (that.es.$list.is(':visible')) {
that.es.select(that.es.$list.find('li.selected'));
e.preventDefault();
}
break;
case 9: // Tab
case 27: // Esc
that.es.hide();
break;
default:
that.es.filter();
that.highlight(0);
break;
}
});
};
EditableSelectUtility.prototype.highlight = function (index) {
var that = this;
that.es.show();
setTimeout(function () {
var visibles = that.es.$list.find('li.es-visible');
var oldSelected = that.es.$list.find('li.selected').removeClass('selected');
var oldSelectedIndex = visibles.index(oldSelected);
if (visibles.length > 0) {
var selectedIndex = (visibles.length + index) % visibles.length;
var selected = visibles.eq(selectedIndex);
var top = selected.position().top;
selected.addClass('selected');
if (selectedIndex < oldSelectedIndex && top < 0)
that.es.$list.scrollTop(that.es.$list.scrollTop() + top);
if (selectedIndex > oldSelectedIndex && top + selected.outerHeight() > that.es.$list.outerHeight())
that.es.$list.scrollTop(that.es.$list.scrollTop() + selected.outerHeight() + 2 * (top - that.es.$list.outerHeight()));
}
});
};
EditableSelectUtility.prototype.setAttributes = function ($element, attrs, data) {
$.each(attrs || {}, function (i, attr) { $element.attr(attr.name, attr.value); });
$element.data(data);
};
EditableSelectUtility.prototype.trigger = function (event) {
var params = Array.prototype.slice.call(arguments, 1);
var args = [event + '.editable-select'];
args.push(params);
this.es.$select.trigger.apply(this.es.$select, args);
this.es.$input.trigger.apply(this.es.$input, args);
};
// Plugin
Plugin = function (option) {
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function () {
var $this = $(this);
var data = $this.data('editable-select');
var options = $.extend({}, EditableSelect.DEFAULTS, $this.data(), typeof option == 'object' && option);
if (!data) data = new EditableSelect(this, options);
if (typeof option == 'string') data[option].apply(data, args);
});
}
$.fn.editableSelect = Plugin;
$.fn.editableSelect.Constructor = EditableSelect;
})(jQuery);
\ No newline at end of file
......@@ -35,6 +35,7 @@ $jsOptions = [
[
'js' =>[
'js/appadmin.js',
'js/jquery-editable-select.js',
],
// js 放到尾部
'options' => [
......@@ -70,6 +71,7 @@ $cssOptions = [
'css' =>[
'css/appadmin.css',
'css/bootstrap-appadmin.css',
'css/jquery-editable-select.css',
],
// 将css放到最后面
'options' => [
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册