03 iPlatUI开发指南【必读】-v9-20210317版.pdf

03 iPlatUI 开发指南【必读】

iPlat4J V6 产品文档

Exported on Mar 17, 2021

iPlat4J V6 产品文档 – 03 iPlatUI 开发指南【必读】

Table of Contents – 2

Table of Contents

1 UI-常见开发问题汇总 ..............................................................................................................9

1.1 01 如何获取控件对象 .......................................................................................................... 9

1.1.1 基于 KendoUI 组件封装的控件 .......................................................................................................9

3 前端工具箱 ............................................................................................................................15

3.1 Chrome 的调试技巧 .......................................................................................................... 15

3.1.1 入门使用介绍 ............................................................................................................................... 15

3.1.2 Console 使用的指南 .....................................................................................................................15

3.2 EiCommunicator ................................................................................................................15

3.3 IPLAT ................................................................................................................................ 16

3.3.1 EFForm 工具类 ............................................................................................................................ 16

3.3.2 IPLAT 相关 API ............................................................................................................................ 20

3.4 jQuery 与 Underscore 常用 API 整理 .................................................................................22

3.5 JS 中字符串转数字运算规则 ............................................................................................. 24

3.10 如何使用 spreadsheet ................................................................................................... 35

3.11 页面与 Iframe 数据交互 ................................................................................................. 36

4 UI 组件库 ...............................................................................................................................38

4.1 UI 组件 ...............................................................................................................................38

4.2 1. 布局容器 ........................................................................................................................40

4.2.1 EFPage ........................................................................................................................................40

4.2.2 EFRegion .....................................................................................................................................40

4.2.3 EFTab .......................................................................................................................................... 41

4.2.4 EFWindow ................................................................................................................................... 42

4.3 2. 表单组件 ........................................................................................................................43

4.3.7 EFMultiSelect ...............................................................................................................................67

4.3.8 EFCascadeSelect ........................................................................................................................ 69

4.3.9 EFAutoComplete ......................................................................................................................... 70

4.3.10 EFUpload .....................................................................................................................................70

4.3.11 EFComboInput .............................................................................................................................72

4.4 3. 数据表格 ........................................................................................................................73

4.4.1 EFGrid ......................................................................................................................................... 73

4.4.2 EFColumn ..................................................................................................................................102

4.4.3 EFComboColumn ...................................................................................................................... 105

4.4.4 EFMultiSelectColumn ................................................................................................................ 106

iPlat4J V6 产品文档 – 03 iPlatUI 开发指南【必读】

Table of Contents – 3

4.5.3 EFSwap ..................................................................................................................................... 116

4.5.4 EFTreeList ................................................................................................................................. 116

4.6 5. 基础组件 ......................................................................................................................118

4.6.1 弹窗对话框组件 ..........................................................................................................................118

5 示例中心 ............................................................................................................................. 120

5.1 布局容器 ..........................................................................................................................124

5.1.1 EEDM8000-多页签示例 ............................................................................................................. 124

5.1.2 EEDM8001-Tab 示例 (contentType=“iframe”) ........................................................................... 132

5.1.3 EEDM8002-Tab 与 Grid .............................................................................................................134

5.1.4 EEDM8007-Tab 延迟加载 ..........................................................................................................136

5.1.11 EEDM8501-EFPage 中 prefix 配置示例 .....................................................................................153

5.1.12 EEDM9030-容器嵌套布局示例页面 ........................................................................................... 159

5.2 表单组件 ..........................................................................................................................163

5.2.1 EEDM1002-EiColumn 动态属性示例 ......................................................................................... 164

5.2.2 EFInput 示例 .............................................................................................................................. 168

5.2.3 EEDM4004-自动补全查询 ..........................................................................................................196

5.2.4 EEDM4006-附件上传示例 ..........................................................................................................199

5.2.5 EEDM4007-附件上传文件格式过滤示例 .................................................................................... 205

5.2.6 EEDM4010-EFPopupInput 输入示例 ......................................................................................... 207

5.2.7 EEDM4012-EFPopupInput API 示例 ......................................................................................... 219

5.2.14 EEDM5010-级联下拉示例 ..........................................................................................................259

5.2.15 EEDM5011-下拉多选示例 ..........................................................................................................262

5.2.16 EEDM5012-EFSelect 标签与 EFOption 等标签配合完成下拉相关功能 ..................................... 267

5.2.17 EEDM5014-EFComboInput 示例 ............................................................................................... 277

5.2.18 EEDM5016-下拉框 select/change 事件绑定示例 .......................................................................279

5.2.19 EEDM4807-Form 表单 get/set 数据 API 示例 ............................................................................ 285

5.2.20 EEDM5006-depth 与 start 日期控件显示层级 ............................................................................ 289

5.3 数据表格 ..........................................................................................................................291

5.3.1 EFGrid 数据表格 ........................................................................................................................ 292

5.4 树和菜单 ..........................................................................................................................477

5.5.3 EEDM1032-Prompt 组件示例 .................................................................................................... 545

5.6 How-To 定制方案 ............................................................................................................ 548

5.6.1 EEDM9000-单列多行输入 ..........................................................................................................548

5.6.2 EEDM9001-多行多列输入 ..........................................................................................................549

5.6.3 EEDM9002-单表查询 .................................................................................................................550

iPlat4J V6 产品文档 – 03 iPlatUI 开发指南【必读】

Table of Contents – 4

5.6.4 EEDM9003-多行多列布局 ..........................................................................................................551

5.6.5 EEDM9004-上中下三行布局 ...................................................................................................... 553

5.6.6 EEDM9005-上中下+Tab ............................................................................................................ 555

5.6.7 EFGrid 里面使用 JS 去实现下拉列 ............................................................................................ 559

5.6.8 首页菜单的配置 ..........................................................................................................................564

5.7 纯 CSS 页面布局 ............................................................................................................. 578

5.7.1 EEDM0910-0912 两栏布局（高度自适应） ...............................................................................578

5.7.2 EEDM0913-0915 两栏布局（flex） ........................................................................................... 588

5.7.3 EEDM0916-0918 三栏布局（高度自适应） ...............................................................................598

iPlat4J V6 产品文档 – 03 iPlatUI 开发指南【必读】

错误！未定义样式。

–

5