自定义控件之 RadioList

var RadioListObj = function (id, url) {
this.URL = url;//radiobox source URL
this.ID = id;//radioList ID, radio id is ID_radio
this.method = 'get'; //ajax method
this.width = 600; //initial width
this.height = 100; //initial height
this.checkedValue = ""; //radiolist value
this.initialValue = ""; //initial value
this.valueField = "ID";
this.textField = "Name";
this.enable = true; //set the radiolist enable/disabled
this.isVertical = true; //set the radiolist's layout
}

//Set radiolist width
RadioListObj.prototype.setWidth = function (wid) { $("#" + this.ID).css("width", wid); };

//set radiolist height
RadioListObj.prototype.setHeight = function (hei) { $("#" + this.ID).css("height", hei); };

//initial radioList data and load data
RadioListObj.prototype.loadData = function () {
var context = this;
$.ajax({
url: context.URL,
type: context.method,
dataType: "json",
contentType: "application/json;charset=utf-8",
beforeSend: function () {
// add the initial loading radio before getting the source from webservice
$("#" + context.ID).append("<input type='radio' name='" + context.ID + "_radio' value='' checked='checked' />loading..");
context.checkedValue = $("[name='" + context.ID + "_radio']").val();
},
success: function (data) {
//set the initial width and height
$("#" + context.ID).css("width", context.width);
$("#" + context.ID).css("height", context.height);
var style = "";
var lineEnd = "<p/>";
context.source = data;
$("#" + context.ID).empty();
if (context.isVertical) {
style = "style='margin-top:5px;'";
} else {
style = "style='margin-right:2px;'"
lineEnd = "<label style='margin-right:10px;'/>";
}
//add the radioes to the radio list
$(data).each(function (i, item) {
var val = item[context.valueField];
var txt = item[context.textField];
$radio = $("<input type='radio' name='" + context.ID + "_radio' value='" + val + "' " + style + "/>" + txt + lineEnd);
$("#" + context.ID).append($radio);
$radio.on('change', function (evt) {
context.checkedChange($(this).val());
context.setValue($(this).val());
});
});
if (data != null && context.initValue != "") {
context.setValue(context.initialValue);
}
//initial if the radio list is editable
context.enable ? "" : context.setDisabled();
},
error: function (e) {
console.log(e);
},
headers: {
'Token': $("#_requiredToken").val()
}
});
}

// set the radio list enabled
RadioListObj.prototype.setEnabled = function () {
$("[name='" + this.ID + "_radio']").removeAttr("disabled");
}

//set the radio list disabled
RadioListObj.prototype.setDisabled = function () {
$("[name='" + this.ID + "_radio']").attr("disabled", "disabled");
}

//checked change function
RadioListObj.prototype.checkedChange = function (val) {
}

//set the radio list value
RadioListObj.prototype.setValue = function (val) {
$("[name='" + this.ID + "_radio']").removeAttr("checked");
$("[name='" + this.ID + "_radio'][value='" + val + "']").attr("checked", "checked");
this.checkedValue = val;
}

//get the radio list's selected value
RadioListObj.prototype.getValue = function () {
return this.checkedValue;
}

//This code is for radioList test
//$(function () {
// var o = new RadioListObj('ra', '/ResourceAPI/api/Resource/GetWorlds');
// o.loadData();
// //o.setDisabled();

// o.checkedChange = function (select) {
// console.log(select);
// }
// $(document).on("click", function () {
// //o.setEnabled();
// //o.setValue("23617");
// });
//});