1.12 UI Element:Table使用

1.Table Filter and Sort

1.1创建Context节点;

NODE_SFLIGHT,

FILTER_COL:CARRID,CONNID栏位做为筛选器栏位

1.2创建Layout UI Element;

创建Table,绑定节点NODE_SFLIGHT;

设置Property:onFilter,绑定Action:FILTER;

设置Property:onSort,绑定Action:SORT;

创建TableColumnGroup:

包含TableColumn:

T_TABLE1_CARRID

T_TABLE1_CONNID

设置Property: isFiltered勾选

创建Toolbar:

Button:Append Row,绑定Action:ADD_ROW;

Button:Delete,绑定Action:DELETE_ROW;

Table的OnFilter,OnSort方法,设置Action:FILTER,SORT;

1.3实现Action对应Method;

ADD_ROW方法:

  DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element. lo_node = wd_context->get_child_node( name = wd_this->WDCTX_node_sflight ).
lo_element = lo_node->create_element( ).
lo_node->bind_element( new_item = lo_element set_initial_elements = abap_false ). 

DELETE_ROW方法:

  DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:ls_sflight TYPE wd_this->Element_node_sflight. lo_node = wd_context->get_child_node( name = wd_this->WDCTX_node_sflight ).
lo_element = lo_node->get_element( ).
IF lo_element IS BOUND.
lo_node->remove_element( element = lo_element ).
ENDIF. 

FILTER方法:

  "filter
"table实现filter方法
"column属性设置:isFiltered 是否使用filter, filterValue:筛选器值
DATA:lo_table TYPE REF TO CL_WD_TABLE.
DATA:lo_method_handler TYPE REF TO IF_WD_TABLE_METHOD_HNDL. lo_table ?= wd_this->v_view->get_element( id = 'T_TABLE1' ).
lo_method_handler ?= lo_table->_METHOD_HANDLER.
lo_method_handler->apply_filter( ). 

SORT方法:

  "sort排序
"table实现sort方法
"column设置属性sortState: notSortable不允许sort, down 降序,up升序,none无;
DATA:lo_table TYPE REF TO CL_WD_TABLE.
DATA:lo_method_handler TYPE REF TO IF_WD_TABLE_METHOD_HNDL. lo_table ?= wd_this->v_view->get_element( id = 'T_TABLE1' ).
lo_method_handler ?= lo_table->_METHOD_HANDLER.
lo_method_handler->apply_sorting( ).

INIT_DATA方法:初始化数据;

查询Sflight数据绑定显示;

设置Filter可选值;

  DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:lt_sflight TYPE wd_this->Elements_node_sflight.
DATA:ls_sflight LIKE LINE OF lt_sflight. DATA:lo_node_info TYPE REF TO if_wd_context_node_info.
DATA:lo_node_info_filter TYPE REF TO if_wd_context_node_info.
DATA:ls_val_set TYPE wdr_context_attr_value.
DATA:lt_val_set TYPE SORTED TABLE OF wdr_context_attr_value WITH UNIQUE DEFAULT KEY. "查询数据
SELECT * INTO CORRESPONDING FIELDS OF TABLE lt_sflight FROM sflight.
lo_node = wd_context->get_child_node( name = wd_this->WDCTX_node_sflight ).
lo_node->bind_table( new_items = lt_sflight set_initial_elements = abap_true ). lo_node_info = wd_context->get_node_info( ).
lo_node_info_filter = lo_node_info->get_child_node( name = wd_this->wdctx_filter_col ).
LOOP AT lt_sflight INTO ls_sflight.
ls_val_set-text = ls_val_set-value = ls_sflight-carrid.
INSERT ls_val_set INTO TABLE lt_val_set.
ENDLOOP.
"设置Filter可选值
lo_node_info_filter->set_attribute_value_set( name = 'CARRID' value_set = lt_val_set ).

2.Table Cell Popin

2.1创建Context节点NODE_SFLIGHT;

节点结构和Table:Sflight一致。

额外节点内创建Node:CELL_POPIN,可以保存多行数据;

CLASS:String类型;

Value:INT4类型;

额外创建Attribute:POPIN_NAME,保存POP IN组件ID;

2.2创建Layout;

Table组件,右键Create Binding选择显示字段和Sflight一致;

Table参数selectedPopin:绑定Context节点中POPIN_NAME字段;

创建TableColumnGroup组件:T_POPIN,POP IN的控制字段;

创建TableColumn组件:TOGGLE_POPIN列;

设置Property: selectedCellVariant值toggle_key;

选择TableColumn,右键Insert Cell Variant创建TablePopinToggleCell组件;

onToggle参数绑定Action:TOGGLE_POPIN_CELL;

variantKey参数设定值toggle_key,和TableColumn一致;

创建TableColumn组件:ACTION列;

创建LinkToAction组件:onAction参数绑定Action: OPEN_ROW_POPIN;

选择Table,创建TablePopin组件,绑定Action:CLOSE_POPIN;

创建BusinessGraphics组件;

设置参数:seriesSource,绑定Context节点CELL_POPIN;

选择BusinessGraphics,右键Insert Category创建Category组件,描述绑定CELL_POPIN.CLASS字段;

选择BusinessGraphics,右键Insert Series创建SimpleSeries组件,value绑定CELL_POPIN.VALUE字段;

2.3Action方法实现

Action:CLOSE_POPIN

Action:
OPEN_ROW_POPIN,参数和close_popin一致;

  DATA:ls_sflight TYPE wd_this->Element_node_sflight.
DATA:ls_cell_popin TYPE wd_this->Element_cell_popin.
DATA:lt_cell_popin TYPE wd_this->Elements_cell_popin.
DATA:lo_node TYPE REF TO if_wd_context_node. context_element->get_static_attributes( IMPORTING static_attributes = ls_sflight ). "设置row popin数据
ls_cell_popin-class = 'Max Seats(link)'.
ls_cell_popin-value = ls_sflight-seatsmax.
APPEND ls_cell_popin TO lt_cell_popin.
ls_cell_popin-class = 'Occ Seats(link)'.
ls_cell_popin-value = ls_sflight-seatsocc.
APPEND ls_cell_popin TO lt_cell_popin. lo_node = context_element->get_child_node( wd_this->wdctx_cell_popin ).
lo_node->bind_table( lt_cell_popin ). context_element->set_attribute( name = 'POPIN_NAME' value = 'TABLE_ROW_POPIN' ).

Action: TOGGLE_POPIN_CELL,参数一致;

  DATA:ls_sflight TYPE wd_this->Element_node_sflight.
DATA:ls_cell_popin TYPE wd_this->Element_cell_popin.
DATA:lt_cell_popin TYPE wd_this->Elements_cell_popin.
DATA:lo_node TYPE REF TO if_wd_context_node. context_element->get_static_attributes( IMPORTING static_attributes = ls_sflight ). "设置row popin数据
ls_cell_popin-class = 'Max Seats(toggle)'.
ls_cell_popin-value = ls_sflight-seatsmax.
APPEND ls_cell_popin TO lt_cell_popin.
ls_cell_popin-class = 'Occ Seats(toggle)'.
ls_cell_popin-value = ls_sflight-seatsocc.
APPEND ls_cell_popin TO lt_cell_popin. lo_node = context_element->get_child_node( wd_this->wdctx_cell_popin ).
lo_node->bind_table( lt_cell_popin ). 

INIT_DATA方法,查询节点数据,在View的INIT,或者mobify时执行;

  DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:lt_sflight TYPE wd_this->Elements_node_sflight.
DATA:ls_sflight LIKE LINE OF lt_sflight.
"查询数据
SELECT * INTO CORRESPONDING FIELDS OF TABLE lt_sflight FROM sflight.
lo_node = wd_context->get_child_node( name = wd_this->WDCTX_node_sflight ).
lo_node->bind_table( new_items = lt_sflight set_initial_elements = abap_true ).

3.Table Subtotal

3.1创建Context节点NODE_SFLIGHT;

结构和Table:Sflight一致;

创建Attribute: CELL_VARIANT,String类型;

3.2创建Layout;

创建Table组件;

修改TableColumn,Carrid对应列;

设置Property:selectedCellVariant,绑定CELL_VARIANT的值;

选择TableColumn,右键Insert Cell Variant创建TableSummaryCell组件;

设置cellDesign参数值:Total/SubTotal,只是表现底色不同;

设置variantKey参数值:SUM;

3.3实现方法

INIT_DATA,查询数据绑定显示,其中cell_variant设置值和variantKey的值对应;

  DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:lt_sflight TYPE wd_this->Elements_node_sflight.
DATA:lt_sflight_temp TYPE wd_this->Elements_node_sflight.
DATA:ls_sflight LIKE LINE OF lt_sflight.
DATA:ls_sum_sflight LIKE LINE OF lt_sflight.
"查询数据
SELECT * INTO CORRESPONDING FIELDS OF TABLE lt_sflight FROM sflight.
"创建汇总行
LOOP AT lt_sflight INTO ls_sflight.
AT NEW carrid.
CLEAR ls_sum_sflight.
ENDAT.
AT NEW connid.
ls_sum_sflight-carrid = ls_sflight-carrid.
ls_sum_sflight-connid = ls_sflight-connid.
ls_sum_sflight-fldate = ls_sflight-fldate.
ls_sum_sflight-currency = ls_sflight-currency.
ls_sum_sflight-planetype = ls_sflight-planetype.
ls_sum_sflight-cell_variant = 'SUM'.
ENDAT.
ls_sum_sflight-seatsmax = ls_sum_sflight-seatsmax + ls_sflight-seatsmax.
ls_sum_sflight-seatsocc = ls_sum_sflight-seatsocc + ls_sflight-seatsocc.
ls_sum_sflight-price = ls_sum_sflight-price + ls_sflight-price.
ls_sum_sflight-paymentsum = ls_sum_sflight-paymentsum + ls_sflight-paymentsum.
AT END OF connid.
APPEND ls_sum_sflight TO lt_sflight_temp.
ENDAT.
AT END OF carrid.
CLEAR ls_sum_sflight.
ENDAT.
APPEND ls_sflight TO lt_sflight_temp. ENDLOOP. lo_node = wd_context->get_child_node( name = wd_this->wdctx_node_sflight ).
lo_node->bind_table( new_items = lt_sflight_temp set_initial_elements = abap_true ).

4.Context Change Log

4.1创建Context节点,NODE_SCARR;

字段结构和SCARR一致;

创建Context节点,NODE_CHANGE_LOG,记录修改记录;

节点结构Attribute名称,类型:

NODE_NAME: WDR_CTX_NODE_NAME,节点名;

SEQUENCE:WDR_SEQUENCE,Log序号;

NODE_PATH:WDR_CTX_ELEMENT_PATH,节点路径;

CHANGE_KIND:WDR_CHANGE_KIND,修改类型;

ELEMENT_INDEX:WDR_INDEX,Element顺序,Table中哪一行;

ATTRIBUTE_NAME:WDR_ATTRIBUTE_NAME,Attribute名称;

OLD_VALUE:String,旧值;

NEW_VALUE:String,新值;

4.2创建Layout;

创建Toolbar组件,执行某些操作;

创建Table组件,显示Scarr表信息;

创建Table组件,显示Change Log信息;

4.3实现方法

默认Log是打开的。可以通过方法设置;

Disable
change Log:

  "取消change log
wd_context->get_context( )->disable_context_change_log( ). 

Enable change Log:

  "使能change log
wd_context->get_context( )->enable_context_change_log( ). 

方法Get Change Data,获取修改记录,更新显示;

主要使用wd_context->get_context()->get_context_change_log()方法获取修改记录;

  DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:lt_change_list TYPE wdr_context_change_list.
DATA:ls_change_list TYPE wdr_context_change.
"chang log
DATA:lt_change_log TYPE wd_this->elements_node_change_log.
DATA:ls_change_log TYPE wd_this->element_node_change_log.
FIELD-SYMBOLS:<lv_old_val> TYPE ANY.
FIELD-SYMBOLS:<lv_new_val> TYPE ANY. lt_change_list = wd_context->get_context( )->get_context_change_log( and_reset = abap_false ).
LOOP AT lt_change_list INTO ls_change_list
WHERE attribute_name IS NOT INITIAL.
CLEAR ls_change_log.
ls_change_log-node_name = ls_change_list-node_name.
ls_change_log-sequence = ls_change_list-sequence.
ls_change_log-node_path = ls_change_list-node_path.
ls_change_log-change_kind = ls_change_list-change_kind.
ls_change_log-element_index = ls_change_list-element_index.
ls_change_log-attribute_name = ls_change_list-attribute_name.
ASSIGN ls_change_list-old_value->* TO <lv_old_val>.
ASSIGN ls_change_list-new_value->* TO <lv_new_val>.
ls_change_log-old_value = <lv_old_val>.
ls_change_log-new_value = <lv_new_val>.
APPEND ls_change_log TO lt_change_log.
ENDLOOP.
"绑定数据
lo_node = wd_context->get_child_node( name = wd_this->wdctx_node_change_log ).
lo_node->bind_table( new_items = lt_change_log set_initial_elements = abap_true ).

WDA学习(19):UI Element:Table使用的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. foreach statement cannot operate on variables of type 'System.Web.UI.WebControls.Table' because 'System.Web.UI.WebControls.Table' does not contain a public definition for 'GetEnumerator'

    错误:foreach statement cannot operate on variables of type 'System.Web.UI.WebControls.Table' because ' ...

  3. golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题

    golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题 今天测试了重新建一个项目生成新的表,然后复制到旧的项目 ...

  4. element table 组件内容换行方案

    element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...

  5. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  6. Vue. 之 Element table 高度自适应

    Vue. 之 Element table 高度自适应 使用vue创建table后,其高度自适应浏览器高度. 在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight ...

  7. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  8. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  9. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  10. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

随机推荐

  1. The table‘xxxx’is full

    df -h 查看磁盘 设置 back_log = 50 接受队列,对于没建立 tcp 连接的请求队列放入缓存中,队列大小为 back_log,受限制与 OS 参数,试图设定 back_log 高于你的 ...

  2. LESS-8

    根据题目,这是一道布尔型注入.页面只有返回正常和不正常两种. payload: ' and substr(database(),1,1)='s' --+  判断当前数据库名的第一个字母,是's'页面就 ...

  3. redis sentinel 部署

    redis sentinel 部署 服务器说明 192.168.2.200 master redis-server redis-sentinel 192.168.2.201 slave1 redis- ...

  4. Linux系统Shell脚本第二章:条件测试、正整数字符串比较与if、case语句

    目录 一.条件测试 1.三种测试方法 2. 正整数值比较 3.字符串比较 4.逻辑测试 二.脚本中常用命令 1.echo命令 2.date命令 3.cal命令 4.tr命令 5.cut命令 6.sor ...

  5. pip 下载换源

    命令:[pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple]

  6. lucene入门&Solr

    LUCENE 1. 学习计划 1.案例分析:什么是全文检索,如何实现全文检索 2.Lucene实现全文检索的流程 a) 创建索引 b) 查询索引 3.配置开发环境 4.创建索引库 5.查询索引库 6. ...

  7. 初学pwn的课程第一课

    pwn的攻击基础原理 我的理解是主要通过分析主文件,然后获得有用信息,通过exploit对服务器输入指定的payload数据,获取服务器的shell,就是进入服务器的终端,获取服务器的控制权,对服务器 ...

  8. 前端代码的js里面的内容被打包后都会以某种规则全部存在dist文件夹的js文件夹的app.xxx.js里面

  9. GIS空间分析和建模复习重点3

    22.网络分析的相关算法 (1)Dijkstra算法(求解给定点与其他所有点之间的最短路径即单源点最短路径问题) (2)Floyd算法(直接计算任意两节点之间最短路) (3)最小生成树即Prim算法. ...

  10. es的核心原理 (一)

    搜索引擎 搜索引擎的分类 全文搜索:谷歌.百度.必应:这种搜索过程到底搜索啥,不知道,有可能是个帖子,也有可能是个门户网站 垂直搜索:视频网站.各大电商:这种搜索内容是固定的,比如在懂车帝,你搜索的一 ...