Liferay MVC Portlet动态复选框列表实现咨询（含树形需求）

针对你开发MVC Portlet时遇到的动态复选框列表需求，Liferay确实有现成的标准控件可以用，而且完全支持层级数据展示和子树动态加载，下面给你详细拆解实现方式：

1. 首选：使用Liferay自带的aui:tree标签 #

Liferay的AUI框架原生提供了aui:tree组件，开箱即支持复选框选择、层级结构渲染，还能轻松配置子节点动态加载，完全匹配你的需求。

具体实现步骤： #

• JSP页面引入标签库
  先在JSP顶部导入AUI标签库，才能使用树控件：

  <%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
  

• 页面配置带复选框的动态树
  直接在页面中添加aui:tree标签，开启核心功能：

  <aui:tree 
      id="dataCollectionTree"
      checkbox="true"
      dynamic="true"
      loaderURL="${renderRequest.contextPath}/tree-loader"
      rootNodeId="0"
  >
  </aui:tree>
  

  关键参数说明：

  • checkbox="true"：启用节点复选框选择功能
  • dynamic="true"：开启子节点动态加载模式
  • loaderURL：指定后端加载子节点的接口路径，需要你在Portlet中实现这个接口
  • rootNodeId：根节点的ID，一般设为0或业务逻辑中的顶级节点标识

• 实现后端节点加载接口
  在你的MVC Portlet中，通过ResourceCommand来处理树节点的加载请求，返回JSON格式的节点数据：

  @Component(
      property = {
          "javax.portlet.name=你的Portlet的名称",
          "javax.portlet.resource=/tree-loader"
      },
      service = ResourceCommand.class
  )
  public class TreeLoaderResourceCommand implements ResourceCommand {
  
      @Override
      public boolean serveResource(ResourceRequest request, ResourceResponse response) throws PortletException {
          try {
              long parentNodeId = ParamUtil.getLong(request, "nodeId");
              List<Map<String, Object>> nodes = new ArrayList<>();
  
              // 替换成你的业务逻辑：根据父节点ID查询子节点数据
              List<YourDataModel> childData = yourDataService.getChildData(parentNodeId);
              for (YourDataModel data : childData) {
                  Map<String, Object> node = new HashMap<>();
                  node.put("id", data.getId());
                  node.put("label", data.getName());
                  // 标记当前节点是否有子节点，决定是否显示展开箭头
                  node.put("hasChildren", yourDataService.hasChild(data.getId()));
                  nodes.add(node);
              }
  
              // 返回JSON响应给前端树控件
              JSONObject jsonObject = JSONObjectUtil.put("nodes", nodes);
              PortletResponseUtil.write(response, jsonObject.toString());
          } catch (Exception e) {
              e.printStackTrace();
          }
          return false;
      }
  }
  

2. 进阶自定义：结合Liferay Tree API #

如果需要更个性化的功能（比如自定义选中样式、节点操作按钮等），可以直接使用Liferay后端的Tree和TreeModel相关API，配合前端AUI树组件的JS接口做定制开发，比如通过JS监听节点选中事件、批量导出选中数据等：

var tree = A.one('#dataCollectionTree').getData('tree');
// 监听节点选中事件
tree.on('check', function(event) {
    var node = event.node;
    console.log('选中节点ID：', node.get('id'));
});
// 获取所有选中节点
var selectedNodes = tree.get('selectedNodes');

3. 注意事项 #

• 确保你的Portlet依赖的AUI版本和当前Liferay版本兼容，不同版本的AUI树参数可能略有差异
• 动态加载时一定要正确设置hasChildren属性，这是触发子节点加载的关键标识
• 如果需要持久化选中的节点数据，可以通过上述JS API获取选中节点后，提交到后端保存

内容的提问来源于stack exchange，提问作者tester.one