表格展开伸缩以及ztree异步加载

html代码：

html代码：

<table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>

            <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
            <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>

            <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
            <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>

表格tr设置属性有要求 父类tr统一class为 parent ,id 为row_01 对应子类class 为child_row+数字

这样即 点击class为paren的添加css高亮显示(如果存在css添加不存在去掉) 同时对应的子类chid_row_id 隐藏 

js代码：

$(function(){
    $('tr.parent').click(function(){  
            $(this)
                .toggleClass("selected")  
                .siblings('.child_'+this.id).toggle(); 
    });
})

这样通过上面的html 会发现如果自己写一个tree的思路当然我用的是ajax请求数据 js动态创建dom方式.

思路1：首先创建父类节点  如上面的：(对应sql select xx from tree )

<tr class="parent" id="row_01"><td colspan="3">父类1</td></tr>
<tr class="parent" id="row_02"><td colspan="3">父类2</td></tr>
<tr class="parent" id="row_03"><td colspan="3">父类3</td></tr>

当然你会说这那里是tree 你看看tree的父节点的dom 是不是就是这个样子呢？ 把对应的tr换成ul 

思路2：当点击父类节点的时候获取当前的id 并创建dom (数据库sql sql select xx from tree where parent='1')

最后不久ok了吗。当然这个要求就是灵活的创建dom

附加ztree插件的异步加载代码实例：(他的内部肯定也是上面的逻辑实现的)

    var setting = {
        view: { showIcon: false },
        check: { enable: true },
        async: {
            enable: true,
            url: "BDSys_List.ashx?&action=userTree&holdID=" + $.cookie("HoldID"),
            autoParam: ["id", "name=n", "level=lv"],
            dataFilter: filter
        },
        callback: { onClick: onClick, onCheck: onCheck }
    }
    var zTree, HoldID;

    $(function () {
        $.fn.zTree.init($("#userTree"), setting);
        zTree = $.fn.zTree.getZTreeObj("userTree");
        setCheck();
    });function filter(treeId, parentNode, childNodes) {
        return childNodes;
    }
    function onClick(event, treeId, treeNode) {

    }
    function setCheck() {
        zTree.setting.check.chkboxType = { "Y": "s", "N": "s" };
    }
    function onCheck(event, treeId, treeNode) {
        var zdNumber = "", bchecked, phone="";
        bchecked = treeNode.checked;
        treeCheckedNodes = zTree.getCheckedNodes(true);
        if (bchecked == true) {
            for (var i = 0; i < treeCheckedNodes.length; i++) {
                if (treeCheckedNodes[i].level == 0) {
                    zdNumber += treeCheckedNodes[i].name + ",";
                } else {
                    phone += treeCheckedNodes[i].name + ",";
                }
            }
        }
        else if (bchecked == false) {
            for (var i = 0; i < treeCheckedNodes.length; i++) {
                if (treeCheckedNodes[i].level == 0) {
                    zdNumber += treeCheckedNodes[i].name + ",";
                } else {
                    phone += treeCheckedNodes[i].name + ",";
                }
            }
        }
        zdCardNumber.val(zdNumber);//给其他文本赋值
        phoneNumber.val(phone);
    };

对应一般处理程序代码：

            case "userTree": ResponseClient(context, x =>                   //userTree
            {
                var name = HttpUtility.HtmlEncode(context.Request["n"]);
                var isParent = HttpUtility.HtmlEncode(context.Request["isParent"]);
                var id = HttpUtility.HtmlEncode(context.Request["id"]);
                var hoidID = HttpUtility.HtmlEncode(context.Request["holdID"]);
                dt = BizMessage.ZtreeList(name,hoidID);
                List<userZtree> list = new List<userZtree>();
                JavaScriptSerializer jss = new JavaScriptSerializer();
                if (name == "" || name == null)
                {
                    var i = 0;
                    foreach (DataRow item in dt.Rows)
                    {
                        i++;
                        var t = new userZtree() { id = i.ToString(), isParent = true, name = item[0].ToString() };
                        list.Add(t);
                    }
                }
                else
                {
                    foreach (DataRow item in dt.Rows)
                    {
                        list.Add(new userZtree() { id = item[0].ToString(), isParent = false, name = item[1].ToString() });
                    }
                }
                context.Response.Write(jss.Serialize(list));
            });break;

对应sql代码

        public DataTable ZtreeList(string deviceID,string hoidID)
        {
            sb.Clear();
            if (deviceID != null)
            {
                sb.AppendFormat(@"select b.id,b.SIM from std_objectInfo  a left join std_ObjSIM b on a.SIM=b.DeviceID
                                        where a.isDeleted=0 and a.HoldID='{0}' and b.DeviceID='{1}' group by b.SIM,b.id", hoidID, deviceID);
            }
            else
            {
                sb.AppendFormat(@"select a.SIM from std_objectInfo a left join std_ObjSIM b on a.SIM=b.DeviceID where a.isDeleted=0 and a.HoldID='{0}' ", hoidID);
            }
            return Commit.ExecuteDataSet(sb.ToString());
        }

数据库表查询 

是不是比你的表设计的不合理呢 在js的面前 那些用sql模拟递归 或者采用方法递归的面前是那么的脆弱。