Jquery- ui 无法使用数组中的 js 列表生成器进行排序
Jquery- ui Sortable with js list maker from array not working properly
所以我正在尝试实现一个可排序的列表。但是,列表是使用数组中的 JavaScript 生成的。这个数组来自后端c#.
这是我的排序表 jquery -
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function (event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
success: writeCategories(positions);
console.log("positions written");
},
});
这是我的 JavaScript 生成列表的函数...
function makecategories(array) {
// Create the list element:
var list = document.createElement('ul');
list.id = "boo";
list.className = "sortable-list ui-sortable";
for (var i = 0; i < array.length; i++) {
// Create the list item:
var item = document.createElement('li');
item.id = i + 1;
item.className = "ui-sortable-handle";
item.style = '"margin: 1px; width: 130px; padding: 2px; vertical - align: middle;"';
// Set its contents:
item.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(item);
}
// Finally, return the constructed list:
return list;
}
下面是我如何从后端获取我的数组并调用我的 JS 函数
var categories = <%= this.javaSerial.Serialize(this.Menus) %>;
//alert(categories[3]);
document.getElementById('categories').appendChild(makecategories(categories));
这是我的HTML
<div id="categories">
</div>
这是我得到的结果-
Hen
Dog
Cat
但是这个列表是不可排序的。如有任何帮助,我们将不胜感激。
这是我试过的东西-
<div id="categories">
<ul class="sortable-list">
<li id="1"> Food </li>
<li id="2"> Drinks </li>
</ul>
<div>
这给了我一个结果-
Food
Drinks
Hen
Dog
Cat
其中食物和饮料列表是可排序的,母狗猫列表不可排序。
如有更多可能需要的信息,请随时问我。
考虑以下示例。
$(function() {
function makeSortList(arr, obj) {
if (obj == undefined) {
obj = "body";
}
obj = $(obj);
var list = $("<ul>", {
id: "boo",
class: "sortable-list"
});
$.each(arr, function(i, v) {
$("<li>", {
id: i + 1
}).html(v).css({
margin: "1px",
width: "130px",
padding: "2px",
verticalAlign: "middle"
}).appendTo(list);
});
list.appendTo(obj).sortable({
connectWith: '.sortable-list',
update: function(e, ui) {
var changedList = $(this).attr("id");
var order = $(this).sortable('toArray');
var positions = order.join(';');
//success: writeCategories(positions);
console.log("positions written", positions);
}
});
return list;
}
makeSortList(["Cat 1", "Cat 2", "Cat 3"], "#categories");
});
.sortable-list {
list-style-type: none;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="categories"></div>
您可以看到这从 Array 项创建了 List,然后在添加后初始化 Sortable。
所以我正在尝试实现一个可排序的列表。但是,列表是使用数组中的 JavaScript 生成的。这个数组来自后端c#.
这是我的排序表 jquery -
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function (event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
success: writeCategories(positions);
console.log("positions written");
},
});
这是我的 JavaScript 生成列表的函数...
function makecategories(array) {
// Create the list element:
var list = document.createElement('ul');
list.id = "boo";
list.className = "sortable-list ui-sortable";
for (var i = 0; i < array.length; i++) {
// Create the list item:
var item = document.createElement('li');
item.id = i + 1;
item.className = "ui-sortable-handle";
item.style = '"margin: 1px; width: 130px; padding: 2px; vertical - align: middle;"';
// Set its contents:
item.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(item);
}
// Finally, return the constructed list:
return list;
}
下面是我如何从后端获取我的数组并调用我的 JS 函数
var categories = <%= this.javaSerial.Serialize(this.Menus) %>;
//alert(categories[3]);
document.getElementById('categories').appendChild(makecategories(categories));
这是我的HTML
<div id="categories">
</div>
这是我得到的结果-
Hen
Dog
Cat
但是这个列表是不可排序的。如有任何帮助,我们将不胜感激。
这是我试过的东西-
<div id="categories">
<ul class="sortable-list">
<li id="1"> Food </li>
<li id="2"> Drinks </li>
</ul>
<div>
这给了我一个结果-
Food
Drinks
Hen
Dog
Cat
其中食物和饮料列表是可排序的,母狗猫列表不可排序。
如有更多可能需要的信息,请随时问我。
考虑以下示例。
$(function() {
function makeSortList(arr, obj) {
if (obj == undefined) {
obj = "body";
}
obj = $(obj);
var list = $("<ul>", {
id: "boo",
class: "sortable-list"
});
$.each(arr, function(i, v) {
$("<li>", {
id: i + 1
}).html(v).css({
margin: "1px",
width: "130px",
padding: "2px",
verticalAlign: "middle"
}).appendTo(list);
});
list.appendTo(obj).sortable({
connectWith: '.sortable-list',
update: function(e, ui) {
var changedList = $(this).attr("id");
var order = $(this).sortable('toArray');
var positions = order.join(';');
//success: writeCategories(positions);
console.log("positions written", positions);
}
});
return list;
}
makeSortList(["Cat 1", "Cat 2", "Cat 3"], "#categories");
});
.sortable-list {
list-style-type: none;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="categories"></div>
您可以看到这从 Array 项创建了 List,然后在添加后初始化 Sortable。