Question

我正在尝试显示包含一些基本节目数据的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();

我正在使用的HTML如下：

<!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>

网格不显示。什么显示看起来像网格显示的一部分，但没有出现。

我做了一些故障排除。我发现问题是＆＃34;数据绑定＆＃34;我在为testgrid.js中的showTitles对象中的复选框提供的cellTemplate定义中的语句。如果我删除这些语句，则显示网格，但我无法选中或取消选中复选框，并且无法获得复选框的状态。

有没有办法让这些复选框在kogrid中正常工作？如何让一个绑定到它们分配给它的布尔值？

有人请指教。

为了完整性，下面是样式表，名为lstyles.css：

#lstStyle {
   border: 4px solid #0055AA;
   width: 100%; 
   height: 400px;
   float: left;
}

.grpcheck {
   position:relative;
   top: 10px;
   left: 10px;
}

复选框问题，续

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

问题1：我注意到的第一件事是复选框状态不反映它们绑定的数据。无论isMovie和isCartoon的价值如何，每个节目的复选框都显示为未选中。例如：Johnny Quest将isCartoon设置为＆＃34; true＆＃34;。该列表显示该框未选中。星球大战Rogue One将isMovie设为真。它的电影盒是未经检查的。 Figure 1显示了我所看到的内容。

注意：此网站上的图像嵌入无效。即使链接图像似乎也被打破了。我正在为我的网站提供直接的HTTP链接，希望它们足以说明。

我更改了我的选择代码，以便它调用一个显示一个警告框的函数，该警告框显示了show name，isMovie值和isCartoon值的值。选择Johnny Quest，我看到isMovie和isCartoon值是正确的。所以我的第一个问题是：为什么没有反映其数据值的复选框？

问题2：我发现的另一个问题是，当我点击一个复选框时，它似乎不会保留我所做的更改。 Figure 2显示当我点击Johnny Quest的isMovie复选框时会发生什么。请注意，复选框已选中，但警告框仍将isMovie值显示为false。请注意，在复选框更改状态后，显示警告。

当我点击提醒框时，＆＃34; OK＆＃34;按钮，请在Figure 3中注明该复选框如何返回＆＃34;未选中＆＃34;州。事实上，我们在Figure 2中看到复选框的唯一原因是由于警报框导致的延迟！我知道这是因为作为一项实验，我暂时删除了警告框，刷新了浏览器，然后点击了Johnny Quest的电影复选框。有一个关于复选框被按下的简短指示，然后复选框返回到未选中状态。所以我的第二个问题是：为什么在选中或取消选中时，复选框是否显示相应的更改？

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

当我启动网格时，显示节目的顺序是Figure 1中显示的顺序。如果我点击＆＃34;显示名称＆＃34;列，排序列表看起来像Figure 4。

然后我点击Johnny Quest电影复选框，获取警告框，单击确定。 Figure 5显示复选框仍然保持不变。

现在，当我点击＆＃34;显示名称＆＃34;再次列，为了进行反向排序，请注意Figure 6中所有电影复选框会发生什么！

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

要取消选中它们，只需单击复选框，注意警告框中显示的错误状态，单击“确定”，然后选择。所有方框都将取消选中。

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

要点：在将控制放在自定义列中时，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();

Answer 1

这是你修复过的＆＃34;代码：

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
}
}

问题是＆＃34;数据＆＃34;这是记录的未定义属性。不得不把它改成$ data。并在select handler中添加self。警惕。

需要获取自定义复选框列才能在KoGrid

1 个答案: