zoukankan      html  css  js  c++  java
  • 封装JS,并回传事件。

    借鉴地址

      JS:

        // 下拉框select,和ysComboxBoxTree对应
        $.fn.ysComboBox = function (option, param) {
            if (typeof option == 'string') {
                return $.fn.ysComboBox.methods[option](this, param);
            }
            var target = $(this);
            var targetId = target.attr('id');
            if (!targetId) {
                return false;
            }
            var _option = $.extend({
                url: null,
                key: "Key",
                value: "Value",
                maxHeight: "160px",
                class: null,
                multiple: false,
                data: null, // 数据源          
                dataName: 'Data',  // 数据名称
                onChange: null,
                default: undefined
            }, option);
    
            var dom = {
                loadData: function () {
                    if (_option.url) {
                        $.ajax({
                            url: _option.url,
                            type: 'get',
                            dataType: 'json',
                            async: false,
                            cache: false,
                            success: function (data) {
                                _option.data = data;
                                if (data.Tag == 0) {
                                    option.Err.call(target, data.Message);
                                }
                            },
                            error: function (xhr, status, obj) {
                                throw exception;
                            }
                        });
                        if (_option.dataName) {
                            if (_option.data != null) {
                                _option.data = _option.data[_option.dataName];
                            }
                        }
                    }
                },
                render: function (setting) {
                    if (setting.data && setting.data.length >= 0) {
                        var id = targetId + "_select";
    
                        var mutiple = '';
                        if (setting.multiple) {
                            mutiple = 'multiple=""';
                        }
                        var html = "<select id='" + id + "' name='" + id + "' class='" + ys.toString(setting.class) + " select2' " + mutiple + " maxheight=" + setting.maxHeight + ">";
                        var selectExist = $("#" + id).length > 0;
                        if (selectExist) {
                            $("#" + id).empty();
                        }
    
                        var option = '';
    
                        var groupOption = false; // 是否有分组
                        if (setting.data.length > 0) {
                            groupOption = setting.data[0][setting.value] instanceof Array;
                        }
    
                        if (!groupOption) {
                            if (!setting.class) {
                                // 没有form-control这个class,就加一个全部选项,应该是查询条件
                                option += "<option value='-1'>全部</option>";
                            } else {
                                if (!setting.multiple) {
                                    option += "<option value='' selected='selected'>请选择</option>";
                                }
                            }
                        }
    
                        $.each(setting.data, function (i) {
                            var row = setting.data[i];
                            if (typeof row == 'string') {
                                option += "<option value='" + row + "'>" + row + "</option>";
                            } else {
                                if (row[setting.value] instanceof Array) {
                                    // 分组的选项
                                    option += "<optgroup label='--" + row[setting.key] + "--'>";
                                    $.each(row[setting.value], function (j) {
                                        var childRow = row[setting.value][j];
                                        option += "<option value='" + childRow[setting.key] + "'>" + childRow[setting.value] + "</option>";
    
                                        if (row.IsDefault == 1) {
                                            setting.default = row[setting.key];
                                        }
                                    });
                                }
                                else {
                                    option += "<option value='" + row[setting.key] + "'>" + row[setting.value] + "</option>";
    
                                    if (row.IsDefault == 1) {
                                        setting.default = row[setting.key];
                                    }
                                }
                            }
                        });
                        if (selectExist) {
                            $("#" + id).append(option);
                        }
                        else {
                            html += option;
                            html += "</select>";
                            target.append(html);
    
                            if (setting.onChange) {
                                $("#" + id).change(setting.onChange);
                            }
                        }
                        $("#" + id).select2();
    
                        // hack 搜索的select保持和其他元素的宽度一致
                        $("#" + targetId).find(".select2-container").width(110);
    
                        if (setting.default != undefined) {
                            target.ysComboBox("setValue", setting.default);
                        }
                    }
                }
            };
            dom.loadData();
            dom.render(_option);
            return target;
        };
        $.fn.ysComboBox.methods = {
            getValue: function (target) {
                var valArray = $("#" + $(target).attr("id") + "_select").select2("val");
                if (valArray == null) {
                    return "";
                }
                else {
                    var val = valArray.toString();
                    // -1代表查询条件所有,就把这个查询条件置为空
                    return val;
                }
            },
            setValue: function (target, value) {
                if (ys.isNullOrEmpty(value)) {
                    return;
                }
                if (typeof value != 'string') {
                    value = value.toString();
                }
                $("#" + $(target).attr("id") + "_select").val(value.split(',')).trigger("change");
            }
        };

      前台调用 :
      

      if (id == 0) {
                    $("#jigou").ysComboBox({
                    url: '@Url.Content("~/SystemManage/TownHealthSupervision/GettownHealthSupervisionSelectListJson")' + "?SysAreaId=" + areaid,
                    key: "Key",
                    value: "Value",
                    class: "form-control",
                    Err: function (data) {
                        if (data) {
                            ys.alertError(data);
                        }
                  }
                });
            }

        // 下拉框select,和ysComboxBoxTree对应    $.fn.ysComboBox = function (option, param) {        if (typeof option == 'string') {            return $.fn.ysComboBox.methods[option](this, param);        }        var target = $(this);        var targetId = target.attr('id');        if (!targetId) {            return false;        }        var _option = $.extend({            url: null,            key: "Key",            value: "Value",            maxHeight: "160px",            class: null,            multiple: false,            data: null, // 数据源                      dataName: 'Data',  // 数据名称            onChange: null,            default: undefined        }, option);
            var dom = {            loadData: function () {                if (_option.url) {                    $.ajax({                        url: _option.url,                        type: 'get',                        dataType: 'json',                        async: false,                        cache: false,                        success: function (data) {                            _option.data = data;                            if (data.Tag == 0) {                                option.Err.call(target, data.Message);                            }                        },                        error: function (xhr, status, obj) {                            throw exception;                        }                    });                    if (_option.dataName) {                        if (_option.data != null) {                            _option.data = _option.data[_option.dataName];                        }                    }                }            },            render: function (setting) {                if (setting.data && setting.data.length >= 0) {                    var id = targetId + "_select";
                        var mutiple = '';                    if (setting.multiple) {                        mutiple = 'multiple=""';                    }                    var html = "<select id='" + id + "' name='" + id + "' class='" + ys.toString(setting.class) + " select2' " + mutiple + " maxheight=" + setting.maxHeight + ">";                    var selectExist = $("#" + id).length > 0;                    if (selectExist) {                        $("#" + id).empty();                    }
                        var option = '';
                        var groupOption = false; // 是否有分组                    if (setting.data.length > 0) {                        groupOption = setting.data[0][setting.value] instanceof Array;                    }
                        if (!groupOption) {                        if (!setting.class) {                            // 没有form-control这个class,就加一个全部选项,应该是查询条件                            option += "<option value='-1'>全部</option>";                        } else {                            if (!setting.multiple) {                                option += "<option value='' selected='selected'>请选择</option>";                            }                        }                    }
                        $.each(setting.data, function (i) {                        var row = setting.data[i];                        if (typeof row == 'string') {                            option += "<option value='" + row + "'>" + row + "</option>";                        } else {                            if (row[setting.value] instanceof Array) {                                // 分组的选项                                option += "<optgroup label='--" + row[setting.key] + "--'>";                                $.each(row[setting.value], function (j) {                                    var childRow = row[setting.value][j];                                    option += "<option value='" + childRow[setting.key] + "'>" + childRow[setting.value] + "</option>";
                                        if (row.IsDefault == 1) {                                        setting.default = row[setting.key];                                    }                                });                            }                            else {                                option += "<option value='" + row[setting.key] + "'>" + row[setting.value] + "</option>";
                                    if (row.IsDefault == 1) {                                    setting.default = row[setting.key];                                }                            }                        }                    });                    if (selectExist) {                        $("#" + id).append(option);                    }                    else {                        html += option;                        html += "</select>";                        target.append(html);
                            if (setting.onChange) {                            $("#" + id).change(setting.onChange);                        }                    }                    $("#" + id).select2();
                        // hack 搜索的select保持和其他元素的宽度一致                    $("#" + targetId).find(".select2-container").width(110);
                        if (setting.default != undefined) {                        target.ysComboBox("setValue", setting.default);                    }                }            }        };        dom.loadData();        dom.render(_option);        return target;    };    $.fn.ysComboBox.methods = {        getValue: function (target) {            var valArray = $("#" + $(target).attr("id") + "_select").select2("val");            if (valArray == null) {                return "";            }            else {                var val = valArray.toString();                // -1代表查询条件所有,就把这个查询条件置为空                return val;            }        },        setValue: function (target, value) {            if (ys.isNullOrEmpty(value)) {                return;            }            if (typeof value != 'string') {                value = value.toString();            }            $("#" + $(target).attr("id") + "_select").val(value.split(',')).trigger("change");        }    };

  • 相关阅读:
    毕业设计后续工作目标
    毕业设计第二周每天工作
    毕业设计第二次本周目标
    毕业设计第一周每天工作
    毕业设计第一次本周目标
    MyEclipse在删除文件后servers报错问题解决
    Tomcat问题解决
    MVC设计模式授权第三方登录
    算法评估
    Spark 配置参数
  • 原文地址:https://www.cnblogs.com/axu92312/p/14312751.html
Copyright © 2011-2022 走看看