甘特图的这些新玩法，你都知道吗？

摘要：本文由葡萄城技术团队于思否发布。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言

甘特图是项目管理、生产排程、节点管理中非常常见的一个功能。那么，有没有一种方法能够帮助将甘特图引入到系统中，让数据的进度、排程数据的展示更加直观，让管理更加高效。

本葡萄今天为大家带来一个新的插件——甘特图插件。该插件是结合 SpreadJS 本身强大电子表格能力提供的一种全新的可视化展示方案，能够有效地将生产计划、预算排期中的日程管理信息展示出来，显示关键路径上关键节点的进展或状态。其数据来自与集算表同源的数据管理器（DataManager），通过绑定 -\> 视图的方式，将层级化的任务数据通过甘特图插件进行展示。

甘特图的这些新玩法，你都知道吗？_第1张图片

（通过甘特图插件展示层级化的数据）

1. 缩放和时间刻度滚动

（通过甘特图插件实现缩放及刻度滚动）

JavaScript代码：

var myTable;
var ganttSheet;
var adjustTierUnit = true;

window.onload = function() {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
    initSplitView(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initDataSource(spread);
    initGanttSheet(spread);
    spread.resumePaint();
}

function initDataSource(spread) {
    var tableName = "Gantt_Id";
    var baseApiUrl = getBaseApiUrl();
    var apiUrl = baseApiUrl + "/" + tableName;
    var dataManager = spread.dataManager();
    myTable = dataManager.addTable("myTable", {
        batch: true,
        remote: {
            read: {
                url: apiUrl
            }
        },
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" }
            }
        }
    });
}

function initGanttSheet(spread) {
    ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable.addView("ganttView", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120 }
    ]);
    view.fetch().then(function() {
        ganttSheet.bindGanttView(view);
    }).then(function() {
        ganttSheet.project.timescale.zoomOut();
    });
    initSidePanel(ganttSheet);
}

2.任务栏和网格线的样式调整
甘特图的这些新玩法，你都知道吗？_第2张图片

（通过甘特图插件实现的任务栏和网格线的样式）

JavaScript代码：

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;

window.onload = function() {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
    initSplitView(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initDataSource(spread);
    initGanttSheet(spread);
    spread.resumePaint();
}

function initDataSource(spread) {
    var tableName = "Gantt_Id";
    var baseApiUrl = getBaseApiUrl();
    var apiUrl = baseApiUrl + "/" + tableName;
    var dataManager = spread.dataManager();
    myTable = dataManager.addTable("myTable", {
        batch: true,
        remote: {
            read: {
                url: apiUrl
            }
        },
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" }
            }
        }
    });
}

function initGanttSheet(spread) {
    ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable.addView("ganttView", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120, visible: false }
    ]);
    view.fetch().then(function() {
        ganttSheet.bindGanttView(view);
        ganttSheet.project.timescale.tierMode = GC.Spread.Sheets.GanttSheet.TimescaleTierMode.topMiddleBottom;
        ganttSheet.project.timescale.topTier.unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.thirdsOfMonth;
    }).then(function() {
        ganttSheet.gridlines.bottomTierColumn = {
            lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
            lineColor: "#c85b11"
        };
        ganttSheet.gridlines.ganttRows.lineType = GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin;
        ganttSheet.gridlines.ganttRows.lineColor = "#abd08f";
        ganttSheet.gridlines.ganttRows.interval = 2;
        ganttSheet.gridlines.ganttRows.intervalLineType = GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot;
        ganttSheet.gridlines.ganttRows.intervalLineColor = "#9cc3e5";
    });
    initSidePanel(ganttSheet);
}

function initSidePanel(ganttSheet) {
    var setButton = document.getElementById("set-gridline");
    var intervalPanel = document.getElementById("interval-panel");
    var affectItemOption = document.getElementById("affectItem");
    var lineTypeOption = document.getElementById("lineType");
    var lineColorOption = document.getElementById("lineColor");
    var intervalLineTypeOption = document.getElementById("intervalLineType");
    var intervalLineColorOption = document.getElementById("intervalLineColor");
    var intervalOption = document.getElementById("interval");

    var option = convertToNormalOptions(ganttSheet, "ganttRows");
    syncOptionToPanel(option);

    affectItemOption.addEventListener('change', function(e) {
        var target = affectItemOption.value;
        if (affectItemOption.value === "ganttRows") {
            intervalPanel.classList.remove("hide");
        } else {
            intervalPanel.classList.add("hide");
        }
        var option = convertToNormalOptions(ganttSheet, target);
        syncOptionToPanel(option);
    });
    setButton.addEventListener('click', function() {
        var target = affectItemOption.value;
        var lineType = Number(lineTypeOption.value);
        var lineColor = lineColorOption.value;
        var intervalLineType = Number(intervalLineTypeOption.value);
        var intervalLineColor = intervalLineColorOption.value;
        var interval = Number(intervalOption.value);
        var option = convertToGanttGridlineOptions(lineType, lineColor, intervalLineType, intervalLineColor, interval);
        if (option) {
            ganttSheet.gridlines[target] = option;
        }
    });

3.数据展示布局调整

甘特图的这些新玩法，你都知道吗？_第3张图片

（通过甘特图插件实现布局的调整）

JavaScript代码：

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;
var roundBarsToWholeDays = true;

window.onload = function() {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
    initSplitView(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initDataSource(spread);
    initGanttSheet(spread);
    spread.resumePaint();
}

function initDataSource(spread) {
    var tableName = "Gantt_Id";
    var baseApiUrl = getBaseApiUrl();
    var apiUrl = baseApiUrl + "/" + tableName;
    var dataManager = spread.dataManager();
    myTable = dataManager.addTable("myTable", {
        batch: true,
        remote: {
            read: {
                url: apiUrl
            }
        },
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" }
            }
        }
    });
}

function initGanttSheet(spread) {
    ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable.addView("ganttView", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120, visible: false }
    ]);
    view.fetch().then(function() {
        ganttSheet.bindGanttView(view);
        ganttSheet.suspendPaint();
        var summaryStyleRule = ganttSheet.project.taskStyleRules.getRule("summary");
        var summaryStyle = summaryStyleRule.style.taskbarStyle;
        summaryStyle.leftText = "start";
        summaryStyle.rightText = "finish";
        summaryStyleRule.style.taskbarStyle = summaryStyle;
        var layout = ganttSheet.project.layout;
        layout.linkLineMode = "noLinks";
        layout.barHeight = 18;
        ganttSheet.resumePaint();
    });
    initSidePanel(ganttSheet);
}

function initSidePanel(ganttSheet) {
    var roundBarItem = document.getElementById("round-bar");
    var linkTypeItem = document.getElementById("link-type");
    var barHeightItem = document.getElementById("bar-height");
    var dateFormatItem = document.getElementById("date-format");
    var setLayoutItem = document.getElementById("set-layout");

    roundBarItem.addEventListener("click", function() {
        if (roundBarItem.classList.contains("active")) {
            roundBarItem.classList.remove("active");
            roundBarsToWholeDays = false;
        } else {
            roundBarItem.classList.add("active");
            roundBarsToWholeDays = true;
        }
    });

    setLayoutItem.addEventListener("click", function() {
        var layout = ganttSheet.project.layout;
        ganttSheet.suspendPaint();
        layout.linkLineMode = linkTypeItem.value;
        layout.barHeight = Number(barHeightItem.value);
        layout.barTextDateFormat = dateFormatItem.value;
        layout.roundBarsToWholeDays = roundBarsToWholeDays;
        ganttSheet.resumePaint();
    });
}

4.任务操作
甘特图的这些新玩法，你都知道吗？_第4张图片

（可在甘特图插件实现任务操作）

JavaScript代码：

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;
var roundBarsToWholeDays = true;

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
    initSplitView(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initDataSource(spread);
    initGanttSheet(spread);
    spread.resumePaint();
}

