挖空：HTML表格显示额外的信息

我坚持一个问题，我相信很简单，但不知何故无法解决。我有一个简单的HTML表格，显示雇员名单。该表的最后一列有一个超链接（称为“显示附加信息”）。当用户点击此链接时，我想在他的数据行下方显示有关该特定员工的附加信息。显示选定行的额外值的逻辑应该是什么？用我的逻辑，它使所有的行都可见。我们正在使用淘汰赛框架。挖空：HTML表格显示额外的信息

HTML表格

<table id="employees-data" data-bind="if: employeesList().length > 0"> 
    <tbody data-bind="foreach: employeesList"> 
     <tr> 
     <td data-bind ="text: $index() + 1"></td> 
     <td data-bind ="text: moment(dateCreated).format('llll')"></td> 
     <td data-bind ="text: empName"></td> 
     <td data-bind ="text: empBirthDate"></td> 
     <td data-bind ="text: empCity"></td> 
     <td><a data-bind="ifnot: additionalInfo == null, attr: { title: additionalInfo}, 
       click: $parent.toggleAdditionalInfoDisplay">Show Additional Information</a></td> 
     </tr> 
     <tr><td colspan="6" data-bind="visible: $parent.showAdditionalInfo, text: additionalInfo"></td></tr> 
    </tbody> 
    </table>

JS文件：

self.showAdditionalInfo = ko.observable(false); 
    self.toggleAdditionalInfoDisplay = function() { 
     self.showAdditionalInfo(!self.showAdditionalInfo()); 
     alert('showRow is now ' + self.showAdditionalInfo()); 
    };

来源

2016-12-01 user1270392

您可以使用knockout mapping插件来创建一个雇员有一个属性来处理visible只是该行结合。

比方说，你有数据在以下方式从服务器来 -

var dataFromServer = [{ 
    name: "abc", 
    id: 123, 
    gender: "female", 
    favoriteFood: "Sphagetti" 
    }, { 
    name: "xyz", 
    id: 456, 
    gender: "male", 
    favoriteFood: "Pasta" 
}];

现在，你会去建立从映射的Employee插上像这样 -

var mappingOptions = { 
    create: function(options) { 
     return new Employees(options.data); 
    } 
    }; 

    self.employees = ko.observableArray([]); 

    function Employees(data) { 
    var self = this; 
    if (data !== null) { 
     self.name = ko.observable(data.name); 
     self.id = ko.observable(data.id); 
     self.ifShowAdditionalInformation = ko.observable(false); 
     self.favoriteFood = ko.observable(data.favoriteFood); 
     self.additionalInfo = "My favorite food is " + self.favoriteFood(); 
     self.toggleAdditionalInfoDisplay = function() { 
     self.ifShowAdditionalInformation(!self.ifShowAdditionalInformation()); 
     } 
    } 
    } 

    var mappedEmployees = ko.mapping.fromJS(dataFromServer, mappingOptions); 

    self.employees(mappedEmployees());

正如你可以注意到，这是如何让您更好地控制单个行。 toggleAdditionalInfoDisplay仅对正被点击的行触发，而其他行不受影响。此外，ifShowAdditionalInformation控制它所在行的可见性。

Fiddle

来源

2016-12-01 06:20:44 gkb

非常感谢！但通过编写一个自定义JS函数解决了这个问题虽然，您提供的解决方案更好，但只是因为我没有自由修改我的虚拟机（由其他组件控制） – user1270392

解决了这个通过下面的方法JS：

self.showAdditionalInfo = ko.observable(false); 
self.additionalInfoLinkIndex = ko.observable(false); 

self.toggleAdditionalInfoDisplay = function(data, event) { 
      //get the id of clicked link 
      var clickedElementId = event.target.id; 

      //if additional info view is already open, showAdditionalInfo is true 
      if(self.showAdditionalInfo()) { 
       //If current open item index is same as clickedElement index, 
       //then close the view 
       if(self.additionalInfoLinkIndex() == clickedElementId) { 
        self.showAdditionalInfo(false); 
        return; 
       } 
      } 
      self.additionalInfoLinkIndex(clickedElementId); 
      self.showAdditionalInfo(true); 
     };

HTML：

显示其他信息链接

<td> 
      <a style="cursor:pointer;" id="$index()" 
      data-bind="ifnot: additionalInfo == null, 
      attr: { id: $index(), 
      title: additionalInfo}, click: $parent.toggleAdditionalInfoDisplay">View 
      </a> 
     </td>

行可以显示更多的信息

<tr> 
<td colspan="6" data-bind="visible: $parent.showAdditionalInfo() && $parent.additionalInfoLinkIndex() == $index()"> 
    <pre data-bind="text: additionalInfo"></pre> 
</td> 
</tr>

来源

2016-12-02 08:58:29 user1270392

挖空：HTML表格显示额外的信息

回答

相关问题