zoukankan      html  css  js  c++  java
  • 自定义控件之 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");
    // });
    //});

  • 相关阅读:
    我的浏览器收藏夹分类
    我的浏览器收藏夹分类
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
  • 原文地址:https://www.cnblogs.com/jin256/p/3208075.html
Copyright © 2011-2022 走看看