JS 封装类的例子

来源：互联网发布：绝对值 java y== 编辑：程序博客网时间：2024/05/30 22:53

Res_ResName = function (options) {
    var defaults = {
        RRGUID: "",
        type: "",
        onclick: null
    };
    this.opts = $.extend(defaults, options);
    var _ST = new Date().getMilliseconds();
    var instance = this;
    this.$AllResNameAarray = new Array();
    this.$ResNameAarray = new Array();
    this.$RRGUID = "";

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onSingleClick
        }
    };

//获取物品
this.InitResName = function () {

                。。。
                instance.LoadWindow();
                instance.LoadCategoryTree();
            });
        }
        else {
            Jle.Layer.show($("#window_div_ResName"), $("#window_div_ResName_move"), $("#window_div_ResName_close"));
            instance.SetValue();
        }
    };

    //加载树
    this.LoadCategoryTree = function () {
        $.getJSON("../../Handler/Bussiness/ResNameHandler.ashx?mark=Category&_ST=" + _ST, function (json) {
            var zNodes = json;
            $.fn.zTree.init($("#ULDropTree"), setting, zNodes);
        });
    }

//加载窗体
this.LoadWindow = function () {

        //        if ($("#window_div_ResName").length > 0) {
        //            $("#window_div_ResName").remove();
        //        }
        var window_div = "<div class=\"main-ttable\" id=\"window_div_ResName\" style=\"width: 602px; border: none;background: #fff;\">";
        window_div += "     <div class=\"tckbg-style\" id=\"window_div_ResName_move\"><span class=\"title-font main-btn2\">选择物品</span> <a href=\"javascript:void(0)\" title=\"关闭\" class=\"guanbi-f1 bule3 cur\" id=\"window_div_ResName_close\">关闭</a></div>";
        window_div += "     <div class=\"system-tck2aa\">";
        window_div += "    <div style=\"padding-top: 5px;padding-left: 5px;\">";
        window_div += "    <div id=\"TreeInputContainer\" style=\" width: 100%;\">";
        window_div += "        <input type=\"hidden\" id=\"HiddenSelectValue\" treedatatype=\"selectValue\" />";
        window_div += "        <input type=\"text\" id=\"txtSelectName\" readonly=\"readonly\" value=\"请选择类别\" />";
        window_div += "        <input type=\"text\" id=\"txtRRName\" value=\"物品名称...\" />";
        window_div += "        <input type=\"button\" id=\"btnQueryResName\" value=\"搜索\" class=\"list-btn1\" style=\"margin-left:5px;\" />";
        window_div += "    </div>";
        window_div += "    <div ishiddenwhenlosefocus=\"1\" id=\"TreeContainer\" style=\"display: none; position:absolute;overflow: auto; border: 1px solid #cecece; background-color: White; max-height:400px;\">";
        window_div += "        <ul id=\"ULDropTree\" class=\"ztree\" >";
        window_div += "        </ul>";
        window_div += "    </div>";
        window_div += "    </div>";
        window_div += "    <div style=\"width: 600px; overflow: auto; height: 250px;\" id=\"window_div_ResName_middle\">";
        window_div += "     </div>";
        window_div += "         <div align=\"center\" style=\"height:30px; line-height:30px; text-align:center;\">";
        window_div += "             <input type=\"button\" id=\"btnResNameConfirm\" value=\"确认\" class=\"list-btn1\" />";
        window_div += "             <input type=\"button\" id=\"btnResNameCancel\" value=\"取消\" class=\"list-btn1\" style=\"margin: 5px 5px;\" />";
        window_div += "         </div>";
        window_div += "     </div>";
        window_div += "     <div id=\"div_img\" style=\"display: none; position: absolute; \" >";
        window_div += "         <div class=\"tckbg-style\">";
        window_div += "             <span class=\"title-font main-btn2\" id=\"Dep_title\">查看图片</span> ";
        window_div += "             <a href=\"javascript:void(0)\" title=\"关闭\" class=\"guanbi-f1 bule3 cur\">关闭</a>";
        window_div += "         </div>";
        window_div += "         <div class=\"system-tck2a\" style=\"width: 168px;\">";
        window_div += "             <img id=\"imgshow\" src=\"\" width=\"168px\" height=\"204px\" alt=\"无图片\" />";
        window_div += "         </div>";
        window_div += "     </div>";
        window_div += "</div>";
        $(document.body).append(window_div);

instance.LoadResName();
Jle.Layer.show($("#window_div_ResName"), $("#window_div_ResName_move"), $("#window_div_ResName_close"));

        instance.ConfirmEvent();
        instance.CancelEvent();
        instance.QueryEvent();
        instance.RRNameEvent();

};

    //数据加载到窗体中
    this.LoadResName = function () {
        var TypeName = "";
        var window_div = "";
        window_div += "            <table id=\"ResNameTable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"info_table list_tdcss\">";
        if (instance.opts.type == "1") {
            TypeName = "合理库存";
        } else {
            TypeName = "图片展示";
        }
        window_div += "                 <thead><tr><th style=\"width: 20px;border-left:0px;\"></th> <th style=\"width:100px;border-left:0px;\">名称</th><th style=\"width:100px;\">单位</th><th style=\"width:100px;\">单价（元）</th><th style=\"width:100px;\">当前库存</th><th style=\"width:100px;\">" + TypeName + "</th></tr></thead>";
        window_div += "                 <tbody>";
        for (var i = 0; i < instance.$ResNameAarray.length; i++) {
            var ResNameObject = instance.$ResNameAarray[i];
            var RRGUID = ResNameObject["RRGUID"];
            var RRName = ResNameObject["RRName"];
            var RCGUID = ResNameObject["RCGUID"];
            var RRUnit = ResNameObject["RRUnit"];
            var RCName = ResNameObject["RCName"];
            var RRSurplus = ResNameObject["RRSurplus"];
            var RRUnitPrice = ResNameObject["RRUnitPrice"];
            var ImageThumbnailUrl = ResNameObject["ImageThumbnailUrl"];
            var RationalStock = ResNameObject["RationalStock"];
            window_div += "                 <tr> <td class=\"listline\" style=\"border-left:0px;\">";
            if (parseInt(RRSurplus) != 0) {
                window_div += " <input type=\"checkbox\" name=\"ResName\" id=\"ResName_" + i + "\" value=\"" + RRGUID + "\" />";
                //window_div += " <input type=\"radio\" name=\"ResName\" value=\"" + RRGUID + "\" />";
            }
            window_div += " </td>";
            window_div += " <td class=\"listline\" style=\"text-align:left; padding-left:3px;\">" + RRName + "</td>";
            window_div += " <td class=\"listline\" style=\"text-align:center; padding-left:3px;\">" + RRUnit + "</td>";
            window_div += " <td class=\"listline\" style=\"text-align:center; padding-left:3px;\">" + RRUnitPrice + "</td>";

            window_div += " <td class=\"listline\" style=\"text-align:center; padding-left:3px;\">";
            if (parseInt(RRSurplus) == 0) {
                window_div += "<span style=\"color:Red;\">" + RRSurplus + "</span>";
            }
            else {
                window_div += RRSurplus;
            }
            window_div += "</td>";
            if (instance.opts.type == "1") {
                window_div += " <td class=\"listline\" style=\"text-align:center; padding-right:3px;\">" + RationalStock + "</td>";

            }
            else {
                window_div += " <td class=\"listline\" style=\"text-align:center; padding-right:3px;\"><a name=\"ImageThumbnail\" value='" + ImageThumbnailUrl + "' href=\"javascript:void(0);\" >[查阅]</a></td>";

            }
            window_div += " </tr>";
        }
        window_div += "                 </tbody>";
        window_div += "            </table>";

        $("#window_div_ResName_middle").removeData();
        $("#window_div_ResName_middle").html(window_div);
        instance.SetValue();
        instance.RadioEvent();
    };

this.ShowImg = function (ImageThumbnailUrl) {
$("#imgshow").attr("src", ImageThumbnailUrl);

Jle.Layer.show($("#div_img"), $(".tckbg-style"), $(".guanbi-f1"));
}

    //物品搜索事件
    this.RRNameEvent = function () {
        $("#txtRRName").focus(function () {
            if ($("#txtRRName").val() == "物品名称...") {
                $("#txtRRName").val("");
            }
        });
        $("#txtRRName").blur(function () {
            if ($("#txtRRName").val() == "") {
                $("#txtRRName").val("物品名称...");
            }
        });

        $('#txtSelectName').click(function () {
            if ($('#TreeContainer').css("display") == "none") {
                switchRenderContent(true);
            } else
                switchRenderContent(false);
            return false;
        });
    };

    //搜索事件
    this.QueryEvent = function () {
        $("#btnQueryResName").click(function () {
            var RCGUID = $("#HiddenSelectValue").val();
            var RRName = $("#txtRRName").val() == "物品名称..." ? "" : $("#txtRRName").val();
            $.getJSON("../../Handler/Bussiness/ResNameHandler.ashx?mark=ResName&_ST=" + _ST, { RRName: RRName, RCGUID: RCGUID }, function (json) {
                instance.$ResNameAarray.length = 0;
                if (json != "" && json != null) {
                    $.each(json, function (i, field) {
                        var object = new Object();
                        var RRGUID = field.RRGUID;
                        var RRName = field.RRName;
                        var RCGUID = field.RCGUID;
                        var RRUnit = field.RRUnit;
                        var RCName = field.RCName;
                        var RRSurplus = field.RRSurplus;
                        var RRUnitPrice = field.RRUnitPrice;
                        var RationalStock = field.RationalStock;
                        var ImageThumbnailUrl = field.ImageThumbnailUrl; //== "" ? "../../images/blue/PUB/Common/touxiang1.gif" : field.ImageThumbnailUrl;
                        object["RRGUID"] = RRGUID;
                        object["RRName"] = RRName;
                        object["RCGUID"] = RCGUID;
                        object["RRUnit"] = RRUnit;
                        object["RCName"] = RCName;
                        object["RRSurplus"] = RRSurplus;
                        object["RRUnitPrice"] = RRUnitPrice;
                        object["RationalStock"] = RationalStock;
                        object["ImageThumbnailUrl"] = ImageThumbnailUrl;
                        instance.$ResNameAarray.push(object);
                    });
                }
                instance.LoadResName();
            });
        });
    };

    this.RadioEvent = function () {
        $("#window_div_ResName :input[name='ResName']").click(function () {
            instance.$RRGUID = $(this).val();
        });
        $("#ResNameTable a[name='ImageThumbnail']").each(function () {
            $(this).click(function () {
                instance.ShowImg($(this).attr("value"));
            });
        });
    };

    function onSingleClick(e, treeId, treeNode) {
        var treeID = treeNode.id;
        $('#HiddenSelectValue').val(treeID);
        $('#txtSelectName').val(treeNode.name);

        switchRenderContent(false);
    }
    function switchRenderContent(isShow) {
        if (isShow) {
            $('#TreeContainer').slideDown(110);
        }
        else {
            $('#TreeContainer').slideUp(110);
        }
    }

    this.SetValue = function () {
        var RRGUID = instance.opts.RRGUID;
        //if ((RRGUID != undefined) && (RRGUID != "")) {
            instance.$RRGUID = RRGUID;

            $("[name='ResName']").each(function () {
                var checkValue = $(this).val();
                if (checkValue == RRGUID) {
                    $(this).attr("checked", "true");
                    $(this).focus();
                }else
                {
                    $(this).removeAttr("checked");
                }
            });
            //$("#window_div_ResName :input[name='ResName']").each(function () {
            //    var radioValue = $(this).val();
            //    if (radioValue == RRGUID) {
            //        $(this).attr("checked", "checked");
            //        return false
            //    }
            //});
        //}
    };

    //确定事件
    this.ConfirmEvent = function () {
        $("#btnResNameConfirm").click(function () {
            var isselect = false;
            //if ((instance.$RRGUID != undefined) && (instance.$RRGUID != "")) {
                if ($.isFunction(instance.opts.onclick)) {
                    var object = null;
                    for (var i = 0; i < instance.$AllResNameAarray.length; i++) {
                        var RRGUID = instance.$AllResNameAarray[i]["RRGUID"];
                        //if (instance.$RRGUID == RRGUID) {
                        if ($("#ResName_" + i).attr("checked")) {
                            object = instance.$AllResNameAarray[i];
                            instance.opts.onclick(object);
                            isselect = true;
                        }
                            //break;
                        //}
                    }
                    Jle.Layer.close($("#window_div_ResName"));
                }
                if (isselect == false) {
                    Jle.Layer.alert("请选择物品");
                    return;
                }
                //$("[name='ResName']").each(function () {
                //    if($(this).attr("checked"))
                //    {
                //        $(this).removeAttr("checked");
                //    }
                //});
            //} else {
            //    Jle.Layer.alert("请选择物品");
            //}
        });
    };

    //取消事件
    this.CancelEvent = function () {
        $("#btnResNameCancel").click(function () {
            Jle.Layer.close($("#window_div_ResName"));
        });
    };
    this.InitResName();
}

0 0