Кнопка Fineuploader отсутствует после перемещения сортируемой таблицы. Элементы плагина отсутствуют в сортируемой таблице, если строка перемещена
Я работал с knockout.js и knockout-sortable.js. Для того, чтобы создать сортируемую таблицу. Один из столбцов этой таблицы должен загружать изображения и при этом иметь возможность сортировать таблицу. Загрузка работает нормально, но тогда, когда я сортирую таблицу, кнопка мелкого загрузчика пропускается, и все атрибуты.
Скрипка: http://jsfiddle.net/XdevK/6/
Действия по воспроизведению:
- Нажмите Добавить актив
- Нажмите еще раз Добавить актив.
- Переместите второй актив на первую позицию. Кнопка Fineuploader отсутствует.
На самом деле происходит то, что содержимое div удаляется после завершения сортировки.
Код Js:
var CommunityAsset = function(value, description, name) {
this.Value = value;
this.Description = ko.observable(description);
this.Name = "fineUploader" + name;
}
var viewOverview = function()
{
var self = this;
self.communityAssets = ko.observableArray();
self.clearAsset = function(data, event) {
self.communityAssets.remove(data);
};
self.Uploaders = {};
self.addAsset = function() {
var name = self.communityAssets().length;
var asset = new CommunityAsset("http://placehold.it/240x160", "", name);
self.communityAssets.push(asset);
createFineUploader(name);
};
self.addAssetWithParams = function(value, description, name) {
var asset = new CommunityAsset(value, description, name);
self.communityAssets.push(asset);
createFineUploader(name);
};
}
var vc = new viewOverview();
vc.addAssetWithParams("http://placehold.it/240x160", "Hola",0);
ko.applyBindings(vc, $("#communityOverview")[0]);
function createFineUploader(intIndex)
{
vc.Uploaders[intIndex] = new qq.FineUploader({
element: $('#fineUploader'+intIndex)[0],
request: {
endpoint: '/Communities/FileUpload'
},
autoUpload: true,
sizeLimit: 4000000, // max size
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif']
},
text: {
uploadButton: '<i class="icon-upload icon-white"></i> Upload a file'
},
multiple: false,
template: '<div class="qq-uploader ">' +
'<pre class="qq-upload-drop-area "><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
},
callbacks: {
onComplete: function(id, name, response) {
if (response.success)
{
var asset = ko.utils.arrayFirst(vc.communityAssets(), function(currentAsset) {
return currentAsset.Name == "fineUploader"+intIndex; // <-- is this the desired seat?
});
// asset found?
if (asset) {
asset.Value = response.path;
}
}
}
},
debug: true
});
}
Html
<div class="tab-pane" id="communityOverview">
<table class="table" >
<thead>
<tr>
<th>Sort Order</th>
<th>Community Overview Image</th>
<th>Community Overview Image Description</th>
</tr>
</thead>
<tbody data-bind="sortable: communityAssets">
<tr>
<td class="item"><span data-bind="text: $index" ></span>
</td>
<td class="item">
<div class="image-options">
<div class="control-group">
<div class="controls">
<img style="width:240px; height:160px;" data-bind="attr:{src: Value}" />
</div>
<br />
<div data-bind="attr: {id:Name}"></div>
</div>
</div><!-- .image-options -->
<a href="Javascript:void(0);" data-bind="click: $root.clearAsset ">Delete Asset</a>
</td>
<td class="item">
<textarea class="input-block-level" rows="11" cols="3" data-bind="value: Description"></textarea>
</td>
</tr>
</tbody>
</table>
<a href="#" data-bind="click: addAsset">Add Task</a>
</div>
Я думаю, что на самом деле происходит то, что сортируемый воссоздает таблицу. Это означает, что я должен запустить воссоздание библиотеки Fineuploader по обратному вызову сортировки.
Как сделать так, чтобы кнопка оставалась такой, какой она есть после завершения сортировки?
1 ответ
Решение
Я решил воссоздать fileUploader (это может произойти с любым другим плагином, вставленным в сортируемую таблицу).
Это было довольно легко.
Вот код (не в jsfiddle, потому что я бы потерял время на создание сценария).
HTML
<table class="table">
<thead>
<tr>
<th>
Sort Order
</th>
<th>
Community Overview Image
</th>
<th>
Community Overview Image Description
</th>
</tr>
</thead>
<tbody data-bind="sortable: communityAssets">
<tr>
<td class="item">
<span data-bind="text: $index"></span>
</td>
<td class="item">
<div class="image-options">
<div class="control-group">
<div class="controls">
<img style="width:240px; height:160px;" data-bind="attr:{src: URL}"/>
</div>
<br/>
<div data-bind="attr: {id: 'fineUploader' + Name}">
</div>
</div>
</div>
<!-- .image-options -->
<a href="Javascript:void(0);" data-bind="click: $root.clearAsset ">Delete Asset</a>
</td>
<td class="item">
<textarea class="input-block-level" rows="11" cols="3" data-bind="value: Description"></textarea>
</td>
</tr>
</tbody>
</table>
Javascript:
var CommunityAsset = function(value, description, name, url) {
this.URL = url;
this.Value = value;
this.Description = ko.observable(description);
this.Name = name;
this.FileName = "";
this.FileSize = "";
}
var viewOverview = function()
{
var self = this;
self.communityAssets = ko.observableArray();
self.clearAsset = function(data, event) {
self.communityAssets.remove(data);
};
self.Uploaders = {};
self.addAsset = function() {
var name = self.communityAssets().length;
var asset = new CommunityAsset("", "", name, "http://placehold.it/240x160");
self.communityAssets.push(asset);
createFineUploader(name);
};
self.addAssetWithParams = function(value, description, name, url) {
var asset = new CommunityAsset(value, description, name, url);
self.communityAssets.push(asset);
};
self.recreateUploaders = function(arg) {
createFineUploader(arg.item.Name);
if (arg.item.FileName != "")
{
$("#fineUploader"+arg.item.Name+" .qq-upload-list").append('<li class=" alert alert-success"><span class="qq-upload-file">'+arg.item.FileName+
'</span><span class="qq-upload-size" style="display: inline;">'+arg.item.FileSize+'</span></li>');
}
function createFineUploader(intIndex)
{
vc.Uploaders[intIndex] = new qq.FineUploader({
element: $('#fineUploader'+intIndex)[0],
request: {
endpoint: '/Communities/FileUpload'
},
autoUpload: true,
sizeLimit: 4000000, // max size
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif']
},
text: {
uploadButton: '<i class="icon-upload icon-white"></i> Upload a file'
},
multiple: false,
template: '<div class="qq-uploader ">' +
'<pre class="qq-upload-drop-area "><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
},
callbacks: {
onComplete: function(id, name, response) {
if (response.success)
{
var asset = ko.utils.arrayFirst(vc.communityAssets(), function(currentAsset) {
return currentAsset.Name == intIndex; // <-- is this the desired seat?
});
if (asset) {
var number = response.size;
var size = "";
if (number >= 1048576)
{
number = number / 1048576;
size = "MB";
}
else
{
number = number / 1024;
size = "kB";
}
asset.FileSize = number.toFixed(1) + "" + size;
asset.FileName = response.fileName;
asset.Value = response.path;
}
}
}
},
debug: true
});
}
};
}
var vc = new viewOverview();
ko.bindingHandlers.sortable.afterMove = vc.recreateUploaders;
ko.applyBindings(vc, $("#communityOverview")[0]);
Волшебство сделано с ko.bindingHandlers.sortable.afterMove = vc.recreateUploaders;Поэтому после перемещения строки мы воссоздаем создание плагина. Я добавил часть FileName, это было сделано потому, что если вы загрузили файл правильно, метка имени файла также будет удалена, если строка будет перемещена, поэтому это снова добавит метку FileName.
Надеюсь, это поможет кому-то!