代码及讲解

Question

$.fn.ztreParts = function (p) {
    p = $.extend({       
        type:"get",
        dataType: "text",
        url: "/PagesOperate/BPartsSmallType.dy?method=ExecuteQueryTree",
        width:240,
        data: {},
        level: 1,
        valdefault: "",
        hascheckbox: false,
        chkboxtype: { "Y": "", "N": "" },
        name:"1"
    }, p);       
    var condiv1 = document.createElement("span");    //包裹标签用div
    var txt1 = document.createElement("input");     //显示父类内容
    txt1.type = "text"
    txt1.style.width = p.width + 'px';
    var div1 = document.createElement("div");       //包裹DIv
    var iwidth1 = $(this).css('width');
    var ul1 = document.createElement("ul");
    ul1.id = "ztree" + p.name;
    div1.id = "div" + p.name;
    txt1.name="PartTree"
    txt1.readOnly = "readonly";
    txt1.className = "event_row";
    
        div1.style.width =p.width+'px';
        div1.style.position = "absolute";
        div1.style.border = "1px solid gray";
        div1.style.overflow = "auto";
        div1.style.height = "270px";
       // div1.style.left = "3px";
        div1.style.top = "20px";

    $(this).wrap(condiv1);
    ul1.className = "ztree";
    div1.style.backgroundColor = "#fff";
    div1.style.zIndex = "2000";
    div1.style.display = "none"
    txt1.id = "div" + p.name;
    $(div1).append(ul1);

   
    $(txt1).click(function () {
        $(div1).toggle(500);
        $("body").bind("mousedown", onBodyDown);
    });
 
    var val = $(this);
    if (p.valdefault) {
        $(this).val(p.valdefault);
    }
    $.ajax({
        type: p.type,
        url: p.url,
        data: p.param,
        dataType:p.dataType,
        success: function (data) {
            data = eval("(" + data + ")");
            var setting1 = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                },
                view: {
                    addDiyDom: function (treeId, treeNode) {
                        temp = val.val();
                        for (var i = 0; i < zNodes.length; i++) {
                            var jj = zNodes[i];
                            if (jj.id == temp) {//判断原始值、得出是否为绑定值
                                txt1.value = jj.name;
                            }
                        }
                    }
                }
            }

            var settingck = {
                check: {
                    enable: true,
                    chkboxType: { "Y": "ps", "N": "" }
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeClick: beforeClick,
                    onCheck: onCheck
                },
                view: {
                    dblClickExpand: false
                }
            };
      
            var zNodes = data;
         
            for (var i = 0; i < zNodes.length; i++) {
                var jj = zNodes[i];
                if (jj.id == val.val()) {
                    txt1.value = jj.name;
                }
            }
            if (p.hascheckbox) {
                $.fn.zTree.init($(ul1), settingck, zNodes);
            }
            else {
                $.fn.zTree.init($(ul1), setting1, zNodes);
            }

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.readyState);            
        }
    });

    function onClick(event, treeId, treeNode, clickFlag) {
        if (treeNode.level == 1 || p.level<0) {
            $(val).val(treeNode.id);
            txt1.value = treeNode.name;
            div1.style.display = "none";
        }
   
    }

    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("ztree" + p.name);
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("ztree" + p.name);
        nodes = zTree.getCheckedNodes(true);
        var ids = "";
        var names = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            ids += nodes[i].id + ",";
            names += nodes[i].name + ",";
        }
        if (ids.length > 0) ids = ids.substring(0, ids.length - 1);
        ids += "&";
        if (names.length > 0) names = names.substring(0, names.length - 1);
        $(val).val(ids);
        txt1.value = names;
    }

    $(this).hide().parent().append(div1).append(txt1)[0].style.position = "relative";
    $(function () {
        //绑定需要拖拽改变大小的元素对象 
        //bindResize(document.getElementById('divtwo'));
    });

    function onBodyDown(event) {
        if (!(event.target.id == "div" + p.name || $(event.target).parents("#div" + p.name).length > 0)) {
            div1.style.display = "none";
        }
    }


    function bindResize(el) {
        //初始化参数 
        var els = el.style,
            //鼠标的 X 和 Y 轴坐标 
            x = y = 0;
        $(el).mousedown(function (e) {
            //按下元素后，计算当前鼠标与对象计算后的坐标 

            x = e.clientX - el.offsetWidth,

                y = e.clientY - el.offsetHeight;
            //在支持 setCapture 做些东东 
            el.setCapture ? (
            //捕捉焦点 
                el.setCapture(),
            //设置事件 
                el.onmousemove = function (ev) {
                    mouseMove(ev || event)
                },
                el.onmouseup = mouseUp
            ) : (
                //绑定事件 
                $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
            )
            //防止默认事件发生 
            e.preventDefault()
        });
        //移动事件 
        function mouseMove(e) {
            if (e.clientX - x > 50) {
                els.width = e.clientX - x + 'px'
            }
            if (e.clientY - y > 50) {
                els.height = e.clientY - y + 'px'
            }
        }
        //停止事件 
        function mouseUp() {
            //在支持 releaseCapture 做些东东 
            el.releaseCapture ? (
            //释放焦点 
                el.releaseCapture(),
            //移除事件 
                el.onmousemove = el.onmouseup = null
            ) : (
                //卸载事件 
                $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
            )
       }
    }


}
从头讲解一下，这些代码是什么意思

---

please verify my account

Answer 1

Hi lctk,

你这段javascript代码具体是做何用途的? 能否提供一些详细的代码（例如：具体页面控件，绑定的事件等）,仅仅依靠目前这些javascript脚本我无法给出更加详细的注释。

Regards,

Moonlight

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

就是这个功能啊，给我详细讲解一下啊

---

please verify my account

Answer 3

---

please verify my account

Answer 4

Hi lctk,

$.fn.ztreParts = function (p) {
    p = $.extend({       
        type:"get",
        dataType: "text",
        url: "/PagesOperate/BPartsSmallType.dy?method=ExecuteQueryTree",//ajax 异步请求指定链接获取数据
        width:240,
        data: {},
        level: 1,
        valdefault: "",
        hascheckbox: false,
        chkboxtype: { "Y": "", "N": "" },
        name:"1"
    }, p);   
//下面是这些代码是设置树形结构样式和相关设置
    var condiv1 = document.createElement("span");    //包裹标签用div //创建span元素
    var txt1 = document.createElement("input");     //显示父类内容 //创建input元素
    txt1.type = "text"//设置控件类型
    txt1.style.width = p.width + 'px';//样式 宽度
    var div1 = document.createElement("div");       //包裹DIv //创建div元素
    var iwidth1 = $(this).css('width');
    var ul1 = document.createElement("ul");//创建 url元素
    ul1.id = "ztree" + p.name;//设置id
    div1.id = "div" + p.name;
    txt1.name="PartTree"
    txt1.readOnly = "readonly";
    txt1.className = "event_row";
    
        div1.style.width =p.width+'px';
        div1.style.position = "absolute";
        div1.style.border = "1px solid gray";
        div1.style.overflow = "auto";
        div1.style.height = "270px";
       // div1.style.left = "3px";
        div1.style.top = "20px";

    $(this).wrap(condiv1);
    ul1.className = "ztree";
    div1.style.backgroundColor = "#fff";
    div1.style.zIndex = "2000";
    div1.style.display = "none"
    txt1.id = "div" + p.name;
    $(div1).append(ul1);//追加节点

   //点击事件
    $(txt1).click(function () {
        $(div1).toggle(500);
        $("body").bind("mousedown", onBodyDown);//body设置mousedown事件
    });
 
    var val = $(this);//绑定数据
    if (p.valdefault) {
        $(this).val(p.valdefault);
    }
    $.ajax({
        type: p.type,
        url: p.url,
        data: p.param,
        dataType:p.dataType,
        success: function (data) {
            data = eval("(" + data + ")");
            var setting1 = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                },
                view: {
                    addDiyDom: function (treeId, treeNode) {
                        temp = val.val();
                        for (var i = 0; i < zNodes.length; i++) {
                            var jj = zNodes[i];
                            if (jj.id == temp) {//判断原始值、得出是否为绑定值
                                txt1.value = jj.name;
                            }
                        }
                    }
                }
            }

            var settingck = {
                check: {
                    enable: true,
                    chkboxType: { "Y": "ps", "N": "" }
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeClick: beforeClick,
                    onCheck: onCheck
                },
                view: {
                    dblClickExpand: false
                }
            };
      
            var zNodes = data;
         
            for (var i = 0; i < zNodes.length; i++) {
                var jj = zNodes[i];
                if (jj.id == val.val()) {
                    txt1.value = jj.name;
                }
            }
            if (p.hascheckbox) {
                $.fn.zTree.init($(ul1), settingck, zNodes);
            }
            else {
                $.fn.zTree.init($(ul1), setting1, zNodes);
            }

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.readyState);            
        }
    });