function initDataSource(spread) {
    var tableName = "Gantt_Id";
    var baseApiUrl = getBaseApiUrl();
    var apiUrl = baseApiUrl + "/" + tableName;
    var dataManager = spread.dataManager();
    myTable = dataManager.addTable("myTable", {
        batch: true,
        remote: {
            read: {
                url: apiUrl
            },
            batch: {
                url: apiUrl + "Collection"
            }
        },
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" }
            }
        }
    });
}

function initGanttSheet(spread) {
    ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable.addView("ganttView", [
        { value: "id", caption: "Id", width: 40 },
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120 }
    ]);
    view.fetch().then(function () {
        ganttSheet.bindGanttView(view);
    });
    initSidePanel(ganttSheet);
}

function initSidePanel(ganttSheet) {
    var addTaskItem = document.getElementById("add-task");
    var addSummayItem = document.getElementById("add-summary");
    var addMilestoneItem = document.getElementById("add-milestone");

    var deleteItem = document.getElementById("delete-task");

    var indentTaskItem = document.getElementById("indent-task");
    var outdentTaskItem = document.getElementById("outdent-task");

    var linkTaskItem = document.getElementById("link-task");
    var unlinkTaskItem = document.getElementById("unlink-task");

    var submitItem = document.getElementById("submit-changes");
    var cancelItem = document.getElementById("cancel-changes");

    addTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        addTask();
        ganttSheet.resumePaint();
    });
    addSummayItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        addSummary();
        ganttSheet.resumePaint();
    });
    addMilestoneItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        addMilestone();
        ganttSheet.resumePaint();
    });

    deleteItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        deleteTask();
        ganttSheet.resumePaint();
    });

    indentTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        indentTask();
        ganttSheet.resumePaint();
    });
    outdentTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        outdentTask();
        ganttSheet.resumePaint();
    });

    linkTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        linkTask();
        ganttSheet.resumePaint();
    });
    unlinkTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        unlinkTask();
        ganttSheet.resumePaint();
    });

    submitItem.addEventListener("click", function () {
        ganttSheet.submitChanges();
    });
    cancelItem.addEventListener("click", function () {
        ganttSheet.cancelChanges();
    });

    function addTask() {
        var project = ganttSheet.project;
        var selections = ganttSheet.getSelections();
        var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length)
        var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
        var taskData = createTaskDataList(rowCount, () => ({ name: "<新任务>" }));
        project.insertTasksByRow(insertedRow, taskData);
    }

    function addSummary() {
        var project = ganttSheet.project;
        var selectedRange = ganttSheet.getSelections()[0];
        var insertedRow = selectedRange.row;
        var insertedTaskNumbers = ganttSheet.getTaskByRow(insertedRow).taskNumber || project.count;
        var selectedTasks = getSelectedRowIndexes().map((row) => ganttSheet.getTaskByRow(row)).filter((row) => !!row);

        if (selectedTasks.length == 0) {
            project.insertTasks(insertedTaskNumbers, [{ name: "<新摘要任务>" }, { name: "<新任务>" }]);
            project.indentTasks(insertedTaskNumbers + 1);
        } else {
            project.insertTasks(insertedTaskNumbers, { name: "<新摘要任务>" }, selectedTasks[0].level);
            project.indentTasks(selectedTasks.map((t) => t.taskNumber));
        }
        ganttSheet.setSelection(insertedRow, -1, 1, -1);
    }

    function addMilestone() {
        var project = ganttSheet.project;
        var selections = ganttSheet.getSelections();
        var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
        var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length);
        var taskData = createTaskDataList(rowCount, () => ({ name: "<新里程碑>", duration: 0 }));
        project.insertTasksByRow(insertedRow, taskData);
        ganttSheet.setSelection(insertedRow, -1, rowCount, -1);
    }

    function deleteTask() {
        var project = ganttSheet.project;
        var rowIds = getSelectedTaskNumbers();
        project.removeTasks(rowIds);
    }

    function indentTask() {
        var project = ganttSheet.project;
        var rowIds = getSelectedTaskNumbers();
        project.indentTasks(rowIds);
    }

    function outdentTask() {
        var project = ganttSheet.project;
        var rowIds = getSelectedTaskNumbers();
        project.outdentTasks(rowIds);
    }

    function linkTask() {
        var project = ganttSheet.project;
        var links = [];
        var selections = ganttSheet.getSelections();
        var previous = -1;
        for (var range of selections) {
            if (previous != -1) {
                links.push([previous, range.row]);
            }
            for (var row = range.row + 1; row < range.row + range.rowCount; row++) {
                links.push([row - 1, row]);
            }
            previous = range.row + range.rowCount - 1;
        }
        if (links.length <= 0) {
            return;
        }
        project.suspendSchedule();
        for (var link of links) {
            var [fromTaskNumber, toTaskNumber] = link;
            try {
                project.addDependency({ fromTaskNumber, toTaskNumber });
            } catch { }
        }
        project.resumeSchedule();
    }

