Question

假设我们必须列出一个列表并将项目从一个列表复制到另一个列表，然后后悔并希望仅在双击或类似内容中删除复制的项目。

编辑：是否可以通过双击属性而不是索引来删除多选列表中的选定项目，即。名称？想法是稍后实现排序函数，然后索引将改变。

代码如下所示：

var SProcsViewModel = function () {
   var self = this;
   self.storedProceduresInDB1 = ko.observableArray([{
       Name: "Sp1",
       Id: 1
   }, {
       Name: "Sp2",
       Id: 2
   }, {
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp4",
       Id: 4
   }]);
   self.storedProceduresInDB2 = ko.observableArray([{
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp4",
       Id: 4
   }, {
       Name: "Sp7",
       Id: 7
   }, {
       Name: "Sp8",
       Id: 8
   }]);

   self.selectedStoredProceduresInDb1 = ko.observableArray();
   self.selectedStoredProceduresInDb2 = ko.observableArray();

   self.copyToDb2 = function () {
       var sprocs = [];
       console.log('self.selectedStoredProceduresInDb1()', self.selectedStoredProceduresInDb1());

       ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function (value) {
        // console.log('arrayForEach',value,self.storedProceduresInDB2);
       var match = ko.utils.arrayFirst(self.storedProceduresInDB2(), function (item) {
          console.log('item in storedProceduresInDB2', value, item);
          return value.Id === item.Id;
        });

        if (!match) {
            console.log('No match, so add to sprocs', value);
            sprocs.push(value);
        } else {
            console.log('Match found for:', value);
        }

       });

    ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function (value) {
        console.log('storedProceduresInDB1', value);
    });


    console.log('sprocs', sprocs);

    ko.utils.arrayPushAll(self.storedProceduresInDB2, sprocs)
    console.log('sprocs', sprocs, 'storedProceduresInDB2', self.storedProceduresInDB2());


   };

   return self;
};

ko.applyBindings(new SProcsViewModel());

JSFiddle

Answer 1

您可以使用event绑定订阅select的dblclick事件：

<select multiple="multiple" height="5" 
     data-bind=" options: storedProceduresInDB2, 
                 optionsText: 'Name', 
                 selectedOptions: selectedStoredProceduresInDb2, 
                 event: { dblclick: removeFromDb2 } "></select>

然后在事件处理程序中，您可以通过第二个参数中传递的事件对象访问当前选定的索引，并使用索引从数组中删除单击的项目：

self.removeFromDb2 = function(item, event){
    console.log(event.currentTarget.selectedIndex)
    self.storedProceduresInDB2.splice(event.currentTarget.selectedIndex, 1)
}

演示JSFiddle。

通过event参数，您还可以访问实际点击的option元素，您可以在其中获取元素的文本，即Name属性：

self.removeFromDb2 = function(item, event){
    self.storedProceduresInDB2.remove(function(item) {
        return item.Name == event.target.text;
    });
}

演示JSFiddle。

从dbl click上的多选列表中删除项目

1 个答案: