Нужно, чтобы в 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>
Сетка не отображается. То, что отображается, выглядит как часть отображения сетки, но ничего не появляется.
Я сделал некоторые проблемы. Я обнаружил, что проблема заключается в операторах "привязки данных" в определении cellTemplate, которые я устанавливаю для флажков в объекте showTitles в testgrid.js. Если я удаляю эти операторы, отображается сетка, но я не могу установить или снять флажки, и не могу получить состояние флажков.
Есть ли способ заставить эти флажки работать должным образом в 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 установлено значение "true". Список показывает, что поле не отмечено. Star Wars Rogue One установили для isMovie значение true. Его коробка isMovie снята. Рисунок 1 показывает, что я вижу.
ПРИМЕЧАНИЕ. Изображение на этом сайте не работает. Кажется, что даже ссылки на изображения не работают. Я предоставляю прямые ссылки HTTP на мой сайт, надеясь, что их будет достаточно для иллюстрации.
Я изменил свой код выбора, чтобы он вызывал функцию, которая отображает окно предупреждения, в котором отображаются значения имени шоу, значения isMovie и значения isCartoon. Выбрав Johnny Quest, я вижу, что значения isMovie и isCartoon верны. Итак, моя первая проблема: почему флажки не отражают значения их данных?
Проблема 2: Еще одна проблема, которую я обнаружил, заключалась в том, что, когда я нажимаю на флажок, он не сохраняет изменения, которые я сделал. На рисунке 2 показано, что происходит, когда я нажимаю на флажок Джонни Квеста isMovie. Обратите внимание, что флажок установлен, но в окне предупреждения все еще отображается значение isMovie как false. Обратите внимание, что предупреждение отображается после изменения состояния флажка.
Когда я нажимаю кнопку "ОК" окна оповещения, обратите внимание на рис. 3, как флажок возвращается в состояние "не проверено". Фактически, единственная причина, по которой мы видим флажок на рисунке 2, заключается в задержке, вызванной блоком предупреждений! Я знаю это, потому что в качестве эксперимента я временно убрал окно оповещения, обновил браузер и щелкнул флажок "Фильм" для "Джонни Квест". Был краткий признак нажатия на флажок, затем флажок вернулся к тому, чтобы быть снятым. Итак, моя вторая проблема: почему флажок не отображает соответствующие изменения, когда отмечен или не отмечен?
Проблема 3: Третья и самая тревожная вещь, которую я обнаружил, заключается в том, что для флажков, по-видимому, происходит изменение состояния, но оно не показывает это изменение и (что еще хуже) не вызывает ожидаемых изменений. Это можно продемонстрировать, вызвав повторное отображение данных в сетке, в моем случае путем сортировки данных.
Когда я запускаю сетку, порядок, в котором отображаются шоу, соответствует порядку, показанному на рисунке 1. Если я нажму на столбец "Показать имя", отсортированный список будет выглядеть как на рисунке 4.
Затем я нажимаю на флажок "Джонни Квест", получаю окно с предупреждением и нажимаю "ОК". На рисунке 5 показано, как флажок остается неизменным.
Теперь, когда я снова нажму на столбец "Показать имя", чтобы выполнить обратную сортировку, обратите внимание, что происходит со всеми флажками фильма на рисунке 6!
То же самое происходит с флажками мультфильма. Нажмите на один, нажмите Ok в окне предупреждения, затем сделайте курорт. Все флажки мультфильмов будут проверены.
Чтобы снять их, просто установите флажок, отметьте неправильное состояние, отображаемое в окне предупреждения, нажмите "ОК", а затем прибегните. Все коробки будут сняты.
Итак, моя третья проблема: какова связь между флажками в разных строках? Более важно: как мне разорвать эту ссылку???
Описание: 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();
1 ответ
Вот ваш "отремонтированный" код:
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. И в выбранный обработчик добавить себя. в боевой готовности.