ztree树状表格

 

 

页面代码：

<link href="${ctx}/static/jee/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css" />
        <script src="${ctx}/static/jee/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="${ctx}/static/plugin/ztree/3.5.18/js/jquery.ztree.core-3.5.js"></script>
        <script type="text/javascript" src="${ctx}/static/js/assess/assess-census-detail.js?<%=Math.random()%>"></script>
        <style>
             .ztree {padding: 0;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;border-bottom: 1px solid #E3E3E3;}
             .ztree li a {vertical-align: middle;height: 32px;padding: 0px;}
             .ztree li > a {width: 100%;}
             .ztree li a.curSelectedNode {padding-top: 0px;border: none;height: 32px;}
             .ztree li ul {padding-left: 0px}
             .ztree div.divTd span {line-height: 30px;vertical-align: middle;}
             .ztree div.divTd {height: 100%;line-height: 30px;border-top: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;text-align: center;display: inline-block;color: #6c6c6c;overflow: hidden;}
             .ztree div.divTd:first-child {text-align: left;text-indent: 10px;border-left: none;}
             .ztree .head {background: #E8EFF5;}
             .ztree .head div.divTd {color: #393939;font-weight: bold;}
        </style>

 

assess-census-detail.js代码：

var headArray = [ "记分标准", "分值", "任务数", "审批中", "审批通过", "审批未通过" ];
var newOpen = null;
$(function() {
    $.post(ctx+"/system/assess/census/treeJson.chtml", { yearId: yearId, departmentId: departmentId},
       function(data){
        var data=eval("(" + data + ")");
        queryHandler(data);
    });
});
var setting = {
    view : {
        addDiyDom : addDiyDom,
        nameIsHTML : true,
        selectedMulti : false,
        showTitle : false
    },
    data : {
        simpleData : {
            enable : true
        }
    }
};
/**
 * 自定义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="divTd swich fnt" style="width:48%" title="'+treeNode.name+'"></div>');
     var div = $(liObj).find('div').eq(0);
     //从默认的位置移除
     switchObj.remove();
     spanObj.remove();
     icoObj.remove();
     //在指定的div中添加
     div.append(switchObj);
     div.append(spanObj);
     //隐藏了层次的span
     var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
     switchObj.before(spaceStr);
     //图标垂直居中
     icoObj.css("margin-top","9px");
     switchObj.after(icoObj);
    var editStr = '';
    // 宽度需要和表头保持一致
    editStr += '<div class="divTd" style="width:10%">' + (treeNode.score == null ? '': treeNode.score) + '</div>';
    editStr += '<div class="divTd" style="width:10%">' + (treeNode.scoreTimes== null ? '': treeNode.scoreTimes) + '</div>';
    editStr += '<div class="divTd" style="width:10%">' + (treeNode.waitting_audit== null ? '': treeNode.waitting_audit) + '</div>';
    editStr += '<div class="divTd" style="width:10%">' + (treeNode.ok_audit== null ? '': treeNode.ok_audit) + '</div>';
    editStr += '<div class="divTd" style="width:10%">' + (treeNode.no_audit== null ? '': treeNode.no_audit) + '</div>';
    aObj.append(editStr);
}
// 初始化列表
function queryHandler(zTreeNodes) {
    // 初始化树
    $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
    // 设置表头
    var li_head = '<li class="head">';
    $.each(headArray, function(i, headObj) {
        var width = 10;
        if (i == 0) {
            width = 48;
        }
        li_head += '<div class="divTd" style="width:' + width + '%">' + headObj + '</div>';

    });
    li_head += '</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>')
    }
}