JS 封装类的例子



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();

}