前台UI组件说明文档

文章内索引
[显示]

 

 

前台UI组件说明文档

 

发布日期 2015.03.27
控制级别 内部资料
制定部门 平台组

 

  • 文档属性
属性 内容
u 用户名称： u
u 文档标题： u 前台UI组件说明文档
u 文档编号： u
u 版本日期： u 2015.03.27
u 发布版本： u V1.0
u 适用范围： u 项目组所有成员
u 作者： u 胡翰林

 

  • 文档审批
审批人 职务 审批时间 审批意见 发文编号
u u u u u
u u u u u

 

  • 修订内容
版本 修正章节 日期 修正人 变更记录
u v1.0 u 创建文档 u 2015-3-27 u 胡翰林 u
u u u u u
u u u u u
u u u u u

 

  • 模板修订历史
版本 生效时间 变更概要 作者 审核 批准
u u u u u u
u u u u u u
u u u u u u
u u u u u u

 

前言

目的

本文档依据DSS及ITN前台改造需求而编写。该文档主要作用是明确前台组件的应用方式，为项目的实施提供技术支持与依据，保障项目的各个指标能够正常完成。

预期读者

本文档预期读者为项目组所有成员，包括：系统架构人员、系统开发人员、系统运维人员、系统测试人员等。

术语定义

简称/术语 说明

 

参考资料

序号 文档名称 版本号 来源 作者
1 easyUI 官方文档

 

概述

目标

以改造DSS与ITN为前提下抽取出公共组件，便于其他项目复用。

约束

需支持低版本浏览器（IE5，IE8）

 

组件说明

表格（grid）

功能描述：

以表格的形式展现数据，支持多选、单选、行编辑、分页、排序、自动缩进列宽、自定义列样式等功能。

示例

 

 

  1. <tableid=”tt”></table>

 

  1. $(‘#tt’).datagrid({
  2. url:’datagrid_data.json’,
  3. columns:[[
  4. {field:’code’,title:’Code’,width:100},
  5. {field:’name’,title:’Name’,width:100},
  6. {field:’price’,title:’Price’,width:100,align:’right’}
  7. ]]
  8. });

 

属性

名称 类型 说明 默认值
columns array datagrid 的 column 的配置对象，更多详细请参见 column 的特性。 null
frozenColumns array 和列的特性一样，但是这些列将被冻结在左边。 null
fitColumns boolean True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 false
striped boolean True 就把行条纹化。（即奇偶行使用不同背景色） false
method string 请求远程数据的 method 类型。 post
nowrap boolean True 就会把数据显示在一行里。 true
idField string 标识字段。 null
url string 从远程站点请求数据的 URL。 null
loadMsg string 当从远程站点加载数据时，显示的提示信息。 Processing, please wait …
pagination boolean True 就会在 datagrid 的底部显示分页栏。 false
rownumbers boolean True 就会显示行号的列。 false
singleSelect boolean True 就会只允许选中一行。 false
pageNumber number 当设置了 pagination 特性时，初始化页码。 1
pageSize number 当设置了 pagination 特性时，初始化页码尺寸。 10
pageList array 当设置了 pagination 特性时，初始化页面尺寸的选择列表。 [10,20,30,40,50]
queryParams object 当请求远程数据时，发送的额外参数。 {}
sortName string 定义可以排序的列。 null
sortOrder string 定义列的排序顺序，只能用 ‘asc’ 或 ‘desc’。 asc
remoteSort boolean 定义是否从服务器给数据排序。 true
showFooter boolean 定义是否显示一行页脚。 false
rowStyler function 返回例如 ‘background:red’ 的样式，该函数需要两个参数：
rowIndex： 行的索引，从 0 开始。
rowData： 此行相应的记录。
loadFilter function 返回过滤的数据去显示。这个函数需要一个参数 ‘data’ ，表示原始数据。

你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有 ‘total’ 和 ‘rows’ 特性。
editors object 定义编辑行时的 editor 。 预定义的 editor
view object 定义 datagrid 的 view 。 默认的 view

 

方法

