easyUI组件说明文档v1.0.doc

盘锦福瑞电子科技有限公司 前台UI组件说明文档发布日期2015.03.27控制级别内部资料制定部门平台组r 文档属性属性内容u 用户名称：uu 文档标题：u 前台UI组件说明文档u 文档编号：uu 版本日期：u 2015.03.27u 发布版本：u V1.0u 适用范围：u 项目组所有成员u 作者：u 胡翰林r 文档审批审批人职务审批时间审批意见发文编号uuuuuuuuuur 修订内容版本修正章节日期修正人变更记录u v1.0u 创建文档u 2015-3-27u 胡翰林uuuuuuuuuuuuuuuur 模板修订历史版本生效时间变更概要作者审核批准uuuuuuuuuuuuuuuuuuuuuuuu前言目的本文档依据DSS及ITN前台改造需求而编写。该文档主要作用是明确前台组件的应用方式，为项目的实施提供技术支持与依据，保障项目的各个指标能够正常完成。预期读者本文档预期读者为项目组所有成员，包括：系统架构人员、系统开发人员、系统运维人员、系统测试人员等。术语定义简称/术语说明参考资料序号文档名称版本号来源作者1easyUI 官方文档概述目标以改造DSS与ITN为前提下抽取出公共组件，便于其他项目复用。约束需支持低版本浏览器（IE5，IE8）组件说明表格（grid）功能描述：以表格的形式展现数据，支持多选、单选、行编辑、分页、排序、自动缩进列宽、自定义列样式等功能。示例 1. 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. );属性名称类型说明默认值columnsarraydatagrid 的 column 的配置对象，更多详细请参见 column 的特性。nullfrozenColumnsarray和列的特性一样，但是这些列将被冻结在左边。nullfitColumnsbooleanTrue 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。falsestripedbooleanTrue 就把行条纹化。（即奇偶行使用不同背景色）falsemethodstring请求远程数据的 method 类型。postnowrapbooleanTrue 就会把数据显示在一行里。trueidFieldstring标识字段。nullurlstring从远程站点请求数据的 URL。nullloadMsgstring当从远程站点加载数据时，显示的提示信息。Processing, please wait paginationbooleanTrue 就会在 datagrid 的底部显示分页栏。falserownumbersbooleanTrue 就会显示行号的列。falsesingleSelectbooleanTrue 就会只允许选中一行。falsepageNumbernumber当设置了 pagination 特性时，初始化页码。1pageSizenumber当设置了 pagination 特性时，初始化页码尺寸。10pageListarray当设置了 pagination 特性时，初始化页面尺寸的选择列表。10,20,30,40,50queryParamsobject当请求远程数据时，发送的额外参数。sortNamestring定义可以排序的列。nullsortOrderstring定义列的排序顺序，只能用 asc 或 desc。ascremoteSortboolean定义是否从服务器给数据排序。trueshowFooterboolean定义是否显示一行页脚。falserowStylerfunction返回例如 background:red 的样式，该函数需要两个参数：rowIndex： 行的索引，从 0 开始。rowData： 此行相应的记录。loadFilterfunction返回过滤的数据去显示。这个函数需要一个参数 data ，表示原始数据。你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有 total 和 rows 特性。editorsobject定义编辑行时的 editor 。预定义的 editorviewobject定义 datagrid 的 view 。默认的 view方法名称参数说明optionsnone返回 options 对象。getPagernone返回 pager 对象。getPanelnone返回 panel 对象。getColumnFieldsfrozen返回列的字段，如果 frozen 设定为 true，冻结列的字段被返回。getColumnOptionfield返回指定列的选项。resizeparam调整尺寸和布局。loadparam加载并显示第一页的行，如果指定 param 参数，它将替换 queryParams 特性。reloadparam重新加载行，就像 load 方法一样，但是保持在当前页。reloadFooterfooter重新加载脚部的行。loadingnone显示正在加载状态。loadednone隐藏正在加载状态。fitColumnsnone使列自动展开/折叠以适应 datagrid 的宽度。fixColumnSizenone固定列的尺寸。fixRowHeightindex固定指定行的高度。loadDatadata加载本地数据，旧的行会被移除。getDatanone返回加载的数据。getRowsnone返回当前页的行。getFooterRowsnone返回脚部的行。getRowIndexrow返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。getSelectednone返回第一个选中的行或者 null。getSelectionsnone返回所有选中的行，当没有选中的记录时，将返回空数组。clearSelectionsnone清除所有的选择。selectAllnone选中当前页所有的行。unselectAllnone取消选中当前页所有的行。selectRowindex选中一行，行索引从 0 开始。selectRecordidValue通过 id 的值做参数选中一行。unselectRowindex取消选中一行。beginEditindex开始对一行进行编辑。endEditindex结束对一行进行编辑。cancelEditindex取消对一行进行编辑。getEditorsindex获取指定行的编辑器们。每个编辑器有下列特性：actions：编辑器能做的动作们。target：目标编辑器的 jQuery 对象。field：字段名。type：编辑器的类型。getEditoroptions获取指定的编辑器， options 参数包含两个特性： index：行的索引。field：字段名。refreshRowindex刷新一行。validateRowindex验证指定的行，有效时返回 true。updateRowparam更新指定的行， param 参数包含下列特性：index：更新行的索引。row：行的新数据。appendRowrow追加一个新行。insertRowparam插入一个新行， param 参数包括下列特性：index：插入进去的行的索引，如果没有定义，就追加此新行。row：行的数据。deleteRowindex删除一行。getChangestype获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。当 type 参数没有分配时，返回所有改变的行。acceptChangesnone提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。rejectChangesnone回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。mergeCellsoptions把一些单元格合并为一个单元格，options 参数包括下列特性：index：列的索引。field：字段名。rowspan：合并跨越的行数。colspan：合并跨越的列数。showColumnfield显示指定的列。hideColumnfield隐藏指定的列。事件名称参数说明onLoadSuccessdata当数据加载成功时触发。onLoadErrornone加载远程数据发生某些错误时触发。onBeforeLoadparam发送加载数据的请求前触发，如果返回 false加载动作就会取消。onClickRowrowIndex, rowData当用户点击一行时触发，参数包括： rowIndex：被点击行的索引，从 0 开始。rowData：被点击行对应的记录。onDblClickRowrowIndex, rowData当用户双击一行时触发，参数包括： rowIndex：被双击行的索引，从 0 开始。rowData：被双击行对应的记录。onClickCellrowIndex, field, value当用户单击一个单元格时触发。onDblClickCellrowIndex, field, value当用户双击一个单元格时触发。onSortColumnsort, order当用户对一列进行排序时触发，参数包括： sort：排序的列的字段名order：排序的列的顺序onResizeColumnfield, width当用户调整列的尺寸时触发。onSelectrowIndex, rowData当用户选中一行时触发，参数包括： rowIndex：选中行的索引，从 0 开始rowData：选中行对应的记录onUnselectrowIndex, rowData当用户取消选择一行时触发，参数包括： rowIndex：取消选中行的索引，从 0 开始rowData：取消选中行对应的记录onSelectAllrows当用户选中全部行时触发。onUnselectAllrows当用户取消选中全部行时触发。onBeforeEditrowIndex, rowData当用户开始编辑一行时触发，参数包括： rowIndex：编辑行的索引，从 0 开始rowData：编辑行对应的记录onAfterEditrowIndex, rowData, changes当用户完成编辑一行时触发，参数包括： rowIndex：编辑行的索引，从 0 开始rowData：编辑行对应的记录changes：更改的字段/值对onCancelEditrowIndex, rowData当用户取消编辑一行时触发，参数包括： rowIndex：编辑行的索引，从 0 开始rowData：编辑行对应的记录onHeaderContextMenue, field当 datagrid 的头部被右键单击时触发。onRowContextMenue, rowIndex, rowData当右键点击行时触发。列（Column）的特性1. columns: 2. field:itemid,title:ItemID,rowspan:2,width:80,sortable:true, 3. field:productid,title:ProductID,rowspan:2,width:80,sortable:true, 4. title:ItemDetails,colspan:4 5. , 6. field:listprice,title:ListPrice,width:80,align:right,sortable:true, 7. field:unitcost,title:UnitCost,width:80,align:right,sortable:true, 8. field:attr1,title:Attribute,width:100, 9. field:status,title:Status,width:60 10. 名称类型说明默认值titlestring列的标题文字。undefinedfieldstring列的字段名。undefinedwidthnumber列的宽度。undefinedrowspannumber指一个单元格占据多少行。undefinedcolspannumber指一个单元格占据多少列。undefinedalignstring指如何对齐此列的数据，可以用 left、right、center。undefinedsortablebooleanTrue 就允许此列被排序。undefinedresizablebooleanTrue 就允许此列被调整尺寸。undefinedhiddenbooleanTrue 就隐藏此列。undefinedcheckboxbooleanTrue 就显示 checkbox。undefinedformatterfunction单元格的格式化函数，需要三个参数： value： 字段的值。rowData： 行的记录数据。rowIndex： 行的索引。undefinedstylerfunction单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如 background:red 。此函数需要三个参数：value： 字段的值。rowData： 行的记录数据。rowIndex： 行的索引。undefinedsorterfunction自定义字段的排序函数，需要两个参数：a： 第一个字段值。b： 第二个字段值。undefinededitorstring,object指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性： type：string，编辑类型，可能的类型是：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。options：对象，编辑类型对应的编辑器选项。undefinedDemo 截图：树（tree）功能描述：以树的形式展现数据，支持多选、单选、自定义图片等功能。示例1. 1. $(#tt).tree( 2. url:tree_data.json3. );每个节点可以包含下列特性： 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:true8. , 9. text:Books, 10. state:open, 11. attributes: 12. url:/demo/book/abc, 13. price:100 14. , 15. children: 16. text:PhotoShop, 17. checked:true18. , 19. id:8, 20. text:SubBookds, 21. state:closed22. 23. 24. , 25. text:Languages, 26. state:closed, 27. children: 28. text:Java29. , 30. text:C#31. 32. 属性名称类型说明默认值urlstring获取远程数据的 URL 。nullmethodstring获取数据的 http method 。postanimateboolean定义当节点展开折叠时是否显示动画效果。falsecheckboxboolean定义是否在每个节点前边显示 checkbox 。falsecascadeCheckboolean定义是否级联检查。trueonlyLeafCheckboolean定义是否只在叶节点前显示 checkbox 。falsedndboolean定义是否启用拖放。falsedataarray加载的节点数据。null方法名称参数说明optionsnone返回树的 options。loadDatadata加载树的数据。getNodetarget获取指定的节点对象。getDatatarget获取指定的节点数据，包括它的子节点。reloadtarget重新加载树的数据。getRootnone获取根节点，返回节点对象。getRootsnone获取根节点们，返回节点数组。getParenttarget获取父节点， target 参数指节点的 DOM 对象。getChildrentarget获取子节点， target 参数指节点的 DOM 对象。getCheckednone获取所有选中的节点。getSelectednone获取选中的节点并返回它，如果没有选中节点，就返回 null。isLeaftarget把指定的节点定义成叶节点， target 参数表示节点的 DOM 对象。findid找到指定的节点并返回此节点对象。selecttarget选中一个节点， target 参数表示节点的 DOM 对象。checktarget把指定节点设置为勾选。unchecktarget把指定节点设置为未勾选。collapsetarget折叠一个节点， target 参数表示节点的 DOM 对象。expandtarget展开一个节点， target 参数表示节点的 DOM 对象。collapseAlltarget折叠所有的节点们。expandAlltarget展开所有的节点们。expandTotarget从指定节点的根部展开。appendparam追加一些子节点们到一个父节点， param 参数有两个特性：parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。data：数组，节点们的数据。toggletarget切换节点的展开/折叠状态， target 参数表示节点的 DOM 对象。insertparam在指定节点的前边或后边插入一个节点， param 参数包含下列特性：before：DOM 对象，前边插入的节点。after：DOM 对象，后边插入的节点。data：对象，节点数据。removetarget移除一个节点和它的子节点们， target 参数表示节点的 DOM 对象。poptarget弹出一个节点和它的子节点们，此方法和 remove 一样，但是返回了移除的节点数据。updateparam跟心指定的节点， param 参数有下列特性：target（DOM 对象，被更新的节点）、id、text、iconCls、checked、等等。enableDndnone启用拖放功能。disableDndnone禁用拖放功能。beginEditnodeEl开始编辑节点。endEditnodeEl结束编辑节点。cancelEditnodeEl取消编辑节点。事件很多事件的回调函数需要 node 函数，它包含下列特性： id：绑定到节点的标识值。 text：显示的文字。 checked：是否节点被选中。 attributes：绑定到节点的自定义属性。 target：目标的 DOM 对象。名称参数说明onClicknode当用户点击一个节点时触发， node 参数包含下列特性：id：节点的 idtext：节点的文字checked：节点是否被选中attributes：节点自定义属性target：被点击目标的 DOM 对象onDblClicknode当用户双击一个节点时触发。onBeforeLoadnode, param当加载数据的请求发出前触发，返回 false 就取消加载动作。onLoadSuccessnode, data当数据加载成功时触发。onLoadErrorarguments当数据加载失败时触发， arguments 参数与 jQuery.ajax 的error 函数一样。.onBeforeExpandnode节点展开前触发，返回 false 就取消展开动作。onExpandnode当节点展开时触发。onBeforeCollapsenode节点折叠前触发，返回 false 就取消折叠动作。onCollapsenode当节点折叠时触发。onChecknode, checked当用户点击 checkbox 时触发。onBeforeSelectnode节点被选中前触发，返回 false 就取消选择动作。onSelectnode当节点被选中时触发。onContextMenue, node当右键点击节点时触发。onDroptarget, source, point当节点被拖拽施放时触发。target：DOM 对象，拖放的目标节点。source：源节点。point：表示拖放操作，可能是值是： append、top 或 bottom。onBeforeEditnode编辑节点前触发。onAfterEditnode编辑节点后触发。onCancelEditnode当取消编辑动作时触发。纵向菜单（accordion）功能描述：已二级树的形式呈现菜单，切换菜单选型时已上下滑动的方式切换菜单。示例区域查车实时监控视频连接实时监控属性名称类型说明默认值widthnumberAccordion 容器的宽度。autoheightnumberAccordion 容器的高度。autofitboolean设置为 true 就使 accordion 容器的尺寸适应它的父容器。falseborderboolean定义是否显示边框。trueanimateboolean定义当展开折叠 panel 时是否显示动画效果。true方法名称参数说明optionsnone返回 accordion 的选项。panelsnone获取全部的 panel。resizenone调整 accordion 的尺寸。getSelectednone获取选中的 panel。getPaneltitle获取指定的 panel。selecttitle选择指定的 panel。addoptions增加一个新的 panel。removetitle移除指定的 panel。事件名称参数说明onSelecttitle当 panel 被选中时触发。onAddtitle当增加一个新 panel 时触发。onBeforeRemovetitle当移除一个 panel 之前触发，返回 false 就取消移除动作。onRemovetitle当移除一个 panel 时触发。横向菜单（menubutton）功能描述：横向展示多级菜单，当鼠标滑动时会展现子级菜单。示例车辆监控围栏管理车辆管理终端管理实时监控视频回放轨迹回放区域查车定时定位查车报警管理速度管理低速报警疲劳驾驶属性名称类型说明默认值plainbooleanTrue 就显示简单效果。truemenustring创建一个对应 menu 的选择器。nulldurationnumber当悬停在按钮上时，以毫秒为单位定义的，显示menu的持续时间。100方法名称参数说明optionsnone返回选项（options）对象。disablenone禁用 splitbutton.enablenone启用 splitbutton.树状表格（treegrid）功能描述：以树的形式展示表格。示例1. 1. $(#tt).treegrid( 2. url:treegrid_data.json, 3. treeField:name, 4. columns: 5. title:TaskName,field:name,width:180, 6. field:persons,title:Persons,width:60,align:right, 7. field:begin,title:BeginDate,width:80, 8. field:end,title:EndDate,width:80 9. 10. );属性其特性扩展自 datagrid，下列是为 treegrid 增加的特性。名称类型说明默认值treeFieldstring定义树节点的字段。nullanimateboolean定义当节点展开或折叠时是否显示动画效果。false事件其事件扩展自 datagrid，下列是为 treegrid 增加的事件。名称参数说明onClickRowrow当用户点击一个节点时触发。onDblClickRowrow当用户双击一个节点时触发。onBeforeLoadrow, param发出一个加载数据的请求前触发，返回 false 就取消加载动作。onLoadSuccessrow, data当数据加载成功时触发。onLoadErrorarguments当数据加载失败时触发， arguments 参数和 jQuery.ajax 的 error 方法一样。onBeforeExpandrow节点展开前触发，返回 false 就取消展开动作。onExpandrow当节点展开时触发。onBeforeCollapserow节点折叠前触发，返回 false 就取消折叠动作。onCollapserow当节点折叠时触发。onContextMenue, row当右键点击节点时触发。onBeforeEditrow当用户开始编辑节点时触发。onAfterEditrow,changes当用户完成编辑时触发。onCancelEditrow当用户取消编辑节点时触发。方法名称参数说明optionsnone返回 treegrid 的options 。resizeoptions设置 treegrid 的尺寸， options 参数包含两个特性：width： treegrid 的新宽度。height： treegrid 的新高度。fixRowHeightid适应指定行的高度。loadDatadata加载 treegrid 的数据。reloadid重新加载 treegrid 的数据。reloadFooterfooter重新加载脚部数据。getDatanone获取加载的数据。getFooterRowsnone获取脚部数据。getRootnone获取根节点，返回节点对象。getRootsnone获取根节点们，返回节点数据。getParentid获取父节点。getChildrenid获取子节点们。getSelectednone获取选中的节点并返回它，如果没有选中节点就返回 null。getSelectionsnone获取所有的选中节点们。getLevelid获取指定节点的层级。findid找到指定节点并返回此节点数据。selectid选择节点。unselectid取消选择节点。selectAllnone选择全部节点。unselectAllnone取消选择全部节点。collapseid折叠节点。expandid展开节点。collapseAllid折叠全部节点。expandAllid展开全部节点。expandToid从根部展开一个指定的节点。toggleid切换节点的展开/折叠状态。appendparam追加节点们到父节点。 param 参数包含下列特性： parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。data：数组，节点们的数据。removeid移除节点和它的子节点们。refreshid刷新指定的节点。beginEditid开始编辑节点。endEditid结束编辑节点。cancelEditid取消编辑节点。getEditorsid获取指定行的编辑器们。每个编辑器有下列特性： actions：编辑器可以做的动作们。target：目标编辑器的 jQuery 对象。field：字段名。type：编辑器的类型。getEditoroptions获取指定的编辑器， options 参数包含两个特性：id：行节点的 id。field：字段名。弹出框（dialog）功能描述：用于修改或添加的弹出框示例1. 2. DialogContent. 3. 1. $(#dd).dialog( 2. modal:true3. );属性名称类型说明默认值titlestring对话框的标题文字。New Dialogcollapsibleboolean定义是否显示折叠按钮。falseminimizableboolean定义是否显示最小化按钮。falsemaximizableboolean定义是否显示最大化按钮。falseresizableboolean定义对话框能否调整尺寸。falsetoolbararray对话框的顶部工具栏，每个工具的选项都与 linkbutton 一样。nullbuttonsarray对话框的底部按钮，每个按钮的选项都与 linkbutton 一样。nullshadowboolean如果设为 true， 当窗口能够显示阴影的时候将会显示阴影。trueinlineboolean定义如何放置窗口， true 就放在它的父容器里， false 就浮在所有元素的顶部。falsemodalboolean定义窗口是不是模态窗口。true事件名称参数说明onLoadnone当远程数据被加载时触发。onBeforeOpennonePanel打开前触发，返回false就停止打开。onOpennonePanel打开后触发。onBeforeClosenonePanel关闭前触发，返回false就取消关闭。onClosenonePanel关闭后触发。onBeforeDestroynonePanel销毁前触发，返回false就取消销毁。onDestroynonePanel销毁后触发。onBeforeCollapsenonePanel折叠前触发，返回false就停止折叠。onCollapsenonePanel折叠后触发。onBeforeExpandnonePanel展开前触发，返回false就停止展开。onExpandnonePanel展开后触发。onResizewidth, heightPanel调整尺寸后触发。width：新的外部宽度。height：新的外部高度onMoveleft,topPanel移动后触发。left：新的左边位置Top：新的顶部位置onMaximizenone窗口最大化后触发。onRestorenone窗口还原为它的原始尺寸后触发。onMinimizenone窗口最小化后触发。方法名称参数说明dialognone返回 dialog 对象。表单（form）功能描述：用于提交信息的表单示例1. 2. . 3. 使 f