自定义控件之 Combobox

var ComboboxObj = function (id, url) {
this.URL = url; //Ajax url
this.ID = id; //combobox id
this.method = 'get'; //Ajax type "POST" or "GET"
this.width = 250; //combobox width
this.height = 22; //combobox height
this.selectValue = ""; //combobox selected value
this.selectText = "";//combobox selected text
this.selectIndex = 0;//combobox selected index
this.initValue = ""; //combbobox initial value
this.valueField = "ID"; //combobox value field
this.textField = "Name"; //combobox text field
this.enable = true; //combobox enable or disable
this.source = new Object();
}
//Set combobox width
ComboboxObj.prototype.setWidth = function (wid) { this.width = wid; };

//set combobox height
ComboboxObj.prototype.setHeight = function (hei) { this.Height = hei; };

//initial combobox data and load data
ComboboxObj.prototype.loadData = function () {
var context = this;
$.ajax({
url: context.URL,
type: context.method,
dataType: "json",
contentType: "application/json;charset=utf-8",
beforeSend: function () {
//var disabled = context.enable ? "" : "disabled='disabled'";
var $selector = $("<select id='" + context.ID + "_sel' style='" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;'/>");
$("#" + context.ID).append($selector);
context.enable ? "" : context.setDisabled();
$selector.on('change', function (evt) {
context.selectValue = $(this).val();
context.selectText = $(this).find("option:selected").text();
context.selectIndex = $(this).find("option:selected").index();
context.onSelect($(this).val());
});
},
success: function (data) {
context.source = data;
//Tip: add an empty value is for triggering the onSelect event
$("#" + context.ID + "_sel").append("<option value=''>Make Selection...</option>");
$(data).each(function (i, item) {
var val = item[context.valueField];
var txt = item[context.textField];
$("#" + context.ID + "_sel").append("<option value='" + val + "'>" + txt + "</option>");
});
if (data != null&&context.initValue != "") {
$("#" + context.ID + "_sel").val(context.initValue);
context.selectValue = context.initValue;
context.selectText = $("#" + context.ID + "_sel").find("option:selected").text();
context.selectIndex = $("#" + context.ID + "_sel").find("option:selected").index();
}
context.setEnabled();
},
error: function (e) {
console.log(e);
},
headers: {
'Token': $("#_requiredToken").val()
}
});
}

ComboboxObj.prototype.loadDataWithoutURL = function () {
var context = this;
var disabled = context.enable ? "" : "disabled='disabled'";
var $selector = $("<select id='" + context.ID + "_sel' style='" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;' " + disabled + "/>");
$("#" + context.ID).append($selector);
$selector.on('change', function (evt) {
context.selectValue = $(this).val();
context.selectText = $(this).find("option:selected").text();
context.selectIndex = $(this).find("option:selected").index();
context.onSelect($(this).val());
});
}

ComboboxObj.prototype.setData = function (json) {
var context = this;
//first: delete combobox data
$("#" + context.ID + "_sel").empty();
//second: bind the json to the combobox
//Tip: add an empty value is for triggering the onSelect event
$("#" + context.ID + "_sel").append("<option value=''>Make Selection...</option>");
$(json).each(function (i, item) {
var val = item[context.valueField];
var txt = item[context.textField];
$("#" + context.ID + "_sel").append("<option value='" + val + "'>" + txt + "</option>");
});
}

//function if the combobox is selected,we can rewrite it.
ComboboxObj.prototype.onSelect = function (selected) {
alert(selected);
}

//set combobox value
ComboboxObj.prototype.setValue = function (value) {
$("#" + this.ID + "_sel").val(value);
this.selectValue = value;
this.selectText = $(this).find("option:selected").text();
this.selectIndex = $(this).find("option:selected").index();
}

//set combobox is enable
ComboboxObj.prototype.setEnabled = function () {
$("#" + this.ID + "_sel").attr("style", "" + this.width + "px; height:" + this.height + "px;border: 1px solid #95B8E7; ");
$("#" + this.ID + "_sel").removeAttr("disabled");
}

//set combobox is disabled
ComboboxObj.prototype.setDisabled = function () {
$("#" + this.ID + "_sel").attr("disabled", "disabled");
$("#" + this.ID + "_sel").attr("style", "" + this.width + "px; height:" + this.height + "px;border: 1px solid #95B8E7;background-color: #DFDFDF; ");
}

//delete all combobox items in the combobox
ComboboxObj.prototype.clear = function () {
$("#" + this.ID+"_sel").empty();
}

//Get the combobox datasource
ComboboxObj.prototype.getData = function () {
return this.source;
}

//This code is for conbobox test
//$(function () {
// var o = new ComboboxObj('cc2', '/ResourceAPI/api/Resource/GetWorlds');
// o.loadData();
// o.initValue = 0;
// o.onSelect = function (select) {
// p.setValue(select);
// //p.setDisabled();
// p.clear();
// }

// var p = new ComboboxObj('cc1', '/ResourceAPI/api/Resource/GetWorlds');
// p.loadData();
// p.onSelect = function (select) {

// }
//});