//设置树形结构点击事件 
    function onClick(event, treeId, treeNode, clickFlag) {
        if (treeNode.level == 1 || p.level<0) {
            $(val).val(treeNode.id);
            txt1.value = treeNode.name;
            div1.style.display = "none";
        }
   
    }
//点击前触发事件
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("ztree" + p.name);
        zTree.checkNode(treeNode, !treeNode.checked, null, true);//检验节点
        return false;
    }
//选中
    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("ztree" + p.name);
        nodes = zTree.getCheckedNodes(true);
        var ids = "";
        var names = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            ids += nodes[i].id + ",";
            names += nodes[i].name + ",";
        }
        if (ids.length > 0) ids = ids.substring(0, ids.length - 1);
        ids += "&";
        if (names.length > 0) names = names.substring(0, names.length - 1);
        $(val).val(ids);
        txt1.value = names;
    }

    $(this).hide().parent().append(div1).append(txt1)[0].style.position = "relative";
    $(function () {
        //绑定需要拖拽改变大小的元素对象 
        //bindResize(document.getElementById('divtwo'));
    });

    function onBodyDown(event) {
        if (!(event.target.id == "div" + p.name || $(event.target).parents("#div" + p.name).length > 0)) {
            div1.style.display = "none";
        }
    }


    function bindResize(el) {
        //初始化参数 
        var els = el.style,
            //鼠标的 X 和 Y 轴坐标 
            x = y = 0;
        $(el).mousedown(function (e) {
            //按下元素后，计算当前鼠标与对象计算后的坐标 

            x = e.clientX - el.offsetWidth,

                y = e.clientY - el.offsetHeight;
            //在支持 setCapture 做些东东 
            el.setCapture ? (
            //捕捉焦点 
                el.setCapture(),
            //设置事件 
                el.onmousemove = function (ev) {
                    mouseMove(ev || event)
                },
                el.onmouseup = mouseUp
            ) : (
                //绑定事件 
                $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
            )
            //防止默认事件发生 
            e.preventDefault()
        });
        //移动事件 
        function mouseMove(e) {
            if (e.clientX - x > 50) {
                els.width = e.clientX - x + 'px'
            }
            if (e.clientY - y > 50) {
                els.height = e.clientY - y + 'px'
            }
        }
        //停止事件 
        function mouseUp() {
            //在支持 releaseCapture 做些东东 
            el.releaseCapture ? (
            //释放焦点 
                el.releaseCapture(),
            //移除事件 
                el.onmousemove = el.onmouseup = null
            ) : (
                //卸载事件 
                $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
            )
       }
    }
}

你这段代码应该是jquery Ztree插件的吧,你可以参考下它的api：
http://www.ztree.me/hunter/zTree.html
Regards,
Moonlight

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 5

请问你是怎么搜索到的它的api，为啥我用百度搜不到这个api那

---

please verify my account