名称 参数 说明
options none 返回 options 对象。
getPager none 返回 pager 对象。
getPanel none 返回 panel 对象。
getColumnFields frozen 返回列的字段，如果 frozen 设定为 true，冻结列的字段被返回。
getColumnOption field 返回指定列的选项。
resize param 调整尺寸和布局。
load param 加载并显示第一页的行，如果指定 param 参数，它将替换 queryParams 特性。
reload param 重新加载行，就像 load 方法一样，但是保持在当前页。
reloadFooter footer 重新加载脚部的行。
loading none 显示正在加载状态。
loaded none 隐藏正在加载状态。
fitColumns none 使列自动展开/折叠以适应 datagrid 的宽度。
fixColumnSize none 固定列的尺寸。
fixRowHeight index 固定指定行的高度。
loadData data 加载本地数据，旧的行会被移除。
getData none 返回加载的数据。
getRows none 返回当前页的行。
getFooterRows none 返回脚部的行。
getRowIndex row 返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。
getSelected none 返回第一个选中的行或者 null。
getSelections none 返回所有选中的行，当没有选中的记录时，将返回空数组。
clearSelections none 清除所有的选择。
selectAll none 选中当前页所有的行。
unselectAll none 取消选中当前页所有的行。
selectRow index 选中一行，行索引从 0 开始。
selectRecord idValue 通过 id 的值做参数选中一行。
unselectRow index 取消选中一行。
beginEdit index 开始对一行进行编辑。
endEdit index 结束对一行进行编辑。
cancelEdit index 取消对一行进行编辑。
getEditors index 获取指定行的编辑器们。每个编辑器有下列特性：
actions：编辑器能做的动作们。
target：目标编辑器的 jQuery 对象。
field：字段名。
type：编辑器的类型。
getEditor options 获取指定的编辑器， options 参数包含两个特性：
index：行的索引。
field：字段名。
refreshRow index 刷新一行。
validateRow index 验证指定的行，有效时返回 true。
updateRow param 更新指定的行， param 参数包含下列特性：
index：更新行的索引。
row：行的新数据。
appendRow row 追加一个新行。
insertRow param 插入一个新行， param 参数包括下列特性：
index：插入进去的行的索引，如果没有定义，就追加此新行。
row：行的数据。
deleteRow index 删除一行。
getChanges type 获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。

当 type 参数没有分配时，返回所有改变的行。
acceptChanges none 提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。
rejectChanges none 回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。
mergeCells options 把一些单元格合并为一个单元格，options 参数包括下列特性：
index：列的索引。
field：字段名。
rowspan：合并跨越的行数。
colspan：合并跨越的列数。
showColumn field 显示指定的列。
hideColumn field 隐藏指定的列。

 

事件

名称 参数 说明
onLoadSuccess data 当数据加载成功时触发。
onLoadError none 加载远程数据发生某些错误时触发。
onBeforeLoad param 发送加载数据的请求前触发，如果返回 false加载动作就会取消。
onClickRow rowIndex, rowData 当用户点击一行时触发，参数包括：
rowIndex：被点击行的索引，从 0 开始。
rowData：被点击行对应的记录。
onDblClickRow rowIndex, rowData 当用户双击一行时触发，参数包括：
rowIndex：被双击行的索引，从 0 开始。
rowData：被双击行对应的记录。
onClickCell rowIndex, field, value 当用户单击一个单元格时触发。
onDblClickCell rowIndex, field, value 当用户双击一个单元格时触发。
onSortColumn sort, order 当用户对一列进行排序时触发，参数包括：
sort：排序的列的字段名
order：排序的列的顺序
onResizeColumn field, width 当用户调整列的尺寸时触发。
onSelect rowIndex, rowData 当用户选中一行时触发，参数包括：
rowIndex：选中行的索引，从 0 开始
rowData：选中行对应的记录
onUnselect rowIndex, rowData 当用户取消选择一行时触发，参数包括：
rowIndex：取消选中行的索引，从 0 开始
rowData：取消选中行对应的记录
onSelectAll rows 当用户选中全部行时触发。
onUnselectAll rows 当用户取消选中全部行时触发。
onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
onAfterEdit rowIndex, rowData, changes 当用户完成编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
changes：更改的字段/值对
onCancelEdit rowIndex, rowData 当用户取消编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
onHeaderContextMenu e, field 当 datagrid 的头部被右键单击时触发。
onRowContextMenu e, rowIndex, rowData 当右键点击行时触发。

 

 

