DTree的复选框的添加及其获取选中的值

　　这两天遇到一个需求，要求一个产品分类文本框可以填充多个产品名称，刚开始的时候就想到了使用单击文本框，弹出产品列表的界面，勾选出产品分类后，单击确定填充入父窗口的文本框。

　　大致做了个产品分类的界面，是个两列n行的表格组成，第一列复选框，第二列产品分类名称，功能做好了，虽然丑点，但满足需求，叫来经理看了下，一眼就否决了，察，要求产品分类用树的形式进行展现，早说嘛。。。╮(╯_╰)╭。

　　正巧项目当中有个以前的老节点用到了DTree展示了一些内容，正好借来用下，移植过来后，发现没有复选框，于是上网查了下资料。

　　DTree增加复选框的步骤：

　1、dtree.js

function dTree (objName) {

    this.config = {

        target : null,

        folderLinks : true,

        useSelection : true,

        useCookies : true,

        useLines : true,

        useIcons : true,

        useStatusText : false,

        closeSameLevel : false,

        inOrder : false,

        check : true
        // 检查是否有复选框

    }

2、在dtree.js添加下面红色的代码代码:

dTree.prototype.node = function(node, nodeId) {

    var str = '<div class="dTreeNode">' + this.indent(node, nodeId);

    if (this.config.useIcons) {

        if (!node.icon)
            node.icon = (this.root.id == node.pid)
                    ? this.icon.root
                    : ((node._hc) ? this.icon.folder : this.icon.node);

        if (!node.iconOpen)
            node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

        if (this.root.id == node.pid) {

            node.icon = this.icon.root;

            node.iconOpen = this.icon.root;

        }

        str += '<img id="i' + this.obj + nodeId + '" src="'
                + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';

        //添加上复选框
        if (this.config.check == true) {
            str += '<input type="checkbox" name="checks" id="c' + this.obj + node.id +  ')"/>';
        }
        
    }

3、在创建一颗DTree树的时候，增加红色字体的内容

　　　　d = new dtree('d');

　　　　d.check = true; 

　　做完上面三个步骤后,显示的效果是多层节点都会显示复选框，需求要求只要叶子节点显示复选框，父级、父级的父级不显示复选框，所以做了下稍稍的改动，将　　  

        //添加上复选框
        if (this.config.check == true) {
            str += '<input type="checkbox" name="checks" id="c' + this.obj + node.id +  ')"/>';
        }

　　改为：　

     //node._hc 代表 包含子节点标识，!node._hc也就是叶子节点

　　 if (this.config.check == true && !node._hc) {

    　　  str += '<input type="checkbox" name="checks" id="c' + this.obj + node.id +  ')"/>';
        }

　　最后来说说怎么获取勾选的复选框的值，我试了蛮多方式，在checkbox组件上加onclick事件、加onpropertychange事件，都没有达到要求，最后还是通过关闭窗口或单击别的按钮的事件中添加var xxx = document.getElementsByName("checks");进行筛选选中的节点。

 

　　最后提供一个网址，虽然没用到，但是了解DTree.js的变量意思等基本知识还是蛮有用的：http://t.cn/8sh7P07