grid

grid

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks

2012年12月28日 #

Pager:分页控件
                
            
                     

参考示例Pager:分页控件


            
           

创建代码   

<div class="mini-pager" style="width:600px;background:#ccc;" 
    totalCount="123" onpagechanged="onPageChanged" sizeList="[5,10,20,100]"
    showTotalCount="true"
    >        
</div>    
<script type="text/javascript">
    function onPageChanged(e) {
        alert(e.pageIndex+":"+e.pageSize);
    }       
</script>

          
posted @ 2013-01-06 17:05 nikofan 阅读(2150) | 评论 (0)编辑 收藏

OutlookTree:折叠树
                
            
                  

参考示例OutlookTree:折叠树


                       

创建OutlookTree     

<div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect"
    textField="text" idField="id" parentField="pid">
</div>
          

数据格式

[
    {id: "user", text: "用户管理"},
        
    {id: "lists", text: "Lists", pid: "user" },
            
    {id: "datagrid", text: "DataGrid", pid: "lists"},            
    {id: "tree", text: "Tree" , pid: "lists"},
    {id: "treegrid", text: "TreeGrid " , pid: "lists"},
        
    {id: "layouts", text: "Layouts", expanded: false, pid: "user"},
        
    {id: "panel", text: "Panel", pid: "layouts"},
    {id: "splitter", text: "Splitter", pid: "layouts"},
    {id: "layout", text: "Layout ", pid: "layouts"},
        
    { id: "right", text: "权限管理"},
        
    {id: "base", text: "Base", expanded: false, pid: "right" },
                
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    {id: "date", text: "Date", pid: "base"},
        
    {id: "forms", text: "Forms", expanded: false, pid: "right"},
                
    {id: "button", text: "Button", pid: "forms"},
    {id: "listbox", text: "ListBox", pid: "forms"},
    {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    {id: "radiolist", text: "RadioList", pid: "forms"},
    {id: "calendar", text: "Calendar", pid: "forms"}                
]
posted @ 2013-01-05 17:07 nikofan 阅读(1830) | 评论 (0)编辑 收藏

OutlookMenu:折叠菜单
                
                                

参考示例OutlookMenu:折叠菜单

        
           

创建OutlookMenu        

<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect"
    idField="id" parentField="pid" textField="text">
</div>

           

数据结构

[
    { id: "user", text: "用户管理"},
    { id: "addUser", pid: "user", text: "增加用户", iconCls: "icon-add", url: "../navbartree/navbartree.html" },
    { id: "editUser", pid: "user", text: "修改用户", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },
    { id: "removeUser", pid: "user", text: "删除用户", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },
        
    { id: "right", text: "权限管理"},
    { id: "addRight", pid: "right", text: "查询权限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },
    { id: "editRight", pid: "right", text: "操作权限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }        
]
posted @ 2013-01-04 16:23 nikofan 阅读(2100) | 评论 (0)编辑 收藏

普加甘特图是WEB甘特图首选解决方案。适用于构建项目管理、生产排程等进度计划管理软件。支持任意开发平台和数据库。它是JavaScript开发的,无需安装插件,跨浏览器运行。

基本特性

  • JavaScript实现,无需安装插件
  • 支持Java、.Net、Php等服务端,支持任意数据库
  • 能与jQuery、ExtJS、YUI、Dojo等第三方框架无缝集成
  • 兼容IE6+、FireFox、Chrome、Safari等主流浏览器
  • 支持导入、导出微软Project项目文件

效果图:

Web甘特图

核心功能:

  • 高性能:支持大数据量。
  • 跟踪甘特图:显示计划与实际日期对比。
  • 关键路径显示
  • 自定义列:支持String、Boolean、Date、Number、Array等多种数据类型。
  • 支持4种任务关系:SS、SF、FF、FS。
  • 权限编辑控制:可根据权限精确控制单元格编辑、条形图拖拽。
  • 懒加载显示:通过分级加载模式,能支持超大数据量显示。
  • 单元格编辑:支持TextBox、Spinner、DatePicker、ComboBox、TreeSelect以及自定义编辑器。
  • 可拖拽调节条形图
  • 丰富的时间线刻度:支持年、半年、季度、月、周、日、时、分、秒。
  • 支持右键菜单:可以控制右键菜单项是否显示、是否禁用。
  • 无需安装浏览器插件
  • 跨浏览器支持:支持IE6+、FireFox、Opera、Chrome、Safari。
  • 跨服务端平台支持:支持.Net、Java、PHP、ASP等开发平台。
  • 语言本地化:轻松实现多国语言本地化,如英语、汉语、日语、德语、法语等任何语言。
  • 与第三方框架集成:能轻松与jQuery、ExtJS、YUI、Prototype.js等无缝集成。

功能示例:


甘特图效果截图如下:
 
基本甘特图
Web甘特图

排程甘特图: 左侧表格区,单元格右上角红色三角块,表示被修改。
排程甘特图

跟踪甘特图:实现实际与计划日期的对比。
跟踪甘特图

关键路径甘特图:关键路径的工期决定了整个项目的工期。
关键路径甘特图

任务面板
任务面板

项目日历面板
日历面板

多国语言本地化
多国语言本地化
posted @ 2012-12-31 21:09 nikofan 阅读(3247) | 评论 (0)编辑 收藏

OutlookBar:折叠面板组
            
                      

参考示例OutlookBar:折叠面板组


                    

创建OutlookBar   

<div id="outlookbar1" class="mini-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true">
    <div title="权限管理">            
        1
    </div>
    <div title="用户管理">
        2
    </div>
</div>
posted @ 2012-12-31 10:41 nikofan 阅读(2341) | 评论 (1)编辑 收藏

Tabs:懒加载页面
                                  

参考示例Tabs:懒加载页面


                     

创建Tabs

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>

                   

数据结构      

通过url返回的数据结构如下:

[
    {title: "Tab1", url: "../tabs/pages/page1.html", refreshOnClick: true},
    {title: "Tab2", url: "../tabs/pages/page2.html", showCloseButton: true},
    {title: "Tab3", url: "../tabs/pages/page3.html"},
    {title: "Tab4", url: "../tabs/pages/page4.html"},
    {title: "Tab5", url: "../tabs/pages/page5.html"}
]
posted @ 2012-12-28 15:12 nikofan 阅读(2921) | 评论 (0)编辑 收藏