列（Column）的特性

  1. columns:[[
  2. {field:’itemid’,title:’Item ID’,rowspan:2,width:80,sortable:true},
  3. {field:’productid’,title:’Product ID’,rowspan:2,width:80,sortable:true},
  4. {title:’Item Details’,colspan:4}
  5. ],[
  6. {field:’listprice’,title:’List Price’,width:80,align:’right’,sortable:true},
  7. {field:’unitcost’,title:’Unit Cost’,width:80,align:’right’,sortable:true},
  8. {field:’attr1′,title:’Attribute’,width:100},
  9. {field:’status’,title:’Status’,width:60}
  10. ]]
名称 类型 说明 默认值
title string 列的标题文字。 undefined
field string 列的字段名。 undefined
width number 列的宽度。 undefined
rowspan number 指一个单元格占据多少行。 undefined
colspan number 指一个单元格占据多少列。 undefined
align string 指如何对齐此列的数据，可以用 ‘left’、’right’、’center’。 undefined
sortable boolean True 就允许此列被排序。 undefined
resizable boolean True 就允许此列被调整尺寸。 undefined
hidden boolean True 就隐藏此列。 undefined
checkbox boolean True 就显示 checkbox。 undefined
formatter function 单元格的格式化函数，需要三个参数：
value： 字段的值。
rowData： 行的记录数据。
rowIndex： 行的索引。		 undefined
styler function 单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如 ‘background:red’ 。此函数需要三个参数：
value： 字段的值。
rowData： 行的记录数据。
rowIndex： 行的索引。		 undefined
sorter function 自定义字段的排序函数，需要两个参数：
a： 第一个字段值。
b： 第二个字段值。		 undefined
editor string,object 指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性：
type：string，编辑类型，可能的类型是：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options：对象，编辑类型对应的编辑器选项。		 undefined

 

 

Demo 截图：

树（tree）

功能描述：

以树的形式展现数据，支持多选、单选、自定义图片等功能。

示例

  1. <ulid=”tt”></ul>

 

  1. $(‘#tt’).tree({
  2. url:’tree_data.json’
  3. });

 

每个节点可以包含下列特性：

  • id：节点的 id，它对于加载远程数据很重要。
  • text：显示的节点文字。
  • state：节点状态， ‘open’ 或 ‘closed’，默认是 ‘open’。当设为 ‘closed’ 时，此节点有子节点，并且将从远程站点加载它们。
  • checked：指示节点是否被选中。 Indicate whether the node is checked selected.
  • attributes：给一个节点追加的自定义属性。
  • children：定义了一些子节点的节点数组。

示例：

  1. [{
  2. “id”:1,
  3. “text”:”Folder1″,
  4. “iconCls”:”icon-save”,
  5. “children”:[{
  6. “text”:”File1″,
  7. “checked”:true
  8. },{
  9. “text”:”Books”,
  10. “state”:”open”,
  11. “attributes”:{
  12. “url”:”/demo/book/abc”,
  13. “price”:100
  14. },
  15. “children”:[{
  16. “text”:”PhotoShop”,
  17. “checked”:true
  18. },{
  19. “id”: 8,
  20. “text”:”Sub Bookds”,
  21. “state”:”closed”
  22. }]
  23. }]
  24. },{
  25. “text”:”Languages”,
  26. “state”:”closed”,
  27. “children”:[{
  28. “text”:”Java”
  29. },{
  30. “text”:”C#”
  31. }]
  32. }]

属性

名称 类型 说明 默认值
url string 获取远程数据的 URL 。 null
method string 获取数据的 http method 。 post
animate boolean 定义当节点展开折叠时是否显示动画效果。 false
checkbox boolean 定义是否在每个节点前边显示 checkbox 。 false
cascadeCheck boolean 定义是否级联检查。 true
onlyLeafCheck boolean 定义是否只在叶节点前显示 checkbox 。 false
dnd boolean 定义是否启用拖放。 false
data array 加载的节点数据。 null

 

方法

