让你的甘特图能与数据库进行互动

        首先,我这里只是提供一个思路,要彻底的实现还需要一些思考。首先我先静态的实现吧。

        我用的控件是ExtScheduler-2.0.0-trial(点击可下载,也可以自己到百度自己搜一下去),这个里面的甘特图实例还是比较多的,而且这些甘特图不只是显示,还可以自己手动的变动,由于我需要用的只是显示,所以如果用的话我还需要查一下怎样可以让其不能变动。

        将这个文件解压后复制到项目中,在examples文件夹下有好多例子,我对这个控件的学习就是通过这些一个一个demo进行的。

        我需要用到的大概是这样一个甘特图:


不过不同的是最左边的名字显示的是您所选择的日期,而右边蓝色的条条所代表的是,您在机房逗留的时间,这样就有一个问题了。和数据有关的js代码是这样的:

this.scheduler.getResourceStore().loadData([
                {Id : 'r1', Name : '大家好'},
                {Id : 'r2', Name : '琳d达'},
                {Id : 'r3', Name : '晓东'},
                {Id : 'r4', Name : '凯瑞'},
                {Id : 'r5', Name : '杰克'},
                { Id: 'r6', Name: '彼得' }
                
        ]);
这里涉及到一个格式:josn格式,就是类似于k-v格式我感觉,不过这个是一个2维数组。

        在js中与数据库动态的交互,这个我查了半天没有查到,或者说查到了,但是涉及到的东西现在还没有学到,那么怎样将这个实现呢?

        通过查看别的例子,我发现这些数据可以以一种格式放到js文件中(josn格式),然后进行读取。

 var eventStore = new Ext.data.JsonStore({
            model : 'Assignment',
            proxy : {
                type : 'ajax',
                url : 'data.js'
            }
        });
上面的是timegap.js里面读取data.js里面数据的代码,现在需要做的就是在某一个过程里面,将读取到的数据写入这个data.js文件里面,不过需要注意格式。

下面是写入josn格式的代码,不过这样写入文件后是一行,不知道为什么这样不可以!?(求解决)后来我是采用手动控制的方式写入的。

List<Student> students = new List<Student> { 
new Student { ResourceId = "r1", Name = "任务 1", StarDate = "2010-08-14T00:00:00",EndDate="2010-08-15T00:00:00" } , 
new Student {ResourceId = "r2", Name = "任务 6", StarDate = "2010-08-14T00:00:00",EndDate="2010-08-15T00:00:00"}, 
new Student {ResourceId = "r3", Name = "任务 2",StarDate="2010-08-19T00:00:00",EndDate="2010-08-21T00:00:00"} ,
new Student {ResourceId = "r5", Name = "任务 4",StarDate="2010-08-16T00:00:00",EndDate="2010-08-17T00:00:00"} ,
new Student {ResourceId = "r1", Name = "任务 3",StarDate="2010-08-16T00:00:00",EndDate="2010-08-17T00:00:00"} ,
new Student {ResourceId = "r6", Name = "任务 5",StarDate="2010-08-16T00:00:00",EndDate="2010-08-17T00:00:00"} 
};
            JavaScriptSerializer j = new JavaScriptSerializer();
                      
            StreamWriter sw = new StreamWriter(MapPath("..//timegap//data.js"));
            sw.Write(j.Serialize(students));
            sw.Close();
写入之后的效果是这样的:


虽然现在已经是josn格式了,但是不知道为什么不可以,后来我调整了下格式,就可以了,调整之后的样子为:


调整方法很简单,就是加了几个回车而已,这样就可以了,后面的这种实现方式我改了下写入思路,不过这样太麻烦了。

StreamWriter sw = new StreamWriter(MapPath("..//timegap//data.js"));
            
            sw.WriteLine("[");
            sw.Write("{ResourceId: 'r1', Title : '任务 1', StartDate : \"2010-08-14T00:00:00\", EndDate : \"2010-08-15T00:00:00\"}");
            sw.WriteLine(",");
            sw.Write("{ResourceId: 'r2', Title : '任务 6', StartDate : \"2010-08-14T00:00:00\", EndDate : \"2010-08-15T00:00:00\"}");
            sw.WriteLine(",");
            sw.Write("{ResourceId: 'r3', Title : '任务 2', StartDate : \"2010-08-19T00:00:00\", EndDate : \"2010-08-21T00:00:00\"}");
            sw.WriteLine(",");
            sw.Write("{ResourceId: 'r5', Title : '任务 4', StartDate : \"2010-08-16T00:00:00\", EndDate : \"2010-08-17T00:00:00\"}");
            sw.WriteLine(",");
            sw.Write("{ResourceId: 'r1', Title : '任务 3', StartDate : \"2010-08-16T00:00:00\", EndDate : \"2010-08-17T00:00:00\"}");
            sw.WriteLine(",");
            sw.WriteLine("{ResourceId: 'r6', Title : '任务 5', StartDate : \"2010-08-16T00:00:00\", EndDate : \"2010-08-17T00:00:00\"}");
            sw.Write("]");
            sw.Close();
个人感觉,这样的方法不可取,但是因为这个,忙了很长时间,但是没有答案。网上查的说是要用到ajax,想着用个简单的方法,但是这个方法虽然可能实现我想要的方案(尽管比较麻烦),但是他在多用户的操作性上,个人感觉是会受到限制的,因为写的都是一个文件,所以感觉不可取(也欢迎大家给出意见)。

        谁如果有好的甘特图控件或者能够满足我上面的需求的方法,欢迎指导。


  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值