实现效果
请求参数(tasks.txt)
[{
"UID": "1",
"Name": "项目范围规划",
"Duration": 8,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-10T00:00:00",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": [],
"ParentTaskUID": -1
},
{
"UID": "2",
"Name": "确定项目范围",
"Duration": 1,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-01T23:23:59",
"PercentComplete": 30,
"Summary": 0,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": [],
"ParentTaskUID": "1"
},
{
"UID": "3",
"Name": "获得项目所需资金",
"Duration": 2,
"Start": "2007-01-02T00:00:00",
"Finish": "2007-01-03T23:23:59",
"PercentComplete": 60,
"Summary": 0,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": [{
"Type": 1,
"PredecessorUID": "2"
}],
"ParentTaskUID": "1"
},
{
"UID": "4",
"Name": "定义预备资源",
"Duration": 2,
"Start": "2007-01-04T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 40,
"Summary": 0,
"Critical": 1,
"Milestone": 0,
"PredecessorLink": [{
"Type": 1,
"PredecessorUID": "3"
}],
"ParentTaskUID": "1"
},
{
"UID": "5",
"Name": "获得核心资源",
"Duration": 2,
"Start": "2007-01-08T00:00:00",
"Finish": "2007-01-09T23:23:59",
"PercentComplete": 90,
"Summary": 0,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": [{
"Type": 1,
"PredecessorUID": "4"
}],
"ParentTaskUID": "1"
},
{
"UID": "6",
"Name": "完成项目范围规划",
"Duration": 0,
"Start": "2007-01-10T00:00:00",
"Finish": "2007-01-10T00:00:00",
"PercentComplete": 10,
"Summary": 0,
"Critical": 0,
"Milestone": 1,
"PredecessorLink": [{
"Type": 1,
"PredecessorUID": "5"
}],
"ParentTaskUID": "1"
},
{
"UID": "7",
"Name": "分析/软件需求",
"Duration": 20,
"Start": "2007-01-11T00:00:00",
"Finish": "2007-02-07T00:00:00",
"PercentComplete": 40,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": [],
"ParentTaskUID": -1
},
{
"UID": "8",
"Name": "行为需求分析",
"Duration": 6,
"Start": "2007-01-11T00:00:00",
"Finish": "2007-01-18T23:23:59",
"PercentComplete": 50,
"Summary": 0,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": [{
"Type": 1,
"PredecessorUID": "6"
}],
"ParentTaskUID": "7"
},
{
"UID": "86",
"Name": "软件开发模板结束",
"Duration": 0,
"Start": "2007-07-31T00:00:00",
"Finish": "2007-07-31T00:00:00",
"PercentComplete": 0,
"Summary": 0,
"Critical": 0,
"Milestone": 1,
"PredecessorLink": [{
"Type": 1,
"PredecessorUID": "85"
}],
"ParentTaskUID": -1
}]
HTML
<div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;"
url="../data/tasks.txt" showTreeIcon="true" treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false">
<div property="columns">
<div type="indexcolumn"></div>
<div name="taskname" field="Name" width="200">任务名称</div>
<div field="Duration" width="100">工期</div>
<div field="Start" width="100" dateFormat="yyyy-MM-dd">开始日期</div>
<div field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</div>
</div>
</div>
关键点
- tasks.txt内容格式为json数组,当某个json对象的
ParentTaskUID
字段值为上个对象UID
字段值时,其为上个对象的子节点。 html的div属性
idField="UID"
,parentField="ParentTaskUID"
,前者设置整个treegrid每一行主键值,后者设置每一行父节点对应值。
idField
和parentField
的定义都可以自定义,最好是对象里面的主键等不重复且无中文字段。