JQuery Gantt package to create a new ASP.NET project

roffey 2021-02-23 16:49:10
jquery gantt package create new


jQuery Gantt Package It's a real cross platform , be based on HTML5 / jQuery Local implementation of , have 2 Different gantt The widget , Can satisfy you all based on gantt Visual requirements of . Also with ASP.NET WebControl and MVC Expand , It can be easily integrated into existing applications .

Click to download jQuery Gantt Package Trial version

stay Visual Studio Create a new ASP.NET project :

VS 2012 :FILE --> New --> Project --> Installed --> Templates --> Other Language --> TypeScript, Create a project .

The Gantt bag includes the necessary Gantt TypeScript Interface , To help you develop your Web Applications , Just like other type safe languages , Compile time check .

1) Gantt Widget Source code JS file

First , You need what the Gantt widget needs JS Source file . These documents are < The installation path >/Src In the folder . Copy this folder to the Project In the folder ( Although the size of this folder is very large , But it contains everything Themes、locales Wait for what you need CSS etc. , Not all CSS Will be loaded into your page ).

Continue to delete this Src In a folder bin Folder .

Then click in the solution explorer of the project " Display all files " Toolbar item to display the newly included Src Folder , And include it in the project .

2) practical JS Sample documents

Some with practical functions JS file , Can be embedded in the grid editing and so on , These documents are <install path>/Samples/Scripts In the folder . Put the... In the above installation path Scripts Copy the contents of the folder to your project folder Scripts In the folder ( When you create a new project , The project folder will automatically create a Scripts Folder ).
Then follow the steps in the previous step to include the newly added script file in your project .

3) JSON Data samples

Create a SampleData.json file , It contains a list of sample tasks to display in the Gantt Chart .

SampleData.json Content :

[{
"Name" : "Task 1",
"ID" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "8:00:00",
"Description" : "Description of Task 1"
},
{
"Name" : "Task 2",
"ID" : 2,
"PredecessorIndices" : "1",
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 2"
},
{
"Name" : "Task 3",
"ID" : 3,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "1.12:30:00",
"ProgressPercent" : 90,
"Description" : "Description of Task 3"
},
{
"Name" : "Child Task 1",
"ID" : 4,
"IndentLevel" : 1,
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "8:00:00",
"ProgressPercent" : 75,
"Description" : "Description of Task 3/Child Task 1"
},
{
"Name" : "Child Task 2",
"ID" : 5,
"IndentLevel" : 1,
"PredecessorIndices" : "4+8",
"Description" : "Description of Task 3/Child Task 2"
},
{
"Name" : "Grand Child Task 1",
"ID" : 6,
"IndentLevel" : 2,
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "8:00:00",
"Description" : "Description of Task 3/Child Task 1/Grand Child 1"
},
{
"Name" : "Grand Child Task 2",
"ID" : 7,
"IndentLevel" : 2,
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 3/Child Task 1/Grand Child 2"
},
{
"Name" : "Child Task 3",
"ID" : 8,
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 3/Child Task 3"
},
{
"Name" : "Task 4",
"ID" : 9,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "00:00:00",
"ProgressPercent" : 60,
"Description" : "Description of Task 4"
},
{
"Name" : "Task 5",
"ID" : 10,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "8:00:00",
"PredecessorIndices" : "3+8",
"Description" : "Description of Task 5"
},
{
"Name" : "Child Task 1",
"ID" : 11,
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 5/Child Task 1"
},
{
"Name" : "Child Task 2",
"ID" : 12,
"PredecessorIndices" : "11SS",
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "8:00:00",
"Description" : "Description of Task 5/Child Task 2"
},
{
"Name" : "Task 6",
"ID" : 13,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "1.16:00:00",
"Description" : "Description of Task 6"
},
{
"Name" : "Child Task 1",
"ID" : 14,
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "1.20:00:00",
"Description" : "Description of Task 6/Child Task 1"
},
{
"Name" : "Grand Child Task 1",
"ID" : 15,
"StartTime" : "2012-02-04T00:00:00Z",
"Effort" : "1.00:00:00",
"IndentLevel" : 2,
"Description" : "Description of Task 6/Child Task 2"
}]

4) Contains the Gantt widget HTML file

Create a new... In your project HTML file , And reference the following source file . Remember to link to the correct version of... In the last reference below RadiantQ jQuery Gantt.

<head>
<title></title>
<link href="Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Src/Styles/radiantq.gantt.default.css" rel="stylesheet" />
<link href="Src/Styles/VW.Grid.css" rel="stylesheet" />
<script src="Src/Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Src/Scripts/jquery.layout-latest.min.js"></script>
<script src="Src/Scripts/Utils/date.js" type="text/javascript"></script>
<script src="Src/ResourceStrings/en-US.js" type="text/javascript"></script>
<script src='Src/Scripts/VW.Grid.1.min.js' type='text/javascript'></script>
<script src='Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js' type='text/javascript'></script>
</head>
<body>
<div id="pagecontent" style="height: 600px;">
<div id="gantt_container" style="height: 100%;">
</div>
</div>
</body>

5)TypeScript file

In your project , In the HTML Add a new one next to TypeScript file (myApp.ts), And reference html Results in js.

<head>
other script fils.
<script src=myApp.js type='text/javascript'></script>
</head>

6) stay TypeScript Create... In the file Ganttcontrol The widget .

$.ajax({
type: "GET",
dataType: 'json',
url: 'GanttControlSkeleton.json',
converters:
{
"text json": function (data) {
//console.log(data);
return $.parseJSON(data, true
/*converts date strings to date objects*/
, true
/*converts ISO dates to local dates*/
);
}
},
success: function (data) {
loadGantt(data);
}
});
function loadGantt(datasourcejson) {
var columns = [
{
field: "Activity_M().ID_M()",
title: "ID",
width: 20
},
{
field: "Activity_M().ActivityName_M()",
title: "Activity Name",
width: 200,
editor: RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(),
template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()
},
{
field: "Activity_M().StartTime_M()",
title: "StartTime",
width: 100,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind=' ValueBinder.ActivityTimeBinder:Activity_M().StartTime_M' />"
},
{
field: "Activity_M().EndTime_M()",
title: "EndTime",
width: 100,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind='value:Activity_M().EndTime_M' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onBlur' data-role=\"DateTimePicker\" />"
},
{
field: "Activity_M().Effort_M()",
title: "Effort",
format: "" /*to call the .toString()*/,
width: 100,
editor: "<input data-bind='value:Activity_M().Effort_M' style='height:18px' data-role=\"DurationPicker\" />"
},
{
field: "Activity_M().ProgressPercent_M()",
title: "ProgressPercent",
width: 100,
editor: "<input style='height:18px' data-bind='value:Activity_M().ProgressPercent_M' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"
},
{
field: "Activity_M().Assignments_M()",
title: "Assignments",
iseditable: false,
template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',
width: 200
},
{
field: "Activity_M().PredecessorIndexString_M()",
title: "PredecessorIndex",
template: "<div>${data.PredecessorIndexString || '' }</div>",
editor: "<input data-bind='value:PredecessorIndexString'/>",
width: 150
}
];
var ganttControl: GanttControl;
var anchorTime = datasourcejson[0].StartTime["clone"]();
var $gantt_container = $('#gantt_container');
$gantt_container.GanttControl({
ProjectStartDate: anchorTime,
DataSource: datasourcejson,
GanttTableOptions: {
columns: columns
},
IDBinding: new RadiantQ.BindingOptions("ID"),
NameBinding: new RadiantQ.BindingOptions("Name"),
IndentLevelBinding: new RadiantQ.BindingOptions("IndentLevel"),
StartTimeBinding: new RadiantQ.BindingOptions("StartTime"),
EffortBinding: new RadiantQ.BindingOptions("Effort"),
PredecessorIndicesBinding: new RadiantQ.BindingOptions("PredecessorIndices"),
ProgressPercentBinding: new RadiantQ.BindingOptions("ProgressPercent"),
DescriptionBinding: new RadiantQ.BindingOptions("Description"),
TimeRangeHighlightBehavior: RadiantQ.Gantt.TimeRangeHighlightBehavior.HighlightInChartOnHeaderMouseHover,
GanttChartTemplateApplied: function (sender , args) {
ganttControl = <GanttControl>$gantt_container.data("GanttControl");
var $ganttChart = args.element;
$ganttChart.GanttChart({ AnchorTime: anchorTime });
}
});
};

Last , Look at the theme , Tell you how to clean up the Src Folder , Delete unnecessary files .

Related product introduction :

VARCHART XGantt Support ActiveX、.Net Equal platform C# Gantt chart control
AnyGantt Ideal tool for building complex and rich Gantt charts
phGantt Time Package A Gantt chart for the management of assignments and time
dhtmlxGantt Interactive JavaScript / HTML5 Gantt Chart

APS It's Huidu technology 15 Years of industry experience and technology precipitation , By connecting enterprises to receive orders 、 purchase 、 manufacture 、 The whole supply chain process, such as warehousing and logistics , Help to improve the production efficiency of enterprises .>> see APS Details

版权声明
本文为[roffey]所创,转载请带上原文链接,感谢
https://javamana.com/2021/02/20210223164555148r.html

  1. k8s-prometheus
  2. Linux Disk Command
  3. Linux FS
  4. 使用docker-compose &WordPress建站
  5. Linux Command
  6. This time, thoroughly grasp the depth of JavaScript copy
  7. Linux Disk Command
  8. Linux FS
  9. Using docker compose & WordPress to build a website
  10. Linux Command
  11. 摊牌了,我 HTTP 功底贼好!
  12. shiro 报 Submitted credentials for token
  13. It's a showdown. I'm good at it!
  14. Shiro submitted credentials for token
  15. Linux Stress test
  16. Linux Root Disk Extension
  17. Linux Stress test
  18. Linux Root Disk Extension
  19. Redis高级客户端Lettuce详解
  20. springboot学习-综合运用(一)
  21. 忘记云服务器上MySQL数据库的root密码时如何重置密码?
  22. Detailed explanation of lettuce, an advanced client of redis
  23. Springboot learning integrated application (1)
  24. Linux File Recover
  25. Linux-Security
  26. How to reset the password when you forget the root password of MySQL database on the cloud server?
  27. Linux File Recover
  28. Linux-Security
  29. LiteOS:盘点那些重要的数据结构
  30. Linux Memory
  31. Liteos: inventory those important data structures
  32. Linux Memory
  33. 手把手教你使用IDEA2020创建SpringBoot项目
  34. Hand in hand to teach you how to create a springboot project with idea2020
  35. spring boot 整合swagger2生成API文档
  36. Spring boot integrates swagger2 to generate API documents
  37. linux操作系统重启后 解决nginx的pid消失问题
  38. Solve the problem of nginx PID disappearing after Linux operating system restart
  39. JAVA版本号含义
  40. The meaning of java version number
  41. 开源办公开发平台丨Mysql5.7两套四节点主从结构环境搭建教程(二)
  42. 开源办公开发平台丨Mysql5.7两套四节点主从结构环境搭建教程(一)
  43. Open source office development platform mysql5.7 two sets of four node master-slave structure environment building tutorial (2)
  44. HTTP的“无状态”和REST的“状态转换”
  45. Open source office development platform mysql5.7 two sets of four node master-slave structure environment building tutorial (1)
  46. 【大数据哔哔集20210128】使用Hive计算环比和同比
  47. 【大数据哔哔集20210125】Kafka将逐步弃用对zookeeper的依赖
  48. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  49. 【大数据哔哔集20210123】别问,问就是Kafka高可靠
  50. Spring 事务、异步和循环依赖有什么关系?
  51. Spring 动态代理时是如何解决循环依赖的?为什么要使用三级缓存?
  52. "Stateless" of HTTP and "state transition" of rest
  53. [big data bibiji 20210128] use hive to calculate month on month and year on year
  54. [big data bibiji 20210125] Kafka will gradually abandon its dependence on zookeeper
  55. [big data beeps 20210124] someone asked me about Kafka leader election? I'm not in a panic
  56. [big data bibiji 20210123] don't ask, ask is Kafka highly reliable
  57. jQuery Gantt Package 在Visual Studio中创建一个新的ASP.NET项目
  58. What is the relationship between spring transactions, asynchrony, and circular dependencies?
  59. How to solve circular dependency in spring dynamic proxy? Why use level 3 caching?
  60. Unicode码的二进制转换(Java)