(function($) {
'use strict';
var grid = null;
/**
* 默认的配置选项
* @type {Object}
*/
var defaultOptions = {
query: {},
item: {},
data: [],
delay: 300,
showBtn: true,
clearable: false,
keyLeft: 37,
keyUp: 38,
keyRight: 39,
keyDown: 40,
keyEnter: 13
};
/**
* 显示下拉列表
*/
function showSuggest($input, options) {
var $dropdownMenu = $('#gdoo-suggest');
if (!$dropdownMenu.is(':visible')) {
$dropdownMenu.show();
$input.trigger('onShowSuggest', [options ? options.data : []]);
}
}
/**
* 隐藏下拉列表
*/
function hideSuggest($input, options) {
var $dropdownMenu = $('#gdoo-suggest');
if ($dropdownMenu.is(':visible')) {
$dropdownMenu.hide();
$input.trigger('onHideSuggest', [options ? options.data : []]);
}
}
/**
* 刷新数据
* ajax请求携带q参数
*/
function refreshData($input, options, params) {
showSuggest($input, options);
var event = gdoo.event.get(params.form_id + '.' + params.id);
event.trigger('open', params);
event.trigger('query', params);
params.suggest = true;
params.q = $input.val();
grid.rowSelection = params.multi == 1 ? 'multiple' : 'single';
grid.remoteDataUrl = app.url(params.url);
grid.remoteParams = params;
grid.remoteData();
return $input;
}
/**
* 构建 Suggest的agGrid
* 作为 fnGetData 的 callback 函数调用
*/
function buildSuggest($input, options, params) {
var $dropdownMenu = $('#gdoo-suggest');
$dropdownMenu.html('
');
var gridDiv = document.querySelector("#suggest-aggrid");
grid = new agGridOptions();
grid.suppressRowClickSelection = true;
grid.columnDefs = [
//{suppressMenu: true, cellClass:'text-center', checkboxSelection: true, headerCheckboxSelection: multiple, suppressSizeToFit: true, sortable: false, width: 40},
//{suppressMenu: true, cellClass:'text-center', sortable: false, suppressSizeToFit: true, cellRenderer: 'htmlCellRenderer', field: 'images', headerName: '图片', width: 40},
{suppressMenu: true, cellClass:'text-center', sortable: true, field: 'code', headerName: '存货编码', width: 100},
{suppressMenu: true, cellClass:'text-left', sortable: true, field: 'name', headerName: '产品名称', minWidth: 140},
{suppressMenu: true, cellClass:'text-center', sortable: true, field: 'spec', headerName: '规格型号', width: 100},
{suppressMenu: true, cellClass:'text-center', sortable: true, field: 'barcode', headerName: '产品条码', width: 120},
{suppressMenu: true, cellClass:'text-center', sortable: true, field: 'unit_id_name', headerName: '计量单位', width: 80},
{suppressMenu: true, cellClass:'text-right', field: 'price', headerName: '价格', width: 80}
];
grid.onRowClicked = function (row) {
var ret = grid.writeSelected([row.data]);
if (ret) {
hideSuggest($input, options);
}
};
/**
* 写入选中
*/
grid.writeSelected = function(rows) {
var params = grid.remoteParams;
var sid = params.prefix == 1 ? 'sid' : 'id';
var id = [];
var text = [];
$.each(rows, function(index, row) {
id.push(row[sid]);
text.push(row.name);
});
var input_id = params.form_id + '_' + params.id;
$('#'+input_id).val(id.join(','));
$('#'+input_id+'_text').val(text.join(','));
var event = gdoo.event.get(params.form_id + '.' + params.id);
if (event.exist('onSelect')) {
return event.trigger('onSelect', grid.rowSelection == 'multiple' ? rows : rows[0]);
}
return true;
}
new agGrid.Grid(gridDiv, grid);
return $input;
}
$.fn.gdooDialogInput = function(options) {
var self = this;
options = options || {};
options = $.extend(true, {}, defaultOptions, options);
$('body').append('');
return self.each(function() {
var $input = $(this);
var params = $input.data();
var keyupTimer = null;
var isMouseenter = 0;
var $dropdownMenu = $('#gdoo-suggest');
buildSuggest($input, options, params);
$input.off();
// 开始事件处理
$input.on('keydown', function(event) {
// 当提示层显示时才对键盘事件处理
if (!$dropdownMenu.is(':visible')) {
return;
}
if (event.keyCode === options.keyEnter) {
hideSuggest($input, options);
}
}).on('keyup input paste', function(event) {
// 如果弹起的键是回车、向上或向下方向键则返回
if (~ $.inArray(event.keyCode, [options.keyDown, options.keyUp, options.keyEnter])) {
$input.val($input.val()); // 让鼠标输入跳到最后
return;
}
clearTimeout(keyupTimer);
keyupTimer = setTimeout(function() {
refreshData($input, options, params);
}, options.delay);
}).on('focus', function() {
$dropdownMenu.off();
var w = $(window).width();
var h = $(window).height();
var width = $input.outerWidth();
var height = $input.outerHeight();
var offset = $input.offset();
var dw = $dropdownMenu.outerWidth();
var dh = $dropdownMenu.outerHeight();
var css = {top: offset.top + height - 1};
// 判断是否小于768
if (w < 768) {
css.minWidth = 360;
css.left = 14;
css.right = 14;
} else {
css.left = offset.left;
// 右边超出
if (w < offset.left + dw + 10) {
css.left = offset.left - dw + width;
}
// 下边超出
if (h < offset.top + dh + 10) {
css.top = offset.top - dh + 1;
}
}
$dropdownMenu.css(css);
// 列表中滑动时,输入框失去焦点
$dropdownMenu.on('mouseenter', function() {
isMouseenter = 1;
$input.blur();
}).on('mouseleave', function() {
isMouseenter = 0;
$input.focus();
}).on('click', function() {
// 阻止冒泡
return false;
});
}).on('blur', function() {
// 隐藏对话框
if (!isMouseenter) {
hideSuggest($input, options);
}
});
});
}
})(jQuery);