KnockoutJS数据网格单行可编辑实现问题求助

你的问题核心在于全局共享了一个模板选择变量——selectedTemplate，当点击Edit按钮切换它的值时，所有行都会响应这个全局状态，导致全部变成编辑状态。要实现单行独立编辑，我们需要让每一行自己控制是否处于编辑状态，而非依赖全局变量。

下面是具体的修改方案：

步骤1：给每个Room对象添加编辑状态标识 #

你的RoomDTO是普通数据类，我们需要在加载数据时给每个room对象追加一个可观察的isEditing属性，用来标记当前行的编辑状态。修改updateRoomList方法：

private updateRoomList(result: Array<RoomDTO>) {
    this.roomList.removeAll();
    result.forEach((value, index) => {
        // 给每个room添加可观察的编辑状态，初始为非编辑
        const roomWithEditState = {
            ...value,
            isEditing: ko.observable(false)
        };
        this.roomList.push(roomWithEditState);
    });
}

步骤2：修改模板绑定逻辑 #

不再使用全局的selectedTemplate，而是让每一行根据自身的isEditing状态选择对应模板。更新tbody的绑定代码：

<tbody id="room" data-bind="foreach: roomList">
    <!-- 非编辑状态用展示模板 -->
    <!-- ko if: !isEditing() -->
        <tr data-bind="template: {name: 'baseTemplate'}"></tr>
    <!-- /ko -->
    <!-- 编辑状态用编辑模板 -->
    <!-- ko if: isEditing() -->
        <tr data-bind="template: {name: 'editTemplate'}"></tr>
    <!-- /ko -->
</tbody>

步骤3：修复模板的变量绑定问题 #

原来的editTemplate绑定了$root._id这类全局变量，会导致所有编辑行共享同一值。必须改成绑定当前item的属性：

<script type="text/html" id="editTemplate">
<tr>
    <td data-bind="text: id"></td>
    <td>
        <input type="text" class="form-control" data-bind="value: number" />
    </td>
    <td>
        <input type="text" class="form-control" data-bind="value: capacity" />
    </td>
    <td>
        <button type="button" data-bind="click: function() { $root.update($data) }">Update</button>
        <button type="button" data-bind="click: function() { isEditing(false) }">Cancel</button>
    </td>
</tr>
</script>

同时调整baseTemplate的Edit按钮逻辑，仅切换当前行的编辑状态：

<script type="text/html" id="baseTemplate">
<tr>
    <td data-bind="text: id"></td>
    <td data-bind="text: number"></td>
    <td data-bind="text: capacity"></td>
    <td>
        <button type="button" data-bind="click: function() { isEditing(true) }">Edit</button>
    </td>
</tr>
</script>

步骤4：精简ViewModel的冗余代码 #

删掉全局的selectedTemplate和_id/_number/_capacity变量，调整edit和update方法：

class RoomIndexVM {
    roomList: KnockoutObservableArray<any>; // 每个item已包含isEditing属性，可调整类型为扩展后的RoomDTO
    
    constructor() {
        this.roomList = ko.observableArray();
        // 移除原有的selectedTemplate、_id、_number、_capacity定义
    }

    // 删除原有的changeTemplate方法，已不再需要

    public edit(room: any) {
        // 可选：限制同时仅能编辑一行，先关闭所有行的编辑状态
        this.roomList().forEach(r => r.isEditing(false));
        room.isEditing(true);
    }

    public async update(room: any) {
        // 关闭当前行的编辑状态
        room.isEditing(false);
        // 直接将修改后的room对象传给更新接口
        console.log(await this.updateRoom(room));
        this.updateRoomList(await this.getAllRooms());
    }

    // 其余getAllRooms、updateRoom等方法保持不变
}

额外优化：限制同时仅编辑一行 #

如果需要确保同一时间只有一行处于编辑状态，edit方法里的遍历重置逻辑已经实现了这个功能，不需要额外修改。

这样修改后，点击某一行的Edit按钮只会让该行进入编辑状态，其他行保持展示状态，完美解决你的问题！

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