结构树+甘特图

胡大可呀

已于 2023-07-15 15:39:35 修改

阅读量292

点赞数

文章标签：甘特图

于 2023-07-15 15:31:31 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63686648/article/details/131739748

版权

1、我们使用的是DHX的组件

网址：Gantt : Samples

看不懂网址可以参考此博客：免费JS甘特图组件dhtmlxgantt - 马洪彪 - 博客园

2、引入js和css:

css下载地址：http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css

js下载地址：http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js

这个js和css的表格不能拖拽，要拖拽请下载顶部的附件。

3、写了个静态页面可以参考

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="js/dhtmlxgantt.js"></script>
    <link href="css/dhtmlxgantt.css" rel="stylesheet">
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="gantt_here" style='width:100%; height:100%;'></div>
    <script type="text/javascript">

        gantt.config.readonly = true;//只读
        gantt.i18n.setLocale("cn");//设置为中文

        //设置甘特图表头日期
        gantt.config.scales = [
            { unit: "month", format: "%F, %Y" },
            { unit: "day", step: 1, format: "%j, %D" }
        ];

        //左边表头字段
        gantt.config.columns = [
            { name: "name", label: "任务名称", tree: true, width: 250 ,resize: true},
            { name: "workerDays", label: "工期", align: "center", width: 100 ,resize: true},
            { name: "planStartDate", label: "计划开始日期", align: "center", width: 100 ,resize: true},
            { name: "planEndDate", label: "计划结束日期", align: "center", width: 100 ,resize: true},
            { name: "projectName", label: "项目名称", align: "center", width: 200 ,resize: true},
            { name: "orgName", label: "所属组织", align: "center", width: 200 ,resize: true}
        ];

        gantt.init("gantt_here");
 
        //初始化数据
        gantt.parse({
            data: [
                { id: 1, name: "科技馆", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "项目部", orgName: "项目部",text:"科技馆", start_date: "01-04-2023", duration: 467, progress: 0.4, open: true },
                { id: 2, name: "屋面", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "科技馆", orgName: "科技馆",text:"科技馆",  start_date: "01-04-2023", duration: 467, progress: 0.6, parent: 1 },
                { id: 3, name: "结构", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "项目部", orgName: "项目部",text:"科技馆",  start_date: "01-04-2023", duration: 467, progress: 0.6, parent: 1 },
                { id: 4, name: "屋面", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "项目部", orgName: "项目部",text:"科技馆",  start_date: "01-04-2023", duration: 467, progress: 0.6, parent: 2 },
                { id: 5, name: "屋面", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "项目部", orgName: "项目部", text:"科技馆", start_date: "01-04-2023", duration: 467, progress: 0.6, parent: 4 },
                { id: 6, name: "幕墙", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "项目部", orgName: "项目部", text:"科技馆", start_date: "01-04-2023", duration: 467, progress: 0.6, parent: 5 }
            ],

        });
    </script>

</body>

</html>

4、下面是项目中的实战,从后台获取数据，并且加查询功能，使用了layui框架。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="../../../js/dhtmlxgantt.js"></script>
    <link href="../../../css/dhtmlxgantt.css" rel="stylesheet">
    <script src="../../../js/public.js"></script>
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
<form class="layui-form" action="" lay-filter="example">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">任务名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
            </div>
<!--            <label class="layui-form-label">计划时间</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="name" autocomplete="off" class="layui-input">-->
<!--            </div>-->
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="searchFilter">查询</button>
            <button class="layui-btn" onclick="resetALl(this,event);">重置</button>
            <!--<a id="expandSearch"   class="layui-btn" onclick="expandSearch();">展开查询</a>-->
        </div>
    </div>
</form>
<div id="gantt_here" style='width:100%; height:90%;'></div>
<script type="text/javascript">
    var dataList;

    //设置甘特图表头日期
    gantt.config.scales = [
        {unit: "month", format: "%F, %Y"},
        {unit: "day", step: 1, format: "%j, %D"}
    ];

    //左边表头字段
    gantt.config.columns = [
        {name: "name", label: "任务名称", tree: true, width: 250,resize: true},
        {name: "workerDays", label: "工期", align: "center", width: 100,resize: true},
        {name: "planStartDate", label: "计划开始日期", align: "center", width: 100,resize: true},
        {name: "planEndDate", label: "计划结束日期", align: "center", width: 100,resize: true},
        {name: "projectName", label: "项目名称", align: "center", width: 200,resize: true},
        {name: "orgName", label: "所属组织", align: "center", width: 200,resize: true}
    ];

    gantt.config.readonly = true;//只读
    gantt.i18n.setLocale("cn");//设置为中文

    gantt.init("gantt_here");

    selectList();

    var layer;
    var form;
    var table;
    layui.use(['form', 'table', 'layer'], function () {
        table = layui.table;
        form = layui.form;
        layer = layui.layer;

        //监听提交
        form.on('submit(searchFilter)', function (data) {
            selectList($("#name").val())
            return false;
        });

    });

    //重置
    function resetALl(t, evt) {

    }
    //查询
    function selectList(name) {
        //后台获取初始化数据
        init(name);
        return false;
    }

    //初始化数据
    // gantt.parse({
    //     // data: [
    //     //     { id: 1, name: "科技馆", workerDays: "467 days", planStartDate: "2023-04-12", planEndDate: "2023-04-12", projectName: "项目部", orgName: "项目部",text:"科技馆", start_date: "01-04-2023", duration: 467, progress: 0.4, open: true }
    //     // ],
    // });

    function init(name) {
        publicPostAjax(url,
            { "name": name}, true, null, function (r) {
                if (r.code == 1) {
                    dataList = r.data.list;
                    gantt.clearAll();//清除数据渲染
                    //初始化数据
                    gantt.parse({
                        data: dataList
                    });
                    gantt.render();//重新加载
                }
            });
    }
</script>

</body>

</html>