需要让自定义复选框列在 KoGrid 中工作
Need to get custom checkbox columns to work in KoGrid
我正在尝试显示包含一些基本演出数据的 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>
网格不显示。显示内容看起来像网格显示的一部分，但什么也没有显示。
我做了一些故障排除。我发现问题出在我为 testgrid.js 中的 showTitles 对象中的复选框提供的 cellTemplate 定义中的 "data-bind" 语句。如果删除这些语句，网格会显示，但我无法选中或取消选中复选框，也无法获取复选框的状态。
有没有办法让这些复选框在 kogrid 中正常工作？如何让一个绑定到分配给它们的布尔值？
有人请指教
为了完整起见，下面是样式表，名称为 lstyles.css:
#lstStyle {
border: 4px solid #0055AA;
width: 100%;
height: 400px;
float: left;
}
.grpcheck {
position:relative;
top: 10px;
left: 10px;
}
复选框问题，续
感谢 donMateo，我做了一些更改，使我能够显示网格。一旦我能够显示它，我就开始单击复选框以查看它们是否有效。它们没有——或者更确切地说，它们没有按照我希望的方式工作。
问题一：
我注意到的第一件事是复选框状态不反映它们绑定到的数据。无论 isMovie 和 isCartoon 的值如何，每个节目的复选框都未选中。例如：Johnny Quest 将 isCartoon 设置为 "true"。该列表显示该框未选中。星球大战侠盗一号将 isMovie 设置为 true。它的 isMovie 框未选中。 Figure 1 展示了我所看到的。
注意：该站点上的图像嵌入无效。甚至 linking 图像似乎也被破坏了。我正在为我的网站提供直接的 HTTP links，希望它们足以说明。
我更改了我的选择代码，以便它调用一个函数来显示一个警告框，其中显示了节目名称的值、isMovie 值和 isCartoon 值。选择 Johnny Quest，我看到 isMovie 和 isCartoon 值是正确的。所以我的第一个问题是：为什么复选框不反映其数据的值？
问题二：
我发现的另一个问题是，当我点击一个复选框时，它似乎没有保留我所做的更改。 Figure 2 显示当我点击 Johnny Quest 的 isMovie 复选框时发生的情况。请注意，该复选框已选中，但警告框仍将 isMovie 值显示为 false。请注意，在复选框状态更改之后显示警报。
当我单击警告框的 "OK" 按钮时，请注意 图 3 复选框如何返回到 "unchecked" 状态。事实上，我们在 Figure 2 中看到选中框的唯一原因是因为警告框造成的延迟！我知道这是因为作为实验，我暂时删除了警告框，刷新了浏览器，然后单击了 Johnny Quest 的 Movie 复选框。有一个复选框被按下的简短指示，然后复选框又回到未选中状态。所以我的第二个问题是：为什么复选框在选中或未选中时不显示适当的更改？
问题三：
第三个也是我发现的最令人不安的事情是，复选框的状态显然发生了变化——但它没有显示这种变化，而且（更糟的是）它不会导致人们期望的变化。这可以通过重新显示网格中的数据来证明，在我的例子中是通过对数据进行排序。
当我启动网格时，显示的顺序是Figure 1中显示的顺序。如果我单击 "Show Name" 列，排序后的列表看起来像 图 4。
然后我点击 Johnny Quest 电影复选框，得到警告框，点击确定。 Figure 5 显示复选框如何仍未更改。
现在，当我再次点击 "Show Name" 列时，为了进行反向排序，请注意 所有 Figure 6 中的电影复选框发生了什么!
同样的事情也发生在卡通复选框上。单击其中一个，单击警报框上的确定，然后再执行一个操作。将选中所有卡通复选框。
要取消选中它们，只需单击选中的框，注意警告框中显示的不正确状态，单击“确定”，然后再执行。所有复选框都将取消选中。
所以我的第三个问题是：不同行的复选框之间的 link 是什么？更重要的是：我该如何切断这个 link???
总结：
在将控件放入自定义列中时，KoGrod 确实搞砸了。对于复选框：复选框显示的数据与应该绑定到的单个数据设置不同步。尝试更改复选框的选中状态是行不通的，更改一个复选框会导致所有复选框都发生更改——但在重新绘制网格（使用排序或可能使用滚动或分页）之前，您看不到该更改。
这就引出了一个问题：单元格模板是否只是一个网格的显示模板？ 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();
这是您的 "repaired" 代码：
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
}
}
问题是 "theData" 未定义 属性 的记录。必须将其更改为 $data。
并在 select 处理程序中添加 self.处于警戒状态。
我正在尝试显示包含一些基本演出数据的 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>
网格不显示。显示内容看起来像网格显示的一部分，但什么也没有显示。
我做了一些故障排除。我发现问题出在我为 testgrid.js 中的 showTitles 对象中的复选框提供的 cellTemplate 定义中的 "data-bind" 语句。如果删除这些语句，网格会显示，但我无法选中或取消选中复选框，也无法获取复选框的状态。
有没有办法让这些复选框在 kogrid 中正常工作？如何让一个绑定到分配给它们的布尔值？
有人请指教
为了完整起见，下面是样式表，名称为 lstyles.css:
#lstStyle {
border: 4px solid #0055AA;
width: 100%;
height: 400px;
float: left;
}
.grpcheck {
position:relative;
top: 10px;
left: 10px;
}
复选框问题，续
感谢 donMateo，我做了一些更改，使我能够显示网格。一旦我能够显示它，我就开始单击复选框以查看它们是否有效。它们没有——或者更确切地说，它们没有按照我希望的方式工作。
问题一： 我注意到的第一件事是复选框状态不反映它们绑定到的数据。无论 isMovie 和 isCartoon 的值如何，每个节目的复选框都未选中。例如：Johnny Quest 将 isCartoon 设置为 "true"。该列表显示该框未选中。星球大战侠盗一号将 isMovie 设置为 true。它的 isMovie 框未选中。 Figure 1 展示了我所看到的。
注意：该站点上的图像嵌入无效。甚至 linking 图像似乎也被破坏了。我正在为我的网站提供直接的 HTTP links，希望它们足以说明。
我更改了我的选择代码，以便它调用一个函数来显示一个警告框，其中显示了节目名称的值、isMovie 值和 isCartoon 值。选择 Johnny Quest，我看到 isMovie 和 isCartoon 值是正确的。所以我的第一个问题是：为什么复选框不反映其数据的值？
问题二： 我发现的另一个问题是，当我点击一个复选框时，它似乎没有保留我所做的更改。 Figure 2 显示当我点击 Johnny Quest 的 isMovie 复选框时发生的情况。请注意，该复选框已选中，但警告框仍将 isMovie 值显示为 false。请注意，在复选框状态更改之后显示警报。
当我单击警告框的 "OK" 按钮时，请注意 图 3 复选框如何返回到 "unchecked" 状态。事实上，我们在 Figure 2 中看到选中框的唯一原因是因为警告框造成的延迟！我知道这是因为作为实验，我暂时删除了警告框，刷新了浏览器，然后单击了 Johnny Quest 的 Movie 复选框。有一个复选框被按下的简短指示，然后复选框又回到未选中状态。所以我的第二个问题是：为什么复选框在选中或未选中时不显示适当的更改？
问题三： 第三个也是我发现的最令人不安的事情是，复选框的状态显然发生了变化——但它没有显示这种变化，而且（更糟的是）它不会导致人们期望的变化。这可以通过重新显示网格中的数据来证明，在我的例子中是通过对数据进行排序。
当我启动网格时，显示的顺序是Figure 1中显示的顺序。如果我单击 "Show Name" 列，排序后的列表看起来像 图 4。
然后我点击 Johnny Quest 电影复选框，得到警告框，点击确定。 Figure 5 显示复选框如何仍未更改。
现在，当我再次点击 "Show Name" 列时，为了进行反向排序，请注意 所有 Figure 6 中的电影复选框发生了什么!
同样的事情也发生在卡通复选框上。单击其中一个，单击警报框上的确定，然后再执行一个操作。将选中所有卡通复选框。
要取消选中它们，只需单击选中的框，注意警告框中显示的不正确状态，单击“确定”，然后再执行。所有复选框都将取消选中。
所以我的第三个问题是：不同行的复选框之间的 link 是什么？更重要的是：我该如何切断这个 link???
总结： 在将控件放入自定义列中时，KoGrod 确实搞砸了。对于复选框：复选框显示的数据与应该绑定到的单个数据设置不同步。尝试更改复选框的选中状态是行不通的，更改一个复选框会导致所有复选框都发生更改——但在重新绘制网格（使用排序或可能使用滚动或分页）之前，您看不到该更改。
这就引出了一个问题：单元格模板是否只是一个网格的显示模板？ 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();
这是您的 "repaired" 代码：
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
}
}
问题是 "theData" 未定义 属性 的记录。必须将其更改为 $data。 并在 select 处理程序中添加 self.处于警戒状态。