如何使用ListGrid展示指定文档的收藏记录集并实现过滤功能？

一、初始化ListGrid并绑定收藏记录数据源 #

1. 定义数据模型 #

先创建收藏记录的实体类，包含核心字段：

public class CollectRecord {
    private String id;
    private String documentId;
    private String documentTitle;
    private Date collectTime;
    private String userId;
    
    // 生成getter、setter及构造方法
}

2. 配置ListGrid并加载数据 #

初始化ListGrid实例，配置列信息后将指定文档的收藏记录绑定到组件：

// 创建ListGrid实例
ListGrid collectGrid = new ListGrid();
collectGrid.setWidth100();
collectGrid.setHeight100();
collectGrid.setShowHeader(true);

// 配置列字段
ListGridField idField = new ListGridField("id", "记录ID");
ListGridField docTitleField = new ListGridField("documentTitle", "文档标题");
ListGridField collectTimeField = new ListGridField("collectTime", "收藏时间");
collectTimeField.setType(ListGridFieldType.DATE);

collectGrid.setFields(idField, docTitleField, collectTimeField);

// 加载指定文档的收藏记录（实际项目中替换为DAO/API调用）
List<CollectRecord> targetCollects = getCollectsByDocumentId("目标文档ID");
ListGridRecord[] gridRecords = new ListGridRecord[targetCollects.size()];

for (int i = 0; i < targetCollects.size(); i++) {
    CollectRecord record = targetCollects.get(i);
    ListGridGridRecord gridRecord = new ListGridRecord();
    gridRecord.setAttribute("id", record.getId());
    gridRecord.setAttribute("documentTitle", record.getDocumentTitle());
    gridRecord.setAttribute("collectTime", record.getCollectTime());
    gridRecords[i] = gridRecord;
}

collectGrid.setData(gridRecords);

二、实现过滤机制 #

1. 内置快速过滤（轻量场景） #

利用ListGrid自带的过滤编辑器，快速实现列级过滤：

// 开启过滤编辑器
collectGrid.setShowFilterEditor(true);
// 设置输入时实时触发过滤
collectGrid.setFilterOnKeypress(true);

// 针对特定列配置过滤规则
// 文档标题使用模糊匹配
docTitleField.setFilterOperator(OperatorId.CONTAINS);
// 收藏时间使用日期范围选择器
collectTimeField.setFilterEditorType(DateRangeItem.class);

2. 自定义过滤面板（复杂场景） #

如果需要多条件组合过滤，可自定义过滤表单：

// 创建过滤表单
DynamicForm filterForm = new DynamicForm();
filterForm.setWidth100();
filterForm.setNumCols(3);

TextItem titleFilter = new TextItem("title", "文档标题");
DateItem startDateFilter = new DateItem("start", "开始时间");
DateItem endDateFilter = new DateItem("end", "结束时间");

filterForm.setFields(titleFilter, startDateFilter, endDateFilter);

// 过滤按钮
IButton filterBtn = new IButton("执行过滤");
filterBtn.addClickHandler(event -> {
    String titleKeyword = titleFilter.getValueAsString();
    Date start = startDateFilter.getValueAsDate();
    Date end = endDateFilter.getValueAsDate();

    // 构建过滤条件
    AdvancedCriteria criteria = new AdvancedCriteria();
    if (titleKeyword != null && !titleKeyword.isEmpty()) {
        criteria.addCriteria(new Criteria("documentTitle", OperatorId.CONTAINS, titleKeyword));
    }
    if (start != null) {
        criteria.addCriteria(new Criteria("collectTime", OperatorId.GREATER_THAN_OR_EQUAL, start));
    }
    if (end != null) {
        criteria.addCriteria(new Criteria("collectTime", OperatorId.LESS_THAN_OR_EQUAL, end));
    }

    // 应用过滤
    collectGrid.setFilterCriteria(criteria);
});

// 重置按钮
IButton resetBtn = new IButton("重置过滤");
resetBtn.addClickHandler(event -> {
    filterForm.clearValues();
    collectGrid.setFilterCriteria(null);
});

// 组装过滤栏与ListGrid
HLayout filterBar = new HLayout(10);
filterBar.addMember(filterForm);
filterBar.addMember(filterBtn);
filterBar.addMember(resetBtn);

VLayout mainLayout = new VLayout(10);
mainLayout.addMember(filterBar);
mainLayout.addMember(collectGrid);

3. 后端过滤（大数据量场景） #

当收藏记录数据量较大时，前端过滤性能不足，需在后端实现过滤逻辑：

• 前端传递过滤参数到后端：

filterBtn.addClickHandler(event -> {
    Map<String, Object> params = new HashMap<>();
    params.put("documentId", "目标文档ID");
    params.put("titleLike", titleFilter.getValueAsString());
    params.put("startTime", startDateFilter.getValueAsDate());
    params.put("endTime", endDateFilter.getValueAsDate());

    // 调用后端接口获取过滤后的数据
    RPCManager.callService("collectRecordService", params, response -> {
        List<CollectRecord> filteredList = (List<CollectRecord>) response.getData();
        ListGridRecord[] filteredRecords = convertToGridRecords(filteredList);
        collectGrid.setData(filteredRecords);
    });
});

• 后端SQL示例（MyBatis）：

<select id="getFilteredCollects" resultType="CollectRecord">
    SELECT id, document_id, document_title, collect_time, user_id
    FROM collect_record
    WHERE document_id = #{documentId}
    <if test="titleLike != null and titleLike != ''">
        AND document_title LIKE CONCAT('%', #{titleLike}, '%')
    </if>
    <if test="startTime != null">
        AND collect_time >= #{startTime}
    </if>
    <if test="endTime != null">
        AND collect_time <= #{endTime}
    </if>
</select>

内容的提问来源于stack exchange，提问作者Afshin shahriari