如何搭建树形表格

我们借助zTree树形插件，便可以很简单的就实现树形图：

但是要制作一个树形表格，并在表格里显示数据库查询出的数据，甚至写入自定义的事件就需要注意很多地方。

首先我们先创建一个树形，配置好参数：

   //树形表格配置
        var zTreeNodes;
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            view: {
                showLine: false,
                showIcon: false,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "NodeWorkID",
                    //当前节点的父节点id属性
                    pIdKey: "LastWorkID",
                }
            }
        };

接下来就可以去请求数据库的数据了，根据条件查询出树形的字段，返回并赋值给树形：

   //json数据
        function query(id) {
            $.ajaxSettings.async=false;
            $.getJSON("SelectListNodeWorkMax",{SchedulePlanID:id},function(data){
                zTreeNodes = data;
                //初始化树
                $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
                //添加表头
                var li_head = ' <li class="head"><a><div class="diy">OPEN</div><div class="diy">工作项名称</div><div class="diy">计划开始时间</div><div class="diy">计划结束时间</div>' +
                    '<div class="diy">实际开始时间</div><div class="diy">实际结束时间</div><div class="diy">进度</div><div class="diy">操作</div></a></li>';
                var rows = $("#dataTree").find('li');
                if (rows.length > 0) {
                    rows.eq(0).before(li_head)
                } else {
                    $("#dataTree").append(li_head);
                    $("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >无符合条件数据</div></li>')
                }
            });
        }

Controller代码：

 public ActionResult SelectAreaInfoByID(int ProjectID )//绑定树形
        {
            try
            {
                var listInfo = (from tbProjectArae in myModels.B_ProjectArea
                                where tbProjectArae.ProjectID == ProjectID && tbProjectArae.LastAreaID!=0
                                select new ProjectInfoVo
                                {
                                    ProjectAreaID = tbProjectArae.ProjectAreaID,
                                    LastAreaID = tbProjectArae.LastAreaID,
                                    ProjectAreaName = tbProjectArae.ProjectAreaName,
                                }).ToList() ;
                return Json(listInfo, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                return Json(false, JsonRequestBehavior.AllowGet);
            }
        }

当我们得到所有需要的数据后，就可以将数据添加到树形上，表格是我们自己定义创建的，所以要用到append方法追加给表格。

 /* 自定义DOM节点*/   
        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 15;
            var liObj = $("#" + treeNode.tId);
            var aObj = $("#" + treeNode.tId + "_a");
            var switchObj = $("#" + treeNode.tId + "_switch");
            var icoObj = $("#" + treeNode.tId + "_ico");
            var spanObj = $("#" + treeNode.tId + "_span");
            aObj.attr('title', '');
            aObj.append('<div class="diy swich"></div>');
            var div = $(liObj).find('div').eq(0);
            switchObj.remove();
            spanObj.remove();
            icoObj.remove();
            div.append(switchObj);
            var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
            var Biu =  "<span>OPEN</span>";
            switchObj.before(spaceStr);
            switchObj.after(Biu);
            var editStr = '';
            editStr += '<div class="diy">' + (treeNode.NodeWorkName) + '</div>';
            editStr += '<div class="diy">' + (treeNode.Planstart) + '</div>';
            editStr += '<div class="diy">' + (treeNode.Planend) + '</div>';
            editStr += '<div class="diy">' + (treeNode.Realitystart) + '</div>';
            editStr += '<div class="diy">' + (treeNode.Realityend) + '</div>';
            editStr += '<div class="diy">' + (treeNode.WorkSchedule) + '%</div>';
            editStr += '<div class="diy">' + formatHandle(treeNode.NodeWorkID) + '</div>';
            aObj.append(editStr);
        }
        //自定义按钮
        function formatHandle(id) {
            var htmlStr = '';
            htmlStr += '<div class="icon_div" onclick="ShowMod('+id+')"><a class="icon_view" title="查看"  href="#"></a></div>';
            htmlStr += '<div class="icon_div" onclick="addSonWork('+id+')"><a class="icon_add" title="添加子工作项" href="#"></a></div>';
            return htmlStr;
        }

这样我们的树形表格就完成了。