278 lines
10 KiB
JavaScript
278 lines
10 KiB
JavaScript
|
|
if (typeof ($editableselect) != "function") {
|
|
|
|
$(document).mousedown(function (e) {
|
|
var drop = $('#dropdowndiv');
|
|
if (drop.length > 0) {
|
|
var editselctrl = drop.parent();
|
|
var t = $(e.target);
|
|
if (!t.is(editselctrl)
|
|
&& !t.parent().is(editselctrl)
|
|
&& !t.parent().parent().is(editselctrl)
|
|
&& !t.parent().parent().parent().is(editselctrl))
|
|
$('#dropdowndiv').remove();
|
|
}
|
|
});
|
|
$(window).resize(function (e) {
|
|
$('#dropdowndiv').remove();
|
|
});
|
|
|
|
$editableselect = function (parent, maxlength, maxwidth) {
|
|
this.datasource = undefined;
|
|
this.valuepath = undefined;
|
|
this.displaypath = undefined;
|
|
this.changedhandler = undefined;
|
|
this.isEnabled = true;
|
|
this.maxshowncount = 2000;
|
|
this.maxlength = maxlength > 0 ? maxlength : 50;
|
|
|
|
var basectrl = undefined;
|
|
var inputctrl = undefined;
|
|
var iconctrl = undefined;
|
|
var _this = this;
|
|
|
|
this.val = function (value) {
|
|
if (arguments.length === 0)
|
|
return inputctrl.data("val");
|
|
else {
|
|
inputctrl.data("val", value);
|
|
if (this.datasource) {
|
|
for (var i = 0, j = 0; i < this.datasource.length; i++) {
|
|
var obj = this.datasource[i];
|
|
var v = "";
|
|
if (this.valuepath)
|
|
v += obj[this.valuepath];
|
|
else
|
|
v += obj;
|
|
if (v.toLowerCase() == ("" + value).toLowerCase()) {
|
|
var text = "";
|
|
if (this.displaypath)
|
|
text = obj[this.displaypath];
|
|
else
|
|
text += obj;
|
|
inputctrl.val(text);
|
|
inputctrl.data("obj", obj);
|
|
return;
|
|
}
|
|
}
|
|
inputctrl.val("");
|
|
inputctrl.data("obj", null);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.text = function (text) {
|
|
if (arguments.length === 0)
|
|
return inputctrl.val();
|
|
else {
|
|
inputctrl.val(text);
|
|
if (this.datasource) {
|
|
for (var i = 0, j = 0; i < this.datasource.length; i++) {
|
|
var obj = this.datasource[i];
|
|
var t = "";
|
|
if (this.displaypath)
|
|
t += obj[this.displaypath];
|
|
else
|
|
t += obj;
|
|
|
|
if (t.toLowerCase() == ("" + text).toLowerCase()) {
|
|
var value = "";
|
|
if (this.valuepath)
|
|
value = obj[this.valuepath];
|
|
else
|
|
value += obj;
|
|
inputctrl.data("val", value);
|
|
inputctrl.data("obj", obj);
|
|
return;
|
|
}
|
|
}
|
|
inputctrl.data("val", "");
|
|
inputctrl.data("obj", null);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.selecteditem = function () {
|
|
return inputctrl.data("obj");
|
|
}
|
|
this.selectedindex = function () {
|
|
return _this.datasource.indexOf(inputctrl.data("obj"));
|
|
}
|
|
|
|
this.change = function (func) {
|
|
this.changedhandler = func;
|
|
}
|
|
|
|
this.tabIndex = function (tabindex) {
|
|
inputctrl.attr("tabIndex", tabindex);
|
|
}
|
|
|
|
this.setEnable = function (enable) {
|
|
this.isEnabled = enable;
|
|
inputctrl.attr("disabled", !enable);
|
|
}
|
|
|
|
this.reload = function () {
|
|
setTimeout(function () {
|
|
inputctrl.css("width", parent.width() - 22);
|
|
});
|
|
}
|
|
|
|
basectrl = $('<div class="editseldiv"></div>');
|
|
inputctrl = $('<input class="editselinput" autocomplete="off" style="padding-top:0;padding-bottom:0;" />').attr("maxlength", this.maxlength)
|
|
.css("width", parent.width() - 22)
|
|
.css("border", "none").css("height", 20)
|
|
.bind('input propertychange', function () { changeSearchvalue(this); });
|
|
inputctrl.keydown(onkeydown);
|
|
iconctrl = $('<div class="dropdownicon"></div>')
|
|
.css("line-height", "normal").click(iconClick);
|
|
basectrl.append(inputctrl).append(iconctrl);
|
|
parent.append(basectrl);
|
|
|
|
function onkeydown(e) {
|
|
if (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40) {//Enter Up Down键
|
|
var drop = $('#dropdowndiv');
|
|
if (e.keyCode == 13) {
|
|
if (drop.length > 0) {
|
|
drop.find("li.itemselected").click();
|
|
}
|
|
}
|
|
else {//Up
|
|
var selectedIndex = -1;
|
|
var lis = drop.find("li");
|
|
lis.each(function () {
|
|
var li = $(this);
|
|
if (li.hasClass("itemselected")) {
|
|
selectedIndex = $(this).attr("index");
|
|
li.removeClass("itemselected");
|
|
}
|
|
});
|
|
|
|
if (e.keyCode == 38)
|
|
selectedIndex--;
|
|
else if (e.keyCode == 40)
|
|
selectedIndex++;
|
|
if (selectedIndex < 0)
|
|
selectedIndex = lis.length - 1;
|
|
if (selectedIndex > lis.length - 1)
|
|
selectedIndex = 0;
|
|
|
|
var next = drop.find("li[index=" + selectedIndex + "]");
|
|
if (next.length > 0) {
|
|
$(next[0]).addClass("itemselected");
|
|
var offsetTop = next[0].offsetTop;
|
|
if (offsetTop >= drop.height() - drop.scrollTop() - 20) {
|
|
drop.scrollTop(offsetTop - drop.height() + 20);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function iconClick(e) {
|
|
if (_this.isEnabled) {
|
|
var drop = $('#dropdowndiv');
|
|
if (drop.length > 0) {
|
|
$('#dropdowndiv').remove();
|
|
}
|
|
else {
|
|
createDropdown(_this, undefined);
|
|
inputctrl.select();
|
|
inputctrl.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
//搜索
|
|
function changeSearchvalue(obj) {
|
|
var inp = $(obj);
|
|
var text = $.trim(inp.val());
|
|
var matched = false;
|
|
for (var i = 0, j = 0; i < _this.datasource.length; i++) {
|
|
var obj = _this.datasource[i];
|
|
var t = "";
|
|
if (_this.displaypath)
|
|
t += obj[_this.displaypath];
|
|
else
|
|
t += obj;
|
|
|
|
if (t.toLowerCase() == ("" + text).toLowerCase()) {
|
|
var value = "";
|
|
if (_this.valuepath)
|
|
value = obj[_this.valuepath];
|
|
else
|
|
value += obj;
|
|
inp.data("val", value);
|
|
inputctrl.data("obj", obj);
|
|
matched = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!matched) {
|
|
inp.data("val", "");
|
|
inputctrl.data("obj", null);
|
|
}
|
|
|
|
if (_this.changedhandler)
|
|
_this.changedhandler();
|
|
createDropdown(_this, text);
|
|
}
|
|
|
|
function createDropdown(selctrl, searchtext) {
|
|
$("#dropdowndiv").remove();//移除已创建的下拉框
|
|
|
|
var dropdiv = $('<div id="dropdowndiv" class="editseldorp"></div>');
|
|
dropdiv.css("min-width", basectrl.width());
|
|
if (maxwidth != undefined)
|
|
dropdiv.css("max-width", maxwidth);
|
|
var ul = $('<ul style="padding:0px;list-style:none;margin:0px;"></ul>');
|
|
|
|
if (!selctrl.datasource) return;
|
|
|
|
if (basectrl.css("position") !== "relative") {
|
|
dropdiv.css('top', basectrl.position().top + 22);
|
|
dropdiv.css('left', basectrl.position().left);
|
|
}
|
|
|
|
var index = 0;
|
|
for (var i = 0, j = 0; i < selctrl.datasource.length && j < selctrl.maxshowncount; i++) {
|
|
var obj = selctrl.datasource[i];
|
|
var text = "";
|
|
if (selctrl.displaypath)
|
|
text = obj[selctrl.displaypath];
|
|
else
|
|
text += obj;
|
|
|
|
var value = "";
|
|
if (selctrl.valuepath)
|
|
value = obj[selctrl.valuepath];
|
|
else
|
|
value += obj;
|
|
|
|
if (!searchtext || text.toLowerCase().indexOf(searchtext.toLowerCase()) >= 0) {
|
|
var item = $('<li class="editselitem"></li>').data("obj", obj).data("val", value).text(text).attr("index", index++)
|
|
.click(function () { itemClick(this) });
|
|
ul.append(item);
|
|
j++;
|
|
}
|
|
}
|
|
ul.appendTo(dropdiv);
|
|
basectrl.append(dropdiv);
|
|
}
|
|
|
|
//drop选中
|
|
function itemClick(item) {
|
|
item = $(item);
|
|
inputctrl.val(item.text());
|
|
var oldValue = inputctrl.data("val");
|
|
var newValue = item.data("val");
|
|
inputctrl.data("val", newValue);
|
|
inputctrl.data("obj", item.data("obj"));
|
|
|
|
if (_this.changedhandler && newValue != oldValue)
|
|
_this.changedhandler();
|
|
|
|
$('#dropdowndiv').remove();
|
|
}
|
|
}
|
|
} |