/*
* 版 本 Learun-ADMS-Ultimate V7.0.0 数字化智慧校园(http://www.learun.cn)
* Copyright (c) 2013-2018 北京泉江科技有限公司
* 创建人:Learun智慧校园-前端开发组
* 日 期:2017.03.22
* 描 述:learunSelect(普通,多选,树形数据,gird,搜索,输入框选择器)-渲染数据在点击的时候触发,考虑到在一个表单上有超级多的下拉框的绑定情况(这里需要考虑赋值的特殊性)
*/
(function ($, learun) {
"use strict";
$(function () {
$(document).click(function (e) {
e = e || Window.event;
var et = e.target || e.srcElement;
if (et.tagName != 'BODY') {
$('.lr-select-option').slideUp(150);
$('.lr-select').removeClass('lr-select-focus');
}
});
});
$.lrselect = {
htmlToData: function ($self) {
var dfop = $self[0]._lrselect.dfop;
var $ul = $self.find('ul');
dfop.data = [];
$ul.find('li').each(function () {
var $li = $(this);
var point = { id: $li.attr('data-value'), text: $li.html() };
dfop.data.push(point);
});
$ul.remove();
$ul = null;
dfop = null;
},
calc: function ($this, op) { // 计算高度和方向
var bodyHeight = 0;
var top = 0;
bodyHeight = $('body').height();
top = $this.offset().top;
var topH = top - 1;
var bottomH = bodyHeight - top - 30;
var selctH = 2;
// 计算选择框的高度
if (op.allowSearch) {
selctH += 30;
}
selctH += op.data.length * 26;
if (op.placeholder) {
selctH += 25;
}
if ((op.type === 'tree' || op.type === 'treemultiple') && op.data.length > 1) {
selctH = 200;
}
selctH = op.height || selctH;
var res = {
type: 0, // 0 向下 1 向上
height: 0
};
if (bottomH > 130 || bottomH > topH || bottomH > selctH) { // 如果能够显示四条数据和搜索框就采用下拉方式
res.height = bottomH > selctH ? selctH : bottomH;
} else {
res.type = 1;
res.height = topH > selctH ? selctH : topH;
}
return res;
},
initRender: function (dfop, $self) {
$('#learun_select_option_' + dfop.id).remove();
var $option = $('
');
var $optionContent = $('');
var $ul = $('
');
//$optionContent.css('max-height', dfop.maxHeight + 'px');
$option.hide();
$optionContent.html($ul);
$option.prepend($optionContent);
if (dfop.allowSearch) {
var $search = $('
');
$option.append($search);
$option.css('padding-bottom', '25px');
$search.on('click', function () { return false; });
$search.find('input').on("keypress", function (e) {
e = e || window.event;
if (e.keyCode === 13) {
var $this = $(this);
var keyword = $this.val();
var $option = $this.parents('.lr-select-option');
var dfop = $option[0].dfop;
if (dfop.type === "tree" || dfop.type === "treemultiple") {
var $optionContent = $this.parent().prev();
$optionContent.lrtreeSet('search', { keyword: keyword });
}
else if (dfop.type === "default" || dfop.type === "multiple") {
for (var i = 0, l = dfop.data.length; i < l; i++) {
var _item = dfop.data[i];
if (!keyword || _item[dfop.text].indexOf(keyword) != -1) {
_item._lrhide = false;
}
else {
_item._lrhide = true;
}
}
$.lrselect.render(dfop);
}
$option = null;
}
});
}
$('body').append($option);
$option.on('click', $.lrselect.itemClick);
$option[0].dfop = dfop;
$self.append('
==' + dfop.placeholder + '==
');
$self.attr('type', 'lrselect').addClass('lr-select');
if (dfop.type != 'tree') {
$optionContent.lrscroll();
}
},
render: function (dfop) {
switch (dfop.type) {
case 'default':
$.lrselect.defaultRender(dfop);
break;
case 'tree':
case 'treemultiple':
$.lrselect.treeRender(dfop);
break;
case 'gird':
break;
case 'multiple':
$.lrselect.multipleRender(dfop);
break;
default:
break;
}
dfop.isrender = true;
},
defaultRender: function (dfop) {
var $ul = $('#learun_select_option_content' + dfop.id);
$ul.html("");
if (dfop.placeholder) {
$ul.append('
==' + dfop.placeholder + '==
');
}
for (var i = 0, l = dfop.data.length; i < l; i++) {
var item = dfop.data[i];
if (!item._lrhide) {
var $li = $('
' + item[dfop.text] + '
');
$ul.append($li);
}
}
},
multipleRender: function (dfop) {
var $ul = $('#learun_select_option_content' + dfop.id);
$ul.html("");
if (dfop.placeholder) {
$ul.append('
==' + dfop.placeholder + '==
');
}
for (var i = 0, l = dfop.data.length; i < l; i++) {
var item = dfop.data[i];
if (!item._lrhide) {
if (!!dfop.multipleMapValue && dfop.multipleMapValue[i] != undefined) {
var $li = $('
' + item[dfop.text] + '
');
$ul.append($li);
}
else {
var $li = $('
' + item[dfop.text] + '
');
$ul.append($li);
}
}
}
},
treeRender: function (dfop) {
var $option = $('#learun_select_option_' + dfop.id);
$option.find('.lr-select-option-content').remove();
var $optionContent = $('');
$option.prepend($optionContent);
//$optionContent.css('max-height', dfop.maxHeight + 'px');
dfop.data.unshift({
"id": "-1",
"text": '==' + dfop.placeholder + '==',
"value": "-1",
"icon": "-1",
"parentnodes": "0",
"showcheck": false,
"isexpand": false,
"complete": true,
"hasChildren": false,
"ChildNodes": []
});
var treeop = {
data: dfop.data,
nodeClick: $.lrselect.treeNodeClick
};
if (dfop.type === 'treemultiple') {
treeop.nodeClick = $.lrselect.treeNodeClick2;
treeop.nodeCheck = $.lrselect.treeNodeCheck;
}
$optionContent.lrtree(treeop);
},
bindEvent: function ($self) {
$self.unbind('click');
$self.on('click', $.lrselect.click);
},
click: function (e) {
var $this = $(this);
if ($this.attr('readonly') == 'readonly' || $this.attr('disabled') == 'disabled') {
return false;
}
var dfop = $this[0]._lrselect.dfop;
if (!dfop.isload) {
return false;
}
if (!dfop.isrender) {
$.lrselect.render(dfop);
}
// 选中下拉框的某一项
e = e || Window.event;
var et = e.target || e.srcElement;
var $et = $(et);
var $option = $('#learun_select_option_' + dfop.id);
if ($option.is(":hidden")) {
$('.lr-select').removeClass('lr-select-focus');
$('.lr-select-option').slideUp(150);
$this.addClass('lr-select-focus');
var width = dfop.width || $this.parent().width();//+ (dfop.diffWidth || 0);
var height = $this.innerHeight();
var top = $this.offset().top;
var left = $this.offset().left;
var res = $.lrselect.calc($this, dfop);
if (res.type == 0) {
$option.css({ 'width': width, 'top': top + height + 2, 'left': left, 'height': res.height }).show();
}
else {
$option.css({ 'width': width, 'top': top - res.height - 2, 'left': left, 'height': res.height }).show();
}
$option.find('.lr-select-option-search').find('input').select();
if (dfop.type != 'multiple') {
$option.find('.selected').removeClass('selected');
if (dfop._index != -1) {
$option.find('.lr-selectitem-li[data-value="' + dfop._index + '"]').addClass('selected');
}
}
}
else {
$option.slideUp(150);
$this.removeClass('lr-select-focus');
}
dfop = null;
e.stopPropagation();
},
itemClick: function (e) {
// 选中下拉框的某一项
e = e || Window.event;
var et = e.target || e.srcElement;
var $et = $(et);
var $option = $(this);
var dfop = $option[0].dfop;
var $this = $('#' + dfop.id);
if (dfop.type != 'multiple') {
if ($et.hasClass('lr-selectitem-li')) {
var _index = $et.attr('data-value');
$option.find('.selected').removeClass('selected');
$et.addClass('selected');
if (dfop._index != _index) {
var $inputText = $this.find('.lr-select-placeholder');
if (_index == -1) {
$inputText.css('color', '#999');
$inputText.html('==' + dfop.placeholder + '==');
}
else {
$inputText.css('color', '#000');
$inputText.html(dfop.data[_index][dfop.text]);
}
dfop._index = _index;
$this.trigger("change");
if (dfop.select) {
dfop.select(dfop.data[_index]);
}
}
$option.slideUp(150);
$this.removeClass('lr-select-focus');
}
}
else {
if ($et.hasClass('lr-selectitem-li') || $et.hasClass('lr-select-node-cb')) {
var $inputText = $this.find('.lr-select-placeholder');
var $cbobj = $et.find('.lr-select-node-cb');
var _index = $et.attr('data-value');
if ($et.hasClass('lr-select-node-cb')) {
$cbobj = $et;
_index = $et.parent().attr('data-value');
}
dfop.multipleMapValue = dfop.multipleMapValue || {};
dfop.multipleValue = dfop.multipleValue || [];
dfop.multipleText = dfop.multipleText || [];
if (_index == -1) {
$inputText.css('color', '#999');
$inputText.html('==' + dfop.placeholder + '==');
dfop.multipleMapValue = {};
dfop.multipleValue = [];
dfop.multipleText = [];
$option.find('.lr-select-node-cb[src$="checkbox_1.png"]').attr('src', '/Content/images/learuntree/checkbox_0.png');
$option.slideUp(150);
$this.removeClass('lr-select-focus');
}
else {
var selected = true;
if (dfop.multipleMapValue[_index] == undefined) {
$inputText.css('color', '#000');
dfop.multipleValue.push(dfop.data[_index][dfop.value]);
dfop.multipleText.push(dfop.data[_index][dfop.text]);
dfop.multipleMapValue[_index] = dfop.data[_index];
$inputText.html(String(dfop.multipleText));
$cbobj.attr('src', '/Content/images/learuntree/checkbox_1.png');
}
else {
dfop.multipleValue = [];
dfop.multipleText = [];
delete dfop.multipleMapValue[_index];
$.each(dfop.multipleMapValue, function (_id, _item) {
dfop.multipleValue.push(_item[dfop.value]);
dfop.multipleText.push(_item[dfop.text]);
});
if (dfop.multipleText.length == 0) {
$inputText.css('color', '#999');
$inputText.html('==' + dfop.placeholder + '==');
}
else {
$inputText.html(String(dfop.multipleText));
}
selected = false;
$cbobj.attr('src', '/Content/images/learuntree/checkbox_0.png');
}
$this.trigger("change");
if (dfop.select) {
dfop.select(dfop.data[_index], selected, $this);
}
}
}
}
e.stopPropagation();
},
treeNodeClick: function (item, $item) {
var $option = $item.parents('.lr-select-option');
var dfop = $option[0].dfop;
$option.slideUp(150);
var $select = $('#' + dfop.id);
$select.removeClass('lr-select-focus');
dfop.currtentItem = item;
var $inputText = $select.find('.lr-select-placeholder');
$inputText.html(dfop.currtentItem.text);
if (item.value == '-1') {
$inputText.css('color', '#999');
}
else {
$inputText.css('color', '#000');
}
$select.trigger("change");
if (dfop.select) {
dfop.select(dfop.currtentItem);
}
$option = null;
$select = null;
},
treeNodeClick2: function (item, $item) {
var $tree = $item.parents('.lr-select-option-content');
var $option = $item.parents('.lr-select-option');
var dfop = $option[0].dfop;
var $select = $('#' + dfop.id);
$select.removeClass('lr-select-focus');
dfop.currtentItems = [];
if (item.value == '-1') {
$item.parents('.lr-select-option').slideUp(150);
$tree.lrtreeSet('allNoCheck');
var $inputText = $select.find('.lr-select-placeholder');
$inputText.html(item.text);
$inputText.css('color', '#999');
$select.trigger("change");
if (dfop.select) {
dfop.select([]);
}
}
$tree = null;
$option = null;
$select = null;
},
treeNodeCheck: function (item, $item) {
var $tree = $item.parents('.lr-select-option-content');
var $option = $item.parents('.lr-select-option');
var dfop = $option[0].dfop;
var $select = $('#' + dfop.id);
var $inputText = $select.find('.lr-select-placeholder');
$select.removeClass('lr-select-focus');
var data = $tree.lrtreeSet('getCheckNodesEx');
dfop.currtentItems = data;
var text = "";
for (var i = 0, l = data.length; i < l; i++) {
var one = data[i];
if (text != "") {
text += ",";
}
text += one.text;
}
if (text == "") {
$inputText.html("==" + dfop.placeholder + "==");
$inputText.css('color', '#999');
}
else {
$inputText.text(text);
$inputText.css('color', '#000');
}
$select.trigger("change");
if (dfop.select) {
dfop.select(dfop.currtentItems);
}
$tree = null;
$option = null;
$select = null;
$inputText = null;
},
defaultValue: function ($self, type) {
var dfop = $self[0]._lrselect.dfop;
dfop.currtentItem = null;
dfop._index = -1;
var $inputText = $self.find('.lr-select-placeholder');
$inputText.css('color', '#999');
$inputText.html('==' + dfop.placeholder + '==');
$('#' + dfop.id + ' .lr-select-option .selected').removeClass('selected');
dfop.select && dfop.select(null, type);
$self.trigger("change");
}
};
$.fn.lrselect = function (op) {
var dfop = {
// 请选择
placeholder: "请选择",
// 类型
type: 'default',// default,tree,treemultiple,gird,multiple
// 字段
value: "id",
text: "text",
title: "title",
// 宽度
width: false,
// 是否允许搜索
allowSearch: false,
// 访问数据接口地址
url: false,
data: false,
// 访问数据接口参数
param: null,
// 接口请求的方法
method: "GET",
//选择事件
select: false,
isload: false, // 数据是否加载完成
isrender: false// 选项是否渲染完成
};
$.extend(dfop, op || {});
var $self = $(this);
if ($self.length == 0) {
return $self;
}
dfop.id = $self.attr('id');
if (!dfop.id) {
return false;
}
if ($self[0]._lrselect) {
return $self;
}
$self[0]._lrselect = { dfop: dfop };
// 基础信息渲染
$.lrselect.bindEvent($self);
// 数据获取方式有三种:url,data,html
// url优先级最高
if (dfop.url) {
learun.httpAsync(dfop.method, dfop.url, dfop.param, function (data) {
$self[0]._lrselect.dfop.data = data || [];
$self[0]._lrselect.dfop.backdata = data || [];
dfop.isload = true;
});
}
else if (dfop.data) {
dfop.isload = true;
dfop.backdata = dfop.data;
}
else {// 最后是html方式获取(只适合数据比较少的情况)
$.lrselect.htmlToData($self);
dfop.isload = true;
dfop.backdata = dfop.data;
}
$.lrselect.initRender(dfop, $self);
return $self;
};
$.fn.lrselectRefresh = function (op) {
var $self = $(this);
if ($self.length == 0) {
return $self;
}
if (!$self[0]._lrselect) {
return false;
}
var dfop = $self[0]._lrselect.dfop;
if (!dfop) {
return false;
}
$.extend(dfop, op || {});
dfop.isload = false;
dfop.isrender = false;
if (dfop.url) {
learun.httpAsync(dfop.method, dfop.url, dfop.param, function (data) {
$self[0]._lrselect.dfop.data = data || [];
$self[0]._lrselect.dfop.backdata = data || [];
dfop.isload = true;
});
}
else if (dfop.data) {
dfop.isload = true;
dfop.backdata = dfop.data;
}
if (dfop._setValue != null && dfop._setValue != undefined) {
$self.lrselectSet(dfop._setValue);
}
else {
$.lrselect.defaultValue($self, 'refresh');
}
return $self;
};
$.fn.lrselectGet = function () {
var $this = $(this);
if ($this.length == 0) {
return $this;
}
var dfop = $this[0]._lrselect.dfop;
var value = '';
switch (dfop.type) {
case 'default':
if (dfop.data[dfop._index]) {
value = dfop.data[dfop._index][dfop.value];
}
break;
case 'tree':
if (dfop.currtentItem) {
value = dfop.currtentItem[dfop.value];
}
break;
case 'treemultiple':
if (dfop.currtentItems) {
for (var i = 0, l = dfop.currtentItems.length; i < l; i++) {
if (value != "") {
value += ",";
}
value += dfop.currtentItems[i][dfop.value];
}
}
break;
case 'gird':
break;
case 'multiple':
dfop.multipleValue = dfop.multipleValue || [];
return String(dfop.multipleValue);
default:
break;
}
return value;
};
$.fn.lrselectGetText = function () {
var $this = $(this);
if ($this.length == 0) {
return $this;
}
var dfop = $this[0]._lrselect.dfop;
var value = '';
switch (dfop.type) {
case 'default':
if (dfop.data[dfop._index]) {
value = dfop.data[dfop._index][dfop.text];
}
break;
case 'tree':
if (dfop.currtentItem) {
value = dfop.currtentItem[dfop.text];
}
break;
case 'treemultiple':
if (dfop.currtentItems) {
for (var i = 0, l = dfop.currtentItems.length; i < l; i++) {
if (value != "") {
value += ",";
}
value += dfop.currtentItems[i][dfop.text];
}
}
break;
case 'gird':
break;
case 'multiple':
dfop.multipleValue = dfop.multipleValue || [];
return String(dfop.multipleValue);
default:
break;
}
return value;
};
$.fn.lrselectSet = function (value) {
// 设置数据的值
var $this = $(this);
if ($this.length == 0) {
return $this;
}
if (!$this[0]._lrselect) {
return $this;
}
value = value + '';
if (value == '' || value == 'undefined' || value == 'null') {
$.lrselect.defaultValue($this);
return $this;
}
var dfop = $this[0]._lrselect.dfop;
dfop._setValue = null;
if (!dfop) {
return $this;
}
$('#' + dfop.id + ' .lr-select-option .selected').removeClass('selected');
function _fn(dfop) {
if (dfop.isload == false) {
setTimeout(function () {
_fn(dfop);
}, 100);
}
else if (dfop.isload == true) {
var _currtentItem;
switch (dfop.type) {
case 'default':
for (var i = 0, l = dfop.data.length; i < l; i++) {
if (dfop.data[i][dfop.value] == value) {
dfop._index = i;
_currtentItem = dfop.data[i];
break;
}
}
break;
case 'tree':
_currtentItem = $.lrtree.findItem(dfop.data, dfop.value, value);
dfop.currtentItem = _currtentItem;
break;
case 'treemultiple':
$.lrselect.render(dfop);
$('#learun_select_option_' + dfop.id).find('.lr-select-option-content').lrtreeSet('setCheck', value.split(','));
//$this.find('.lr-select-option-content').lrtreeSet('setCheck', value.split(','));
return false;
case 'gird':
break;
case 'multiple':
dfop.multipleMapValue = {};
dfop.multipleValue = [];
dfop.multipleText = [];
if (dfop.isrender) {
$this.find('.lr-select-node-cb[src$="checkbox_1.png"]').attr('src', '/Content/images/learuntree/checkbox_0.png');
}
var _valuellist = value.split(',');
for (var i = 0, l = dfop.data.length; i < l; i++) {
var _arrayIndex = $.inArray(dfop.data[i][dfop.value] + '', _valuellist);
if (_arrayIndex != -1) {
dfop.multipleMapValue[i] = dfop.data[i];
dfop.multipleValue.push(dfop.data[i][dfop.value]);
dfop.multipleText.push(dfop.data[i][dfop.text]);
if (dfop.isrender) {
$this.find('[data-value="' + i + '"] .lr-select-node-cb').attr('src', '/Content/images/learuntree/checkbox_1.png');
}
if (dfop.select) {
dfop.select(dfop.data[i], true, $this);
}
}
}
if (dfop.multipleText.length > 0) {
_currtentItem = dfop.multipleText;
}
break;
default:
break;
}
if (_currtentItem) {
if (dfop.type == 'multiple') {
var $inputText = $this.find('.lr-select-placeholder');
if (dfop.multipleText.length > 0) {
$inputText.css('color', '#000');
}
else {
$inputText.css('color', '#999');
}
$inputText.html(String(dfop.multipleText));
$this.trigger("change");
} else {
var $inputText = $this.find('.lr-select-placeholder');
$inputText.html(_currtentItem[dfop.text]);
$inputText.css('color', '#000');
$this.trigger("change");
if (dfop.select) {
dfop.select(_currtentItem);
}
}
}
else {
dfop._setValue = value;
}
}
}
_fn(dfop);
return $this;
};
$.fn.lrselectGetEx = function () {
var $this = $(this);
if ($this.length == 0) {
return $this;
}
var dfop = $this[0]._lrselect.dfop;
var item = null;
switch (dfop.type) {
case 'default':
if (dfop.data[dfop._index]) {
item = dfop.data[dfop._index];
}
break;
case 'tree':
if (dfop.currtentItem) {
item = dfop.currtentItem;
}
break;
case 'treemultiple':
if (dfop.currtentItems) {
item = dfop.currtentItems;
}
break;
case 'gird':
break;
case 'multiple':
item = dfop.multipleValue || [];
break;
default:
break;
}
return item;
};
})(jQuery, top.learun);