js多層樹形彈出一個小視窗層(非常好用)實例程式碼_javascript技巧

複製程式碼 程式碼如下:

// JScript 文件
 var inputID, inputName;
function ExpandSubCategory(iCategoryID, FahterID) {

    var li_father = document.getElementById("li_" + iCategoryID);
    if (li_father.getElementsByTagName("li").length > 0) //如果已经加载了下级节点则直接展开，不必在去读取数据
    {
        ChangeStatus(iCategoryID);
        return;
    }

      //打开时显示稍等
    switchNote(iCategoryID, true);
    //AJAX回调函数，加载节点    
    used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + iCategoryID, GetSubCategory_callback);
}
function ExpandSubCategoryAgain(iCategoryID, FahterID) {

    var li_father = document.getElementById("li_" + iCategoryID);
    li_father.className = "Opened";
    //打开时显示稍等
    switchNote(iCategoryID, true);
    //AJAX回调函数，加载节点
    used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + iCategoryID, GetSubCategory_callback);
}
function GetSubCategory_callback(response) {
    var dt = response.value.Tables[0];
    if (dt.Rows.length > 0) {
        var iCategoryID = dt.Rows[0].fID; //父ID
    }
    var li_father = document.getElementById("li_" + iCategoryID);
    var ul_sub = document.getElementById("ulTree_" + iCategoryID);
    if (ul_sub != null) {
        li_father.removeChild(ul_sub)
    }
    var ul = document.createElement("ul");
    ul.id = "ulTree_" + iCategoryID
    for (var i = 0; i < dt.Rows.length; i++) {
if (used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + dt.Rows[i].id).value.Tables[0].Rows.length<1)
// {
// if (dt.Rows[i].ProductStyle_IsChild == 1) //如果已没有下一级节点
{
var li = document.createElement("li");
li.className = "Child";
li.id = "li_" + dt.Rows[i].id;

var img = document.createElement("img");
img.id = dt.Rows[i].id;
img.className = "s";
img.src = "../../css/s.gif";

var a = document.createElement("a");
var id = dt.Rows[i].id;

a.href = "javascript:OpenDocument('" + dt.Rows[i].id + "','" + dt.Rows[i].name + "');";
a.innerHTML = dt.Rows[i].name.sub(14);
a.title = dt.Rows[i].name;
}
else //如果还有下级节点
{
var li = document.createElement("li");
li.className = "Closed";
li.id = "li_" + dt.Rows[i].id;

var img = document.createElement("img");
img.id = dt.Rows[i].id;
img.className = "s";
img.src = "../../css/s.gif";
img.onclick = function () {
ExpandSubCategory(this.id);
};
img.alt = "展开/折叠";

var a = document.createElement("a");
a.href = "javascript:ExpandSubCategory(" + dt.Rows[i].id + ",'editCate');";
a.innerHTML = dt.Rows[i].name.sub(14);
a.title = dt.Rows[i].name;
}
li.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
li_father.appendChild(ul);
//先显示稍等。。。
switchNote(iCategoryID, false);
}

// 叶子节点的单击响应函数
function OpenDocument(iCategoryID, Action) {

shut();
// inputName.Value = "asddsafdf"; //修改之前
$(inputName).attr('value', Action); //新添
var thisID = inputName.getAttribute("id");
// alert(inputName.value +":"+ thisID + "--" + Action + "--" + iCategoryID);
inputID.value = iCategoryID;
clienkButton1();

}
function ChangeStatus(iCategoryID) {
var li_father = document.getElementById("li_" + iCategoryID);

if (li_father.className == "Opened") {
li_father.className = "Closed";
}
else {
li_father.className = "Opened";
}
}
function ChangeStatus2(iCategoryID) {
var li_father = document.getElementById("li_" + iCategoryID);
if (li_father.className == "Closed") {
li_father.className = "Opened";
}
}
function switchNote(iCategoryID, show) {
var li_father = document.getElementById("li_" + iCategoryID);
if (show) {
var ul = document.createElement("ul");
ul.id = "ul_note_" + iCategoryID;

var note = document.createElement("li");
note.className = "Child";

var img = document.createElement("img");
img.className = "s";
img.src = "../../css/s.gif";

var a = document.createElement("a");
a.href = "javascript:void(0);";
a.innerHTML = "请稍候...";

note.appendChild(img);
note.appendChild(a);
//ul.appendChild(note);
li_father.appendChild(ul);
}
else {
var ul = document.getElementById("ul_note_" + iCategoryID);
if (ul) {
li_father.removeChild(ul);
}
}
}

