Fatal编程技术网
  • javascript/
  • Javascript 需要获取自定义复选框列才能在KoGrid中工作

Javascript 需要获取自定义复选框列才能在KoGrid中工作

javascript knockout.js

Javascript 需要获取自定义复选框列才能在KoGrid中工作,javascript,knockout.js,kogrid,Javascript,Knockout.js,Kogrid,我试图显示一个包含一些基本显示数据的KoGrid。网格中有一个嵌入式复选框，用于指示该节目是否为电影，另一个嵌入式复选框用于指示该节目是否为卡通。此网格的Javascript位于一个名为testgrid.js的文件中，如下所示： var theList = [ { isMovie: false, isCartoon: true, name: "Johnny Quest" }, { isMovie: true, isCartoon: tr

我试图显示一个包含一些基本显示数据的KoGrid。网格中有一个嵌入式复选框，用于指示该节目是否为电影，另一个嵌入式复选框用于指示该节目是否为卡通。此网格的Javascript位于一个名为testgrid.js的文件中，如下所示：

var theList = [
               { isMovie: false, isCartoon: true, name: "Johnny Quest" },
               { isMovie: true, isCartoon: true, name: "Heavy Metal" },
               { isMovie: true, isCartoon: false, name: "Star Wars Rogue One" },
               { isMovie: false, isCartoon: false, name: "The Invaders" },
               { isMovie: true, isCartoon: false, name: "Star Trek: The Voyage Home" },
               { isMovie: false, isCartoon: true, name: "Space Ghost" },
               { isMovie: false, isCartoon: false, name: "Star Trek Classic" },
               { isMovie: false, isCartoon: false, name: "Lost In Space" },
               { isMovie: false, isCartoon: true, name: "Bugs Bunny/Road Runner Hour" },
           ];

var showTitles = [
              {field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: theData.isMovie' />"},
              {field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: theData.isCartoon' />"},
              {field: 'name',displayName: 'Show Name',width: '78%'},
          ];

var TestModel = function() {
  var self = this;

  self.theData = ko.observableArray(theList);
  self.selectShow = ko.observableArray([]);

  self.instantiateSelf = function() {
       ko.applyBindings(theModel);
   }

  self.listOptions = {
      afterSelectionChange: function () { alert("Show Selected: "+selectShow()[0]); },
      data: self.theData,
      selectedItems: self.selectShow,
      displaySelectionCheckbox: false,
      multiSelect: false,
      columnDefs: showTitles
  }
}
var theModel = new TestModel();

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
   <title>Grid Test</title>
   <link href="lstyles.css" rel="stylesheet" type="text/css">
   <link href="KoGrid.css" rel="stylesheet" type="text/css">
   <script src="knockout-3.4.2.js" type="text/javascript"></script>
   <script src="jquery-3.2.0.js" type="text/javascript"></script>
   <script src="koGrid-2.1.1.js" type="text/javascript"></script>
   <script src="jquery-ui.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         jQuery.support.cors = true;
         theModel.instantiateSelf();
      });
   </script>
 </head>
<body>
  <div id="body">
     <div id="data">
        <div id="display">
          <div id="lstStyle" data-bind="koGrid: listOptions"></div>
        </div>
        <div id="footer">
        </div>
    </div>
  </div>
 <script>
 </script>
</div>  
   <script src="testgrid.js" type="text/javascript"></script>
</body>
</html>
复选框问题，续

多亏了donMateo，我做了一些更改，可以显示网格。一旦我能让它显示出来，我就开始点击复选框，看看它们是否有效。他们没有——或者说，他们没有像我希望的那样工作

问题1： 我注意到的第一件事是，复选框状态并不反映它们绑定到的数据。无论isMovie和isCartoon的值是多少，每个节目的复选框均未选中。例如：约翰尼·奎斯特将isCartoon设置为“true”。列表显示该框为未选中状态。《星球大战无赖一号》将伊斯莫维设定为真。其isMovie框未选中。显示了我所看到的

注意：此站点上的图像嵌入不起作用。甚至连图像的链接似乎都被破坏了。我提供直接的HTTP链接到我的网站，希望他们将足以说明

我更改了选择代码，以便它调用一个函数，该函数将显示一个警报框，其中显示show name、isMovie值和isCartoon值。选择Johnny Quest，我发现isMovie和isCartoon的值是正确的。所以我的第一个问题是：为什么复选框不能反映数据的值

问题2： 我发现的另一个问题是，当我单击复选框时，它似乎没有保留我所做的更改。显示当我点击Johnny Quest的isMovie复选框时发生的情况。请注意，复选框已选中，但警报框仍将isMovie值显示为false。请注意，复选框更改状态后将显示警报

当我单击警报框的“确定”按钮时，请注意复选框如何返回到“未选中”状态。事实上，我们在中看到复选框的唯一原因是警报框造成的延迟！我知道这一点，因为作为一个实验，我临时删除了警报框，刷新了浏览器，并点击了Johnny Quest的电影复选框。有一个复选框被按下的简短指示，然后复选框返回到未选中状态。因此，我的第二个问题是：为什么复选框在选中或取消选中时不显示相应的更改

问题3： 我发现的第三件也是最令人不安的事情是，复选框的状态显然发生了变化——但它没有显示这种变化，而且（更糟糕的是）它没有引起人们预期的变化。这可以通过在网格中重新显示数据来证明，在我的例子中是通过对数据进行排序

启动网格时，显示的顺序与中所示的顺序相同。如果我单击“showname”列，排序后的列表如下所示

然后单击Johnny Quest电影复选框，获取警报框，单击Ok。显示复选框如何保持不变

现在，当我再次点击“显示名称”列时，为了进行反向排序，请注意中所有电影复选框的情况

同样的事情也发生在卡通复选框上。单击其中一个，在警告框中单击“确定”，然后执行度假。将选中所有卡通复选框

要取消选中它们，只需单击复选框，注意警告框中显示的不正确状态，单击确定，然后单击resort。所有框都将被取消选中

所以我的第三个问题是：不同行中的复选框之间的链接是什么？更重要的是：如何断开此链接

总结： 在自定义列中添加控件时，KoGrod真是一团糟。对于复选框：复选框显示的数据与假定绑定到的单个数据设置不同步。尝试更改chekbox的选中状态不起作用，更改一个复选框会导致所有复选框都发生更改——但在重新绘制网格（使用排序或滚动或分页）之前，您不会看到该更改

这就引出了一个问题：单元格模板是否只是网格的显示模板？koGrid是否能够正确处理包含控件的自定义列？如果是，怎么做？当然不是，那么我在哪里可以找到一个网格控件呢

请有人给我建议

下面提供了当前的testgrid.js。没有其他文件被更改

var theList = [
               { isMovie: false, isCartoon: true, name: "Johnny Quest" },
               { isMovie: true, isCartoon: true, name: "Heavy Metal" },
               { isMovie: true, isCartoon: false, name: "Star Wars Rogue One" },
               { isMovie: false, isCartoon: false, name: "The Invaders" },
               { isMovie: true, isCartoon: false, name: "Star Trek: The Voyage Home" },
               { isMovie: false, isCartoon: true, name: "Space Ghost" },
               { isMovie: false, isCartoon: false, name: "Star Trek Classic" },
               { isMovie: false, isCartoon: false, name: "Lost In Space" },
               { isMovie: false, isCartoon: true, name: "Bugs Bunny/Road Runner Hour" },
           ];

var showTitles = [
              {field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isMovie' />"},
              {field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isCartoon' />"},
              {field: 'name',displayName: 'Show Name',width: '78%'},
          ];

var TestModel = function() {
   var self = this;

   self.theData = ko.observableArray(theList);
   self.selectShow = ko.observableArray([]);

   self.instantiateSelf = function() {
        ko.applyBindings(theModel);
   }

   self.displaySelect = function() {
      alert("Show Selected: "+self.selectShow()[0].name+" Movie: "+self.selectShow()[0].isMovie+" Cartoon: "+self.selectShow()[0].isCartoon);
   }

   self.listOptions = {
        afterSelectionChange: function () { self.displaySelect(); },
        data: self.theData,
        selectedItems: self.selectShow,
        displaySelectionCheckbox: false,
        multiSelect: false,
        columnDefs: showTitles
   }
}
var theModel = new TestModel();

var-theList=[
{isMovie:false，isCartoon:true，名字：“Johnny Quest”}，
{isMovie:true，isCartoon:true，名称：“重金属”}，
{isMovie:true，isCartoon:false，名字：“星球大战流氓一号”}，
{isMovie:false，isCartoon:false，名字：“入侵者”}，
{伊斯莫维：对，伊斯卡顿：错，名字：“星际迷航：回家的旅程”}，
{isMovie:false，isCartoon:true，名字：“太空幽灵”}，
{isMovie:false，isCartoon:false，名字：“星际迷航经典”}，
{isMovie:false，isCartoon:false，名字：“迷失在太空”}，
{isMovie:false，isCartoon:true，name:“Bugs Bunny/Road Runner Hour”}，
];
var showTitles=[
{字段：'isMovie'，显示名：'Movie'，宽度：'10%，单元格模板：'}，
{字段：'isCartoon'，显示名称：'Cartoon'，宽度：'10%，单元格模板：'}，
{字段：“名称”，显示名称：“显示名称”，宽度：“78%”，
];
var TestModel=function（）{
var self=这个；
self.theData=ko.observearray（列表）；
self.selectShow=ko.observearray（[]）；
self.instantiateSelf=函数（）{
ko.应用绑定（模型）；
}
self.displaySelect=函数（）{
警报（“显示选定内容：+self.selectShow（）[0]。名称+”电影：+self.selectShow（）[0]。iMovie+”卡通：+s

var theList = [
               { isMovie: false, isCartoon: true, name: "Johnny Quest" },
               { isMovie: true, isCartoon: true, name: "Heavy Metal" },
               { isMovie: true, isCartoon: false, name: "Star Wars Rogue One" },
               { isMovie: false, isCartoon: false, name: "The Invaders" },
               { isMovie: true, isCartoon: false, name: "Star Trek: The Voyage Home" },
               { isMovie: false, isCartoon: true, name: "Space Ghost" },
               { isMovie: false, isCartoon: false, name: "Star Trek Classic" },
               { isMovie: false, isCartoon: false, name: "Lost In Space" },
               { isMovie: false, isCartoon: true, name: "Bugs Bunny/Road Runner Hour" },
           ];

var showTitles = [
              {field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isMovie' />"},
              {field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isCartoon' />"},
              {field: 'name',displayName: 'Show Name',width: '78%'},
          ];

var TestModel = function() {
   var self = this;

   self.theData = ko.observableArray(theList);
   self.selectShow = ko.observableArray([]);

   self.instantiateSelf = function() {
        ko.applyBindings(theModel);
   }

   self.displaySelect = function() {
      alert("Show Selected: "+self.selectShow()[0].name+" Movie: "+self.selectShow()[0].isMovie+" Cartoon: "+self.selectShow()[0].isCartoon);
   }

   self.listOptions = {
        afterSelectionChange: function () { self.displaySelect(); },
        data: self.theData,
        selectedItems: self.selectShow,
        displaySelectionCheckbox: false,
        multiSelect: false,
        columnDefs: showTitles
   }
}
var theModel = new TestModel();



var theList = [
           { isMovie: false, isCartoon: true, name: "Johnny Quest" },
           { isMovie: true, isCartoon: true, name: "Heavy Metal" },
           { isMovie: true, isCartoon: false, name: "Star Wars Rogue One" },
           { isMovie: false, isCartoon: false, name: "The Invaders" },
           { isMovie: true, isCartoon: false, name: "Star Trek: The Voyage Home" },
           { isMovie: false, isCartoon: true, name: "Space Ghost" },
           { isMovie: false, isCartoon: false, name: "Star Trek Classic" },
           { isMovie: false, isCartoon: false, name: "Lost In Space" },
           { isMovie: false, isCartoon: true, name: "Bugs Bunny/Road Runner Hour" },
       ];
var showTitles = [
          {field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isMovie' />"},
          {field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isCartoon' />"},
          {field: 'name',displayName: 'Show Name',width: '78%'},
      ];
var showTitles = [
          {field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isMovie' />"},
          {field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isCartoon' />"},
          {field: 'name',displayName: 'Show Name',width: '78%'},
      ];
var TestModel = function() {
var self = this;

self.theData = ko.observableArray(theList);
self.selectShow = ko.observableArray([]);

self.instantiateSelf = function() {
   ko.applyBindings(theModel);
}

self.listOptions = {
  afterSelectionChange: function () { alert("Show Selected: "+self.selectShow()[0].name); },
  data: self.theData,
  selectedItems: self.selectShow,
  displaySelectionCheckbox: false,
  multiSelect: false,
  columnDefs: showTitles
}
}