|
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>
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"}
]
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" }
]
普加甘特图是WEB甘特图首选解决方案。适用于构建项目管理、生产排程等进度计划管理软件。支持任意开发平台和数据库。它是JavaScript开发的，无需安装插件，跨浏览器运行。 基本特性： - JavaScript实现，无需安装插件
- 支持Java、.Net、Php等服务端，支持任意数据库
- 能与jQuery、ExtJS、YUI、Dojo等第三方框架无缝集成
- 兼容IE6+、FireFox、Chrome、Safari等主流浏览器
- 支持导入、导出微软Project项目文件
效果图： 
核心功能： - 高性能：支持大数据量。
- 跟踪甘特图：显示计划与实际日期对比。
- 关键路径显示
- 自定义列：支持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等无缝集成。
功能示例：
甘特图效果截图如下：
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>
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"}
]
|