function InitTree(obj, idObj, FatherID) {

// 加载根节点
// writeDiv();
//alert(obj.value + "--" + idObj.value);
inputName=obj;
inputID = idObj;
var pos = getPosition(inputName);
var tree = document.getElementById("cateDivTree");
var root = document.createElement("li");
var objshow = document.getElementById("opencateDiv");
objshow.style.top = pos[1] + pos[3] + "px";
objshow.style.left = pos[0] + "px";
objshow.style.display = "block";
tree.style.display = "block";
root.id = "li_" + FatherID;
tree.appendChild(root);
// 加载页面时显示第一级分类
ExpandSubCategory(FatherID);
ChangeStatus2(FatherID);
}
writeDiv();
function writeDiv() {
document.write("

");
    document.write("

请选择分类 ×  

");
    document.write("

");
    document.write("

");

}
function getPosition(obj) {
    if (obj) {
        var       if (obj.offsetParent) {
            for (var posX = 0, posY = 0; obj.offsetParent; obj = obj.offsetParent) { >                posY = obj.offsetTop;
            }
            return [posX, posY, w, h];
        } else {
         }
    } else {
        return [0, 0, 0, 0];
    }
}
函數shutdown() {
    close11();
}
函數close11() {    objshow.style.display = "none"
    objshow.style.top = 0;
     objshow.style.top = 0;
  >function Opent11() {
    var objshow = document.getElementById("opencateDiv");
    objshow.style.display = "block";
    objshow.style.display = "block";
}    <sub>var r = /[^x00-xff]/g;
    if (this.replace(r, "mm").length this  ;
    var m = Math.floor(n / 2);
    for (var i = m;我       if (this.substrreplace(0, i).       if (this.substrreplace, i).   (r, "mm").length >= n) {
            return this.substr(0, i) "..." ;
    ;

 2//樣式

.TreeMenu{未知：#006600 實心 1px; 背景顏色：#ffffff；高度：350 像素；故障：自動； }
.TreeMenu img.s
{
> 垂直垂直:中;
}
.TreeMenu .s_1
{</sub>

 頭部:指針;

 垂直垂直:中;

 左內邊距:5px

;
;
;
;
;
;
;
;
;
;
;
;
; }
.TreeMenu ul
{
 內邊距:0;
}
.TreeMenu li
{
 列表樣式：無;
 填充：0;
 列表樣式：無;
 填充：0;
}
.關閉ul
{
 顯示：無;
}
.子項img.s
{

 背景:無;

 資料資料;
}

.TreeMenu ul
{
 margin:0 0 0 8px;
}
.TreeMenu img.s
{
 寬度:34px;}
.TreeMenu .打開的img.s
{
背景：url(../images/skin3/opened.gif) no-repeat 0 1px;
}
gif) no-repeat 0 1px;
}
gif) no-repeat 0 1px;
}
gif) no-repeat 0 1px;
}
TreeMenu .Closed img.s
{
 背景:url(../images/skin3/lated.gif) no-repeat 0 1px;
}
.TreeMenu .Child img.s
}

.TreeMenu .Child img.s

{
 背景:url(../images/skin3/child.gif) 無重複15px;
}
.divClose{ 背景顏色:#fff;高度:21px;文字寬度：右；未知：#006600 實心1px；未知底部：#006600 1px；背景顏色：#ECF6E9;}

#RightCate{ 高度：350px; 未知：#006600 無實心1px；margin-left:10px; { 背景顏色:#fafafa;上親密:#e1e1e1 實心1px;左親密:#e1e1e1 實心1px;右親密:#e1e1e1 實心1px;寬度:99%;

內邊距:2px; ；左距：2px；  文字寬度：左；行高：23px；
}
.pageStyle{ 背景顏色：#fafafa; 已知：#e1e1e1 實心1px；寬度：98%；內邊距：2pxx ；左邊距：2px；文字寬度：中心；}

.divFile { margin:2px 2px 2px 2px;高度：138px；寬度：120px；自己：#e1e1e1 實心 1px；浮動：左；職位：親屬；彌補：隱藏;}
divImage {.divImage}.邊距：2px 2px 2px 2px;高度：100px；寬度：116px；邊框：#000實心1px;}
.divImage img { 寬度：手；寬度：134px；高度：100px;}

.divPage { 邊框距：#e1e1e1 實心1px;邊距：10 像素10 像素10 像素10 像素； }
.div 頁面跨度{內邊邊距：4px 4px 4px 4px} .div頁跨度{}

.在{顏色：#f00; }

.CheckedTab { 背景圖片:url(../images/partyCurrent.gif);寬度：105px；高度：28px；字體：手；文字字體：居中；字體大小：小；對稱：1px實心#e1e1e1 ;}
.NoCheckTab { 寬度：105px;高度：28px；字體：手；文字字體：居中；字體大小：小；眉毛：1px 實線#e1e1e1;}

.divCheckItem{float:left;寬度：119px；高度：104px；身高：#C8D3C4 3px 實心；位置：相對;}.divCheckImg{寬度：119px;高度：104px; >.divRemove{顯示：無;位置：絕對；上：3px；右：3px;} .divAdd{顯示：無;位置：絕對；上：3px；右：3px;}