mzgantt 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mzgantt",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "MZGantt is a Gantt chart plugin developed with native js. Various front-end frameworks can be supported, you can quickly apply it to your web applications or mobile applications.",
   "main": "index.js",
   "scripts": {

package/readme.md

@@ -38,9 +38,6 @@ MZGantt支持js引用和npm安装两种使用方式。
     在html页面头部中引入如下js包：
     * 普通js引用:
     ```javascript
-    <!-- 引入jquery库 -->
-    <script language="javascript" src="jquery.min.js"></script>
-
     <!-- 引入甘特图插件 -->
     <link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
     <script language="javascript" src="./gantt/mzgantt.js"></script>
@@ -74,7 +71,7 @@ MZGantt支持js引用和npm安装两种使用方式。
         ganttStatus: "e",                       // 设置甘特图状态（ e:编辑计划, r：只读）
 
         // 表格列配置（甘特图左侧表格部分显示列配置，非甘特图数据格式）
-        columnDefs: [
+        columns: [
             {name: 'seq',         field: "seq",        type:"level"},
             {name: 'checkbox',    field: "checkbox"},
             {name: 'iconColsVal', field: "iconColsVal", width: 30},
@@ -182,11 +179,6 @@ MZGantt支持js引用和npm安装两种使用方式。
         contentHeight: 360,                     // 设置甘特图高度（不含表头）, 默认:300px.如果在页面调用adjustGanttHeight函数使甘特图高度自适应，则次参数可不设置。
         rowHeight: 35,                          // 设置行高度, 默认:35px
 
-        // 左侧列宽度设置，在完善columnDefs后，这部分就可以废弃了。
-        iconColWidth: 30,                       // 设置图标列宽度，默认:60px
-        nameColWidth: 150,                      // 设置任务/资源列宽度，默认:150px
-        dateColWidth: 120,                      // 设置日期列宽度，默认:80px
-
         // 右侧格子宽度设置（不同时间刻度时）
         hourColWidth: 20,                       // 小时刻度时
         dayColWidth: 20,                        // 天刻度时
@@ -880,7 +872,7 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
 4. 属性设置
     |<div style="width:100px">方法/div>|<div style="width:354px">说明</div>|<div style="width:215px">参数</div>|
     |----| ----|----|
-    |setBulkMoveType|同步移动方式设置|D（关联任务）<br>P（按责任人）<br>N（所有后续任务）|
+    |setLinkUpdMode|设置任务拖拽时的联动方式|<b>参数格式如下：</b><br>`myGantt.setLinkUpdMode({mode: "D", barColor: "#FF7575"})`<br>具体说明：<br> <b>联动方式(mode)</b>：<br>&nbsp;&nbsp;&nbsp;&nbsp;D（按任务依赖关系，默认值。）<br>&nbsp;&nbsp;&nbsp;&nbsp;P（按责任人）<br>&nbsp;&nbsp;&nbsp;&nbsp;N（所有后续任务）<br><b>进度条标记颜色值(barColor)</b>|
     |setGanttStatus|设置甘特图编辑状态|参数：状态字符（r: 只读；e:编辑）<br>。字符串类型|
     |setColEditable|动态设置列 可编辑/只读|参数：键值对象(列名name:true/false)。<br>例：{'planStart':false,'planEnd':false}<br>true:可编辑；false：只读|
     |setStartEndDate|设置项目起止日|参数1：开始日。字符串类型<br>参数2：结束日。字符串类型<br>参数3：是否锁定日期范围(true/false)。字符串类型|
@@ -897,13 +889,13 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
 6. 过滤器
     |<div style="width:170px">方法</div>| <div style="width:592px">说明</div>
     |----| ----|
-    addFilter|设置条件对数据进行过滤。示例：<br>` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")`
-    removefilter|移除过滤器，恢复数据显示。示例：<br>`MZGantt.removefilter()`
+    |addFilter|设置条件对数据进行过滤。示例：<br>` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")`
+    |removefilter|移除过滤器，恢复数据显示。示例：<br>`MZGantt.removefilter()`
 
 7. 导出图片
     |<div style="width:170px">方法</div>| <div style="width:190px">说明</div>| <div style="width:375px">参数</div>
     |----| ----|----|
-    exportGanttImg |存为图片| 无
+    |exportGanttImg |存为图片|参数1：标题高度(titleHeight), 参数2：标题文字(titleStr)
 
 8. 事件监听
     |<div style="width:230px">事件名称</div>| <div style="width:560px">说明</div>|
@@ -942,11 +934,11 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
     进入下载： <a href="https://gitee.com/tecjt_home/mzgantt_js">MZGantt甘特图插件（普通js版）</a>
     或者使用CDN：
     ```
-    <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.css" />
-    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.js"></script>
-    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/edit.js"></script>
-    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/export.js"></script>
-    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mobile.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mzgantt.css" />
+    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mzgantt.js"></script>
+    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/edit.js"></script>
+    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/export.js"></script>
+    <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mobile.js"></script>
     ```
 
 2. npm版（支持vue等）：直接使用npm命令安装即可。

package/sample/sample.html

@@ -100,16 +100,16 @@
     <div class="scale-container">
         Time Scale:
         <input type="radio" name="radFormat" id="r_day" onclick='myGantt.changeFormat("day")' value="day" checked>
-        <label for="r_day">Week/Day</label>
+        <label for="r_day">Day</label>
 
         <input type="radio" name="radFormat" id="r_week" onclick='myGantt.changeFormat("week")' value="week">
-        <label for="r_week">Year/Week</label>
+        <label for="r_week">Week</label>
 
         <input type="radio" name="radFormat" id="r_month" onclick='myGantt.changeFormat("month")' value="month">
-        <label for="r_month">Year/Month</label>
+        <label for="r_month">Month</label>
 
         <input type="radio" name="radFormat" id="r_quarter" onclick='myGantt.changeFormat("quarter")' value="quarter">
-        <label for="r_quarter">Year/Quarter</label>
+        <label for="r_quarter">Quarter</label>
 
         &nbsp;&nbsp;&nbsp;&nbsp;
         <input type="checkbox" id="_show_actual" onclick="showRslt()" checked>
@@ -165,8 +165,8 @@
             holidayList: ['2023-02-09', '2023-02-21', '2023-03-20'],
             workdayList: ['2023-03-18'],
             mileStoneLines: [
-                {date: '2023-07-05', name: 'startMS', title: 'Project Design Discussion', color: '#FF00BF', thickness: "2px"},
-                {date: '2023-07-16', name: 'pjMeeting', title: 'Code Review', color: '#088A29', thickness: "2px"},
+                {date: '2023-07-09', name: 'startMS', title: 'Project Design Discussion', color: '#FF00BF', thickness: "2px"},
+                {date: '2023-08-01', name: 'pjMeeting', title: 'Code Review', color: '#088A29', thickness: "2px"},
                 {date: 'today', name: 'today', title: 'Today', color: '#FF0000', thickness: "2px"}
             ],
 
@@ -210,8 +210,8 @@
             contentHeight: 500,
             rowHeight: 35,
             dayColWidth: 20,
-            monthColWidth: 70,
-            quarterColWidth: 100
+            monthColWidth: 280,
+            quarterColWidth: 460
         };
 
         // Sample task data
@@ -241,7 +241,7 @@
             {
                 id: 11,
                 seq: 2000,
-                name: "Task Name wzf",
+                name: "Task Name 001",
                 plan: [{start: "2023-07-05", end: "2023-07-06", dur: 10}],
                 rsltStart: "2023-07-14",
                 rsltEnd: "2023-07-15",
@@ -262,7 +262,7 @@
             {
                 id: 12,
                 seq: 3000,
-                name: "Task Name 222222",
+                name: "Task Name 002",
                 plan: [{start: "", end: ""}],
                 rsltStart: "2023-07-10",
                 rsltEnd: "2023-07-20",