5.日历

甘特图的这些新玩法，你都知道吗？_第5张图片

（可在甘特图插件内实现日历内容的调整）

JavaScript代码：

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;
var roundBarsToWholeDays = true;

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
    initSplitView(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initDataSource(spread);
    initGanttSheet(spread);
    spread.resumePaint();
}

function initGanttSheet(spread) {
    ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable.addView("ganttView", [
        { value: "id", caption: "Id", width: 40 },
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120 }
    ]);
    view.fetch().then(function () {
        ganttSheet.bindGanttView(view);
    });
    initSidePanel(ganttSheet);
}

function initSidePanel(ganttSheet) {
    var addTaskItem = document.getElementById("add-task");
    var addSummayItem = document.getElementById("add-summary");
    var addMilestoneItem = document.getElementById("add-milestone");

    var deleteItem = document.getElementById("delete-task");

    var indentTaskItem = document.getElementById("indent-task");
    var outdentTaskItem = document.getElementById("outdent-task");

    var linkTaskItem = document.getElementById("link-task");
    var unlinkTaskItem = document.getElementById("unlink-task");

    var submitItem = document.getElementById("submit-changes");
    var cancelItem = document.getElementById("cancel-changes");

    addTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        addTask();
        ganttSheet.resumePaint();
    });
    addSummayItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        addSummary();
        ganttSheet.resumePaint();
    });
    addMilestoneItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        addMilestone();
        ganttSheet.resumePaint();
    });

    deleteItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        deleteTask();
        ganttSheet.resumePaint();
    });

    indentTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        indentTask();
        ganttSheet.resumePaint();
    });
    outdentTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        outdentTask();
        ganttSheet.resumePaint();
    });

    linkTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        linkTask();
        ganttSheet.resumePaint();
    });
    unlinkTaskItem.addEventListener("click", function () {
        ganttSheet.suspendPaint()
        unlinkTask();
        ganttSheet.resumePaint();
    });

    submitItem.addEventListener("click", function () {
        ganttSheet.submitChanges();
    });
    cancelItem.addEventListener("click", function () {
        ganttSheet.cancelChanges();
    });

    function addTask() {
        var project = ganttSheet.project;
        var selections = ganttSheet.getSelections();
        var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length)
        var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
        var taskData = createTaskDataList(rowCount, () => ({ name: "<新任务>" }));
        project.insertTasksByRow(insertedRow, taskData);
    }

    function addSummary() {
        var project = ganttSheet.project;
        var selectedRange = ganttSheet.getSelections()[0];
        var insertedRow = selectedRange.row;
        var insertedTaskNumbers = ganttSheet.getTaskByRow(insertedRow).taskNumber || project.count;
        var selectedTasks = getSelectedRowIndexes().map((row) => ganttSheet.getTaskByRow(row)).filter((row) => !!row);

        if (selectedTasks.length == 0) {
            project.insertTasks(insertedTaskNumbers, [{ name: "<新摘要任务>" }, { name: "<新任务>" }]);
            project.indentTasks(insertedTaskNumbers + 1);
        } else {
            project.insertTasks(insertedTaskNumbers, { name: "<新摘要任务>" }, selectedTasks[0].level);
            project.indentTasks(selectedTasks.map((t) => t.taskNumber));
        }
        ganttSheet.setSelection(insertedRow, -1, 1, -1);
    }

    function addMilestone() {
        var project = ganttSheet.project;
        var selections = ganttSheet.getSelections();
        var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
        var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length);
        var taskData = createTaskDataList(rowCount, () => ({ name: "<新里程碑>", duration: 0 }));
        project.insertTasksByRow(insertedRow, taskData);
        ganttSheet.setSelection(insertedRow, -1, rowCount, -1);
    }

    function deleteTask() {
        var project = ganttSheet.project;
        var rowIds = getSelectedTaskNumbers();
        project.removeTasks(rowIds);
    }

    function indentTask() {
        var project = ganttSheet.project;
        var rowIds = getSelectedTaskNumbers();
        project.indentTasks(rowIds);
    }

    function outdentTask() {
        var project = ganttSheet.project;
        var rowIds = getSelectedTaskNumbers();
        project.outdentTasks(rowIds);
    }

    function linkTask() {
        var project = ganttSheet.project;
        var links = [];
        var selections = ganttSheet.getSelections();
        var previous = -1;
        for (var range of selections) {
            if (previous != -1) {
                links.push([previous, range.row]);
            }
            for (var row = range.row + 1; row < range.row + range.rowCount; row++) {
                links.push([row - 1, row]);
            }
            previous = range.row + range.rowCount - 1;
        }
        if (links.length <= 0) {
            return;
        }
        project.suspendSchedule();
        for (var link of links) {
            var [fromTaskNumber, toTaskNumber] = link;
            try {
                project.addDependency({ fromTaskNumber, toTaskNumber });
            } catch { }
        }
        project.resumeSchedule();
    }

    function unlinkTask() {
        var project = ganttSheet.project;
        var taskNumbers = getSelectedTaskNumbers();
        var dependencies = [];
        if (taskNumbers.length == 1) {
            var task = project.getTaskByRow(taskNumbers[0]);
            dependencies = [...task.predecessorDependencies, ...task.successorDependencies];
        } else {
            var taskNumberSet = {};
            for (var taskNumber of taskNumbers) {
                taskNumberSet[taskNumber] = true;
            }
            dependencies = project.dependencies.filter(dp => taskNumberSet[dp.from.taskNumber] && taskNumberSet[dp.to.taskNumber]);
        }
        if (dependencies.length >= 1) {
            project.removeDependency(dependencies);
        }
    }

    function getSelectedRowIndexes() {
        var rows = [];
        var selections = ganttSheet.getSelections();
        for (var range of selections) {
            for (var row = range.row; row < range.row + range.rowCount; row++) {
                rows.push(row);
            }
        }
        return rows;
    }

6.导入和导出操作

甘特图插件中展示的内容导出至PDF及Excel的格式。

甘特图的这些新玩法，你都知道吗？_第6张图片

（支持导入导出能力）

JavaScript代码：

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;
var roundBarsToWholeDays = true;

window.onload = function() {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
    initSplitView(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initDataSource(spread);
    initGanttSheet(spread);
    spread.resumePaint();
}

function initDataSource(spread) {
    var tableName = "Gantt_Id";
    var baseApiUrl = getBaseApiUrl();
    var apiUrl = baseApiUrl + "/" + tableName;
    var dataManager = spread.dataManager();
    myTable = dataManager.addTable("myTable", {
        batch: true,
        remote: {
            read: {
                url: apiUrl
            }
        },
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" }
            }
        }
    });
}

function initGanttSheet(spread) {
    ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable.addView("ganttView", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120, visible: false }
    ]);
    view.fetch().then(function() {
        ganttSheet.bindGanttView(view);
    });
    initSidePanel(spread, ganttSheet);
}

function initSidePanel(spread, ganttSheet) {
    var excelIo = new GC.Spread.Excel.IO();

    var fileInput = document.getElementById("file-input");
    var openFileItem = document.getElementById("open-file");
    var fileNameItem = document.getElementById("file-name");
    var exportJSONItem = document.getElementById("export-to-json");
    var exportSJSItem = document.getElementById("export-to-sjs");
    var exportExcelItem = document.getElementById("export-to-excel");
    var printItem = document.getElementById("print");
    var pdfItem = document.getElementById("pdf");

    var exportFileName = "export";

    openFileItem.addEventListener('click', function() {
        fileInput.click();
    });

    fileInput.addEventListener('change', function(e) {
        fileNameItem.value = 'Loading file...';
        var file = fileInput.files[0];
        if (!file) {
            alert("Upload a file first.");
            return;
        }
        var fileName = file.name;
        var suffix = fileName.substr(fileName.lastIndexOf('.'));
        if (suffix === '.xlsx' || suffix === '.xlsm') {
            // here is excel IO API
            excelIo.open(file, function(json) {
                spread.fromJSON(json);
                fileNameItem.value = fileName;
                fileInput.value = '';
            }, function(e) {
                // process error
                console.log(e);
            });
        } else if (suffix === '.ssjson' || suffix === '.json') {
            var reader = new FileReader();
            reader.onload = function() {
                var spreadJson = JSON.parse(this.result);
                spread.fromJSON(spreadJson);
                fileNameItem.value = fileName;
                fileInput.value = '';
            };
            reader.readAsText(file);
        } else if (suffix === '.sjs') {
            spread.open(file, () => {
                fileNameItem.value = fileName;
                fileInput.value = '';
            }, (e) => {
                console.log(e);
            }, {
                openMode: GC.Spread.Sheets.OpenMode.normal,
                fullRecalc: true,
            });
        }
    });

    exportJSONItem.addEventListener('click', function () {
        var fileName = exportFileName + ".ssjson";
        var json = spread.toJSON();
        saveAs(new Blob([JSON.stringify(json)], { type: "text/plain;charset=utf-8" }), fileName);
    });

    exportSJSItem.addEventListener('click', function () {
        var fileName = exportFileName + ".sjs";
        spread.save(function (blob) {
            saveAs(blob, fileName);
        }, function (e) {
            // process error
            console.log(e);
        }, {
            fileType: GC.Spread.Sheets.FileType.ssjson,
            includeBindingSource: true,
            saveAsView: true
        });
    });

    exportExcelItem.addEventListener('click', function () {
        var fileName = exportFileName + ".xlsx";
        var json = spread.toJSON({ includeBindingSource: true, saveAsView: true });
        // here is excel IO API
        excelIo.save(json, function(blob) {
            saveAs(blob, fileName);
        }, function(e) {
            // process error
            console.log(e);
        }, { xlsxStrictMode: false });
    });

    printItem.addEventListener('click', function() {
        spread.print();
    });

    pdfItem.addEventListener('click', function() {
        spread.savePDF(function (blob) {
            var url = URL.createObjectURL(blob);
            pwin = window.open(url);
        });
    });
}

总结

甘特图是一种强大的项目管理工具，通过直观的时间轴展示任务的安排和进度。它能帮助项目经理们创建详细的项目计划，有效跟踪进度，并合理分配资源。甘特图还可以管理任务间的依赖关系，及时调整时间表，并识别风险与关键路径。它在项目管理中扮演着重要的角色，提高了团队的协作效率和项目的成功率。通过使用甘特图，项目团队能够更好地掌握项目进展，作出决策，并确保项目按时交付。

如果您对该插件感兴趣，可以访问葡萄城官网下载SpreadJS产品。

你可能感兴趣的:(javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他