名称 参数 说明
options none 返回树的 options。
loadData data 加载树的数据。
getNode target 获取指定的节点对象。
getData target 获取指定的节点数据，包括它的子节点。
reload target 重新加载树的数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取根节点们，返回节点数组。
getParent target 获取父节点， target 参数指节点的 DOM 对象。
getChildren target 获取子节点， target 参数指节点的 DOM 对象。
getChecked none 获取所有选中的节点。
getSelected none 获取选中的节点并返回它，如果没有选中节点，就返回 null。
isLeaf target 把指定的节点定义成叶节点， target 参数表示节点的 DOM 对象。
find id 找到指定的节点并返回此节点对象。
select target 选中一个节点， target 参数表示节点的 DOM 对象。
check target 把指定节点设置为勾选。
uncheck target 把指定节点设置为未勾选。
collapse target 折叠一个节点， target 参数表示节点的 DOM 对象。
expand target 展开一个节点， target 参数表示节点的 DOM 对象。
collapseAll target 折叠所有的节点们。
expandAll target 展开所有的节点们。
expandTo target 从指定节点的根部展开。
append param 追加一些子节点们到一个父节点， param 参数有两个特性：
parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点们的数据。
toggle target 切换节点的展开/折叠状态， target 参数表示节点的 DOM 对象。
insert param 在指定节点的前边或后边插入一个节点， param 参数包含下列特性：
before：DOM 对象，前边插入的节点。
after：DOM 对象，后边插入的节点。
data：对象，节点数据。
remove target 移除一个节点和它的子节点们， target 参数表示节点的 DOM 对象。
pop target 弹出一个节点和它的子节点们，此方法和 remove 一样，但是返回了移除的节点数据。
update param 跟心指定的节点， param 参数有下列特性：
target（DOM 对象，被更新的节点）、id、text、iconCls、checked、等等。
enableDnd none 启用拖放功能。
disableDnd none 禁用拖放功能。
beginEdit nodeEl 开始编辑节点。
endEdit nodeEl 结束编辑节点。
cancelEdit nodeEl 取消编辑节点。

事件

很多事件的回调函数需要 ‘node’ 函数，它包含下列特性：

  • id：绑定到节点的标识值。
  • text：显示的文字。
  • checked：是否节点被选中。
  • attributes：绑定到节点的自定义属性。
  • target：目标的 DOM 对象。
名称 参数 说明
onClick node 当用户点击一个节点时触发， node 参数包含下列特性：
id：节点的 id
text：节点的文字
checked：节点是否被选中
attributes：节点自定义属性
target：被点击目标的 DOM 对象
onDblClick node 当用户双击一个节点时触发。
onBeforeLoad node, param 当加载数据的请求发出前触发，返回 false 就取消加载动作。
onLoadSuccess node, data 当数据加载成功时触发。
onLoadError arguments 当数据加载失败时触发， arguments 参数与 jQuery.ajax 的’error’ 函数一样。.
onBeforeExpand node 节点展开前触发，返回 false 就取消展开动作。
onExpand node 当节点展开时触发。
onBeforeCollapse node 节点折叠前触发，返回 false 就取消折叠动作。
onCollapse node 当节点折叠时触发。
onCheck node, checked 当用户点击 checkbox 时触发。
onBeforeSelect node 节点被选中前触发，返回 false 就取消选择动作。
onSelect node 当节点被选中时触发。
onContextMenu e, node 当右键点击节点时触发。
onDrop target, source, point 当节点被拖拽施放时触发。
target：DOM 对象，拖放的目标节点。
source：源节点。
point：表示拖放操作，可能是值是： ‘append’、’top’ 或 ‘bottom’。
onBeforeEdit node 编辑节点前触发。
onAfterEdit node 编辑节点后触发。
onCancelEdit node 当取消编辑动作时触发。

纵向菜单（accordion）

功能描述：

已二级树的形式呈现菜单，切换菜单选型时已上下滑动的方式切换菜单。

示例

<div class=“easyui-accordion” style=”width:130px;height:300px;”>

<div title=“车辆监控“ data-options=“iconCls:’icon-ok'” style=”overflow:auto;padding:10px;”>

<h3 style=”color:#0099FF;”>区域查车</h3>

<h3 style=”color:#0099FF;”>实时监控</h3>

<h3 style=”color:#0099FF;”>视频连接</h3>

<h3 style=”color:#0099FF;”>实时监控</h3>

</div>

<div title=“围栏管理“ data-options=“iconCls:’icon-help'” style=”padding:10px;”>

</div>

<div title=“车辆管理“ data-options=“iconCls:’icon-search'” style=”padding:10px;”>

</div>

</div>

属性

名称 类型 说明 默认值
width number Accordion 容器的宽度。 auto
height number Accordion 容器的高度。 auto
fit boolean 设置为 true 就使 accordion 容器的尺寸适应它的父容器。 false
border boolean 定义是否显示边框。 true
animate boolean 定义当展开折叠 panel 时是否显示动画效果。 true

方法

名称 参数 说明
options none 返回 accordion 的选项。
panels none 获取全部的 panel。
resize none 调整 accordion 的尺寸。
getSelected none 获取选中的 panel。
getPanel title 获取指定的 panel。
select title 选择指定的 panel。
add options 增加一个新的 panel。
remove title 移除指定的 panel。

 

事件

名称 参数 说明
onSelect title 当 panel 被选中时触发。
onAdd title 当增加一个新 panel 时触发。
onBeforeRemove title 当移除一个 panel 之前触发，返回 false 就取消移除动作。
onRemove title 当移除一个 panel 时触发。

横向菜单（menubutton）

功能描述：

横向展示多级菜单，当鼠标滑动时会展现子级菜单。

示例

<div style=”margin:20px 0;”></div>

<div class=“easyui-panel” style=”padding:5px;”>

<a href=“#” class=“easyui-menubutton” data-options=“menu:’#mm1′,iconCls:’icon-edit'”>车辆监控</a>

<a href=“#” class=“easyui-splitbutton” data-options=“iconCls:’icon-edit'”>围栏管理</a>

<a href=“#” class=“easyui-splitbutton” data-options=“menu:’#mm2′,iconCls:’icon-ok'”>车辆管理</a>

<a href=“#” class=“easyui-menubutton” data-options=“menu:’#mm3′,iconCls:’icon-help'”>终端管理</a>

</div>

<div id=“mm1” style=”width:150px;”>

<div data-options=“iconCls:’icon-undo'”>实时监控</div>

<div data-options=“iconCls:’icon-redo'”>视频回放</div>

<div class=“menu-sep”></div>

<div>轨迹回放</div>

<div>区域查车</div>

<div>定时定位查车</div>

<div class=“menu-sep”></div>

<div>

<span>报警管理</span>

<div>

<div>

<span>速度管理</span>

</div>

<div>低速报警</div>

<div>疲劳驾驶</div>

</div>

</div>

</div>

属性

名称 类型 说明 默认值
plain boolean True 就显示简单效果。 true
menu string 创建一个对应 menu 的选择器。 null
duration number 当悬停在按钮上时，以毫秒为单位定义的，显示menu的持续时间。 100

方法

名称 参数 说明
options none 返回选项（options）对象。
disable none 禁用 splitbutton.
enable none 启用 splitbutton.

 

树状表格（treegrid）

功能描述：

以树的形式展示表格。

示例

  1. <tableid=”tt”></table>

 

  1. $(‘#tt’).treegrid({
  2. url:’treegrid_data.json’,
  3. treeField:’name’,
  4. columns:[[
  5. {title:’Task Name’,field:’name’,width:180},
  6. {field:’persons’,title:’Persons’,width:60,align:’right’},
  7. {field:’begin’,title:’Begin Date’,width:80},
  8. {field:’end’,title:’End Date’,width:80}
  9. ]]
  10. });

属性

其特性扩展自 datagrid，下列是为 treegrid 增加的特性。

名称 类型 说明 默认值
treeField string 定义树节点的字段。 null
animate boolean 定义当节点展开或折叠时是否显示动画效果。 false

事件

其事件扩展自 datagrid，下列是为 treegrid 增加的事件。

名称 参数 说明
onClickRow row 当用户点击一个节点时触发。
onDblClickRow row 当用户双击一个节点时触发。
onBeforeLoad row, param 发出一个加载数据的请求前触发，返回 false 就取消加载动作。
onLoadSuccess row, data 当数据加载成功时触发。
onLoadError arguments 当数据加载失败时触发， arguments 参数和 jQuery.ajax 的 ‘error’ 方法一样。
onBeforeExpand row 节点展开前触发，返回 false 就取消展开动作。
onExpand row 当节点展开时触发。
onBeforeCollapse row 节点折叠前触发，返回 false 就取消折叠动作。
onCollapse row 当节点折叠时触发。
onContextMenu e, row 当右键点击节点时触发。
onBeforeEdit row 当用户开始编辑节点时触发。
onAfterEdit row,changes 当用户完成编辑时触发。
onCancelEdit row 当用户取消编辑节点时触发。

方法

名称 参数 说明
options none 返回 treegrid 的options 。
resize options 设置 treegrid 的尺寸， options 参数包含两个特性：
width： treegrid 的新宽度。
height： treegrid 的新高度。
fixRowHeight id 适应指定行的高度。
loadData data 加载 treegrid 的数据。
reload id 重新加载 treegrid 的数据。
reloadFooter footer 重新加载脚部数据。
getData none 获取加载的数据。
getFooterRows none 获取脚部数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取根节点们，返回节点数据。
getParent id 获取父节点。
getChildren id 获取子节点们。
getSelected none 获取选中的节点并返回它，如果没有选中节点就返回 null。
getSelections none 获取所有的选中节点们。
getLevel id 获取指定节点的层级。
find id 找到指定节点并返回此节点数据。
select id 选择节点。
unselect id 取消选择节点。
selectAll none 选择全部节点。
unselectAll none 取消选择全部节点。
collapse id 折叠节点。
expand id 展开节点。
collapseAll id 折叠全部节点。
expandAll id 展开全部节点。
expandTo id 从根部展开一个指定的节点。
toggle id 切换节点的展开/折叠状态。
append param 追加节点们到父节点。 param 参数包含下列特性：
parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点们的数据。
remove id 移除节点和它的子节点们。
refresh id 刷新指定的节点。
beginEdit id 开始编辑节点。
endEdit id 结束编辑节点。
cancelEdit id 取消编辑节点。
getEditors id 获取指定行的编辑器们。每个编辑器有下列特性：
actions：编辑器可以做的动作们。
target：目标编辑器的 jQuery 对象。
field：字段名。
type：编辑器的类型。
getEditor options 获取指定的编辑器， options 参数包含两个特性：
id：行节点的 id。
field：字段名。

弹出框（dialog）

功能描述：

用于修改或添加的弹出框

示例

  1. <divid=”dd” title=”My Dialog” style=”width:400px;height:200px;”>
  2. Dialog Content.
  3. </div>

 

  1. $(‘#dd’).dialog({
  2. modal:true
  3. });

属性

名称 类型 说明 默认值
title string 对话框的标题文字。 New Dialog
collapsible boolean 定义是否显示折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
resizable boolean 定义对话框能否调整尺寸。 false
toolbar array 对话框的顶部工具栏，每个工具的选项都与 linkbutton 一样。 null
buttons array 对话框的底部按钮，每个按钮的选项都与 linkbutton 一样。 null
shadow boolean 如果设为 true， 当窗口能够显示阴影的时候将会显示阴影。 true
inline boolean 定义如何放置窗口， true 就放在它的父容器里， false 就浮在所有元素的顶部。 false
modal boolean 定义窗口是不是模态窗口。 true

事件

名称 参数 说明
onLoad none 当远程数据被加载时触发。
onBeforeOpen none Panel打开前触发，返回false就停止打开。
onOpen none Panel打开后触发。
onBeforeClose none Panel关闭前触发，返回false就取消关闭。
onClose none Panel关闭后触发。
onBeforeDestroy none Panel销毁前触发，返回false就取消销毁。
onDestroy none Panel销毁后触发。
onBeforeCollapse none Panel折叠前触发，返回false就停止折叠。
onCollapse none Panel折叠后触发。
onBeforeExpand none Panel展开前触发，返回false就停止展开。
onExpand none Panel展开后触发。
onResize width, height Panel调整尺寸后触发。
width：新的外部宽度。
height：新的外部高度
onMove left,top Panel移动后触发。
left：新的左边位置Top：新的顶部位置
onMaximize none 窗口最大化后触发。
onRestore none 窗口还原为它的原始尺寸后触发。
onMinimize none 窗口最小化后触发。

 

方法

名称 参数 说明
dialog none 返回 dialog 对象。

表单（form）

功能描述：

用于提交信息的表单

示例

  1. <formid=”ff” method=”post”>
  2. …
  3. </form>

使 form 成为 ajax 提交的 form 。

  1. $(‘#ff’).form({
  2. url:…,
  3. onSubmit: function(){
  4. // 做某些检查
  5. // 返回 false 来阻止提交
  6. },
  7. success:function(data){
  8. alert(data)
  9. }
  10. });
  11. // 提交form
  12. $(‘#ff’).submit();

去做一个提交动作。

  1. // 调用form 插件的 ‘submit’ 方法来提交 form
  2. $(‘#ff’).form(‘submit’, {
  3. url:…,
  4. onSubmit: function(){
  5. // 做某些检查
  6. // 返回 false 来阻止提交
  7. },
  8. success:function(data){
  9. alert(data)
  10. }
  11. });

特性

名称 类型 说明 默认值
url string 表单提交动作的 URL。 null

事件

名称 参数 说明
onSubmit none 提交前触发，返回 false 来阻止提交动作。
success data 当表单提交成功时触发。
onBeforeLoad param 发出请求加载数据之前触发。返回 false 就取消这个动作。
onLoadSuccess data 当表单数据加载时触发。
onLoadError none 加载表单数据时发生某些错误的时候触发。

方法

名称 参数 说明
submit options 做提交动作， options 参数是一个对象，它包含系列特性：
url：动作的 URL
onSubmit：提交之前的回调函数
success：提交成功之后的回调函数
load data 加载记录来填充表单。
data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。
clear none 清除表单数据。
validate none 进行表单字段验证，当全部字段都有效时返回 true 。这个方法和 validatebox 插件一起使用。

验证框（validatebox）

功能描述：

用于验证组件信息格式

示例

  1. <inputid=”vv” required=”true” validType=”email”>

 

  1. $(‘#vv’).validatebox({
  2. required:true
  3. });

验证规则是通过使用 required 和 validType 特性来定义的， 这里是已经实施的规则：

  • email：匹配 email 正则表达式规则
  • url：匹配 URL 正则表达式规则
  • length[0,100]：允许从 x 到 y 个字符
  • remote[‘http://…/action.do’,’paramName’]：发送 ajax 请求来验证值，成功时返回 ‘true’ 。

要自定义验证规则，重写 $.fn.validatebox.defaults.rules ，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型：

  1. $.extend($.fn.validatebox.defaults.rules, {
  2. minLength: {
  3. validator: function(value, param){
  4. return value.length >= param[0];
  5. },
  6. message: ‘Please enter at least {0} characters.’
  7. }
  8. });

现在你可以使用这个 minLength 验证类型，去定义一个至少输入5个字符的输入框：

  1. <inputclass=”easyui-validatebox” validType=”minLength[5]”>

特性

名称 类型 说明 默认值
required boolean 定义是否字段应被输入。 false
validType string 定义字段的验证类型，比如 email、url，等等。 null
missingMessage string 当文本框是空时出现的提示文字。 This field is required.
invalidMessage string 当文本框的内容无效时出现的提示文字。 null

方法

名称 参数 说明
destroy none 移除并且销毁这个组件。
validate none 进行验证以判定文本框的内容是否有效。
isValid none 调用 validate 方法并且返回验证结果，true 或者 false。

下拉框（combobox）

功能描述：

下拉选择框

示例

  1. <inputid=”cc” name=”dept” value=”aa”>

 

  1. $(‘#cc’).combobox({
  2. url:’combobox_data.json’,
  3. valueField:’id’,
  4. textField:’text’
  5. });

json 数据格式的示例

  1. [{
  2. “id”:1,
  3. “text”:”text1″
  4. },{
  5. “id”:2,
  6. “text”:”text2″
  7. },{
  8. “id”:3,
  9. “text”:”text3″,
  10. “selected”:true
  11. },{
  12. “id”:4,
  13. “text”:”text4″
  14. },{
  15. “id”:5,
  16. “text”:”text5″
  17. }]

属性

其特性扩展自 combo，下列是为combobox 增加的特性。

名称 类型 说明 默认值
valueField string 绑定到 ComboBox 的 value 上的基础数据的名称。 value
textField string 绑定到 ComboBox 的 text 上的基础数据的名称。 text
mode string 定义在文本改变时如何加载列表数据。如果组合框从服务器加载就设为 ‘remote’ 。 local
url string 从远程加载列表数据的 URL 。 null
method string 用来检索数据的 http method 。 post
data array 被加载的列表数据。 null
filter function 定义当 ‘mode’ 设为 ‘local’ 时如何过滤数据。这个函数有两个参数：
q：用户输入的文字
row：列表中的行数据。
返回 true 就允许显示该行。
formatter function 定义如何呈现行。这个函数有一个参数：row。

事件

其事件扩展自 combo，下列是为 combobox 增加的事件。

名称 参数 说明
onLoadSuccess none 当远程数据加载成功时触发。
onLoadError none 当远程数据加载失败时触发。
onSelect record 当用户选择一个列表项时触发。
onUnselect record 当用户取消选择一个列表项时触发。

方法

其方法扩展自 combo，下列是为 combobox 追加或重写的方法。

名称 参数 说明
options none 返回 options 对象。
getData none 返回加载的数据。
loadData data 加载本地列表数据。
reload url 请求远程的列表数据。
setValues values 把数组设置为组合框的值。
setValue value 设置组合框的值。
clear none 清除组合框的值。
select value 选择指定的选项。
unselect value 取消选择指定的选项。

树下拉框（combobox）

功能描述：

以树的形式展示选择框

示例

  1. <selectid=”cc” style=”width:200px;”></select>

 

  1. <inputid=”cc” value=”01″>

 

  1. $(‘#cc’).combotree({
  2. url:’tree_data.json’
  3. });

属性

其特性扩展自 combo 和 tree，下列是为 combotree 重写的特性。

名称 类型 说明 默认值
editable boolean 定义用户是否可以直接往文本域中输入文字。 false

事件

其事件扩展自 combo 和 tree。

方法

其方法扩展自 combo，下列是为 combotree 追加或重写的方法。

名称 参数 说明
options none 返回 options 对象。
tree none 返回 tree 对象。
loadData data 加载本地的 tree 数据。
reload url 再一次请求远程的 tree 数据。
clear none 清除组件的值。
setValues values 把数组设置给组件的值。
setValue value 设置组件的值。

日期框（datebox）

功能描述：

以树的形式展示选择框

示例

 

  1. <inputid=”dd” type=”text”></input>

 

  1. $(‘#dd’).datebox({
  2. required:true
  3. });

属性

其特性扩展自 combo，下列是为 datebox 增加的特性。

名称 类型 说明 默认值
panelWidth number 下拉日历面板的宽度。 180
panelHeight number 下拉日历面板的高度。 auto
currentText string 当前日期按钮上显示的文字。 Today
closeText string 关闭按钮上显示的文字。 Close
okText string 确定按钮上显示的文字。 Ok
disabled boolean 为 true 时禁用该域。 false
formatter function 格式化日期的函数，此函数有一个 ‘date’ 参数，并返回一个字符串值。
parser function 解析日期字符串的函数，此函数有一个 ‘date’ 字符串参数，并返回一个日期值。

事件

名称 参数 说明
onSelect date 当用户选择一个日期时触发。

方法

其方法扩展自 combo，下列是为 datebox 重写的方法。

名称 参数 说明
options none 返回 options 对象。
calendar none 获取 calendar 对象。
setValue value 设置 datebox 的值。

时间框（datetimespinner）

功能描述：

时间选择框

示例

  1. <inputid=”ss” required=”true” style=”width:80px;”>

 

  1. $(‘#ss’).timespinner({
  2. showSeconds:true
  3. });

特性

其特性扩展自 spinner，下列是为 timespinner 增加的特性。.

名称 类型 说明 默认值
separator string 时分秒之间的分隔符。 :
showSeconds boolean 定义是否显示秒的信息。 false
highlight number 初期高亮的域， 0 = 时， 1 = 分， …… 0

方法

其方法扩展自 spinner，下列是为 timespinner 重写的方法。

名称 参数 数码
options none 返回 options 对象。
setValue value 设置 timespinner 的值。
getHours none 获取当前的时钟的值。
getMinutes none 获取当前的分钟的值。
getSeconds none 获取当前的秒钟的值。

 

 

©版权声明：本文为【翰林小院】（huhanlin.com）原创文章，转载时请注明出处！

发布在

发表评论

电子邮件地址不会被公开。