关于#jquery#的问题：jQueryGantt Package 开发问题(语言-javascript)

Question

jQueryGantt Package 开发问题，有偿，请联系13375571692

Answer 1

引自免费微信小程序：皆我百晓生

在您提供的信息中，看起来像是一个有关于使用jQuery Gantt插件实现多语言支持以及任务管理界面的开发问题。首先，我将解释如何设置多语言，并展示一个基本的示例，然后提供如何根据给定数据构建Gantt图的代码。

1. 多语言支持

要实现多语言支持，你需要准备不同语言版本的字符串文件（例如LocalizedStrings_en.js、LocalizedStrings_zh-CN.js等），并在页面加载时根据用户选择的语言切换相应的字符串。

<script src="LocalizedStrings_en.js"></script>
<script src="LocalizedStrings_zh-CN.js"></script>

<!-- ... -->

<select id="language-select">
    <option value="en">English</option>
    <option value="zh-CN">简体中文</option>
</select>

<script>
$(document).ready(function () {
    var selectedLanguage = localStorage.getItem("selectedLanguage") || "en";
    $("#language-select").val(selectedLanguage);

    $("#language-select").on("change", function () {
        localStorage.setItem("selectedLanguage", $(this).val());
        window.location.reload();
    });

    // Load localized strings based on the selected language
    if (selectedLanguage === "en") {
        $.getScript("LocalizedStrings_en.js");
    } else if (selectedLanguage === "zh-CN") {
        $.getScript("LocalizedStrings_zh-CN.js");
    }
});
</script>

创建一个名为LocalizedStrings_zh-CN.js的文件，其中包含中文本地化字符串：

window.localizedStrings = {
    "taskName": "任务名称",
    "startDate": "开始日期",
    "endDate": "结束日期",
    // ... 其他翻译
};

2. 构建Gantt图

为了使用jQuery Gantt，首先确保已经引入了相关的CSS和JS文件，包括jQuery、moment.js、gantt.js和gantt.css。

接下来，我们定义一个HTML结构用于存放Gantt图，并初始化它：

<div id="gantt"></div>

<script>
// 假设data是你的JSON数据格式
var data = [
    // ...
];

$(document).ready(function () {
    $("#gantt").gantt({
        source: data,
        scale: 'day',
        weekends: true,
        taskOutOfRange: 'hide',
        localization: localizedStrings,
        // 更多配置选项...
    });
});
</script>

这里，我们使用了一个假设的数据结构，你需要将其替换为实际从服务器获取的数据。例如，数据可以是这样的JSON对象数组：

var data = [
    {
        id: 1,
        text: 'Task 1',
        start_date: '2020-02-03T08:00:00',
        duration: 2,
        progress: 0
    },
    {
        id: 2,
        text: 'Task 2',
        start_date: '2020-02-04T00:00:00',
        duration: 2,
        progress: 3 / 10
    },
    // ...其他任务
];

请确保所有的日期都按照ISO 8601格式表示。在这个例子中，我们只展示了基础的配置，你可以根据需要调整更多的选项。更多配置详情请参考官方文档：https://taitems.github.io/jQuery.Gantt/

如果你还有其他问题，比如如何从服务器获取数据，或者如何处理子任务和依赖关系，都可以进一步提问，我会尽力提供帮助。