[AUI] Liferay AUI editable的使用

最新推荐文章于 2019-04-23 15:53:18 发布

一纯粹的paranoid

最新推荐文章于 2019-04-23 15:53:18 发布

阅读量1.4k

点赞数

分类专栏： liferay-portlet AUI 文章标签： AUI Liferay JavaScript editable

本文链接：https://blog.youkuaiyun.com/Paranoid_Android/article/details/9243487

版权

liferay-portlet 同时被 2 个专栏收录

15 篇文章

订阅专栏

AUI

1 篇文章

订阅专栏

本文介绍如何通过<c:forEach>标签遍历表单数据，并利用AUI库实现每个单元格内DIV的可编辑性及实时更新数据库的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要实现效果如下图

需要实现editable的是一整个表单，几行几列的
使用<c:forEach> 标签，将每一行遍历出来
例如：

<c:forEach items="${orgUsers}" var="user" varStatus="status">
    <tr>
        <td>
    <div id="user-name-${status.index}">${user.name}</div>
</td>
    </tr>
</c:forEach>

user-extension-${status.index} 是设置为可编辑的 div 的 id，为什么有${status.index}
因为如果是遍历每一行，那么每一行里面的 div 的 id 都是一样的，所以没有办法使用 aui 的 editable 定义每一个 div
varStatus 是 <c:forEach> 的一个属性，简单来说就是记录遍历的次数，
这样第一个 div 的 id 就是 "user-name-0", 第二个 div 的 id 为 "user-name-1"

接下来是js代码：

AUI().ready(
     'aui-editable',
     function(A) {
               (new A.Editable(
                    {
                         node: '#user-extension-${status.index}',
                         on: {
                              contentTextChange: function(event) {
                                   var instance = this;


                                   if (!event.initial) {
                                        var newValue = event.newVal;
                                        A.io.request(
                                             '<%= editAddressInformationURL %>',
                                             {
                                                  data: {
                                                       cmd: "updateUser",
                                                       data: newValue,
                                                       field: '<%= PortletPropsValues.EXTENSION %>',
                                                       userId: document.getElementById('user-id-${status.index}').value
                                                  }
                                             }
                                        );
                                   }
                              }
                         }
                    }
               ));
          }
     );

各个属性的意义
node：可编辑的 div 的 id
contentTextChange：在编辑框改动之后触发事件
newValue：编辑框改动之后的值
A.io.request ： aui 的发送请求
'<%= editAddressInformationURL %>' : actionURL
data : 相当于 actionURL 中的 param，里面的key 与 value 都是自定义的

实现这些代码，在修改完编辑框内的内容之后，aui 就会发送请求，在后台完成对数据库的更新操作，前台页面不会刷新