【发布时间】：2019-02-26 05:16:52
【问题描述】：
我有两个名为 categories 和 selected categories 的列表框。我使用 jQuery 添加了一个拖放功能，我可以从类别中拖放到所选类别列表框中。尽管该功能运行良好，但在将项目放入所选类别列表框后我还是遇到了问题。由于我的要求是将所选类别列表框中的所有项目都放入一个数组中，因此列表框项目计数returns 0。下面给出的是我尝试过的代码段（我尝试过使用for循环和foreach循环）。
Foreach 循环示例：
foreach (DataRowView drv in lbChosen.Items)
{
string categoryName = drv.ToString();
}
for 循环前：
for (int i = 0; i < lbChosen.Items.Count; i++)
{
string categoryName = lbChosen.Items[i].ToString();
}
下面给出的是用于实现拖放功能的代码段。 (Taken from this link)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v18.1, Version=18.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE HTML>
<html>
<head runat="server">
<title>How to drag and drop items from/to ASPxListBox using jQuery UI</title>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
<script type="text/javascript">
function InitalizejQuery() {
$('.lbItem').draggable(
{
helper: 'clone'
}
);
$('.listBoxLeft, .listBoxRight').droppable(
{
activeClass: "hover",
drop: function (ev, ui) {
/* do nothing when the parent == destination */
if ($(ui.draggable).parents(".listBoxLeft").length != 0 && ($(this)).hasClass("listBoxLeft") ||
$(ui.draggable).parents(".listBoxRight").length != 0 && ($(this)).hasClass("listBoxRight"))
return;
var itemIndex = $(ui.draggable).parent().index(); // this is a fragile part of the application
var fromListBox, toListBox;
if ($(this).hasClass("listBoxRight")) { // determine a source and a destination
toListBox = lbChosen;
fromListBox = lbAvailable;
}
else {
toListBox = lbAvailable;
fromListBox = lbChosen;
}
toListBox.AddItem(fromListBox.GetItem(itemIndex).text,
fromListBox.GetItem(itemIndex).value);
fromListBox.RemoveItem(itemIndex);
InitalizejQuery(); // repeat the initialization for new items
}
}
);
}
</script>
<style type="text/css">
.lbItem
{
width: 200px;
}
/* like SelectedItem style */
.ui-draggable-dragging
{
background-color: #A0A0A0;
color: White;
}
/* small glowing effect */
.hover
{
-webkit-box-shadow: 0 0 15px #ff0000;
-moz-box-shadow: 0 0 15px #ff0000;
box-shadow: 0 0 15px #ff0000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxGlobalEvents ID="ge" runat="server">
<ClientSideEvents ControlsInitialized="function (s, e) { InitalizejQuery(); }" />
</dx:ASPxGlobalEvents>
<table>
<tr>
<td style="width: 35%">
<dx:ASPxListBox ID="lbAvailable" runat="server" ClientInstanceName="lbAvailable"
Width="200px" Height="240px" CssClass="listBoxLeft">
<ItemStyle CssClass="lbItem" />
<Items>
<dx:ListEditItem Text="ASPxEditors Library" Value="ASPxEditors" />
<dx:ListEditItem Text="ASPxGauges Suite" Value="ASPxGauges" />
<dx:ListEditItem Text="ASPxGridView and Editors Suite" Value="ASPxGridView and Editors" />
<dx:ListEditItem Text="ASPxHTMLEditor Suite" Value="ASPxHTMLEditor" />
<dx:ListEditItem Text="ASPxperience Suite" Value="ASPxperience" />
<dx:ListEditItem Text="ASPxPivotGrid Suite" Value="ASPxPivotGrid" />
<dx:ListEditItem Text="ASPxScheduler Suite" Value="ASPxScheduler" />
<dx:ListEditItem Text="ASPxSpellChecker" Value="ASPxSpellChecker" />
<dx:ListEditItem Text="ASPxTreeList Suite" Value="ASPxTreeList" />
<dx:ListEditItem Text="XtraReports Suite" Value="XtraReports" />
<dx:ListEditItem Text="XtraCharts Suite" Value="XtraCharts" />
</Items>
</dx:ASPxListBox>
</td>
<td style="width: 30%">
</td>
<td style="width: 35%">
<dx:ASPxListBox ID="lbChosen" runat="server" ClientInstanceName="lbChosen" Width="200px"
Height="240px" CssClass="listBoxRight">
<ItemStyle CssClass="lbItem" />
</dx:ASPxListBox>
</td>
</tr>
</table>
</div>
</form>
我需要知道为什么我无法将项目打印到数组中？我哪里错了？提前致谢。
编辑：
<script type="text/javascript">
function InitalizejQuery() {
$('.lbItem').draggable(
{
helper: 'clone'
}
);
$('.listBoxLeft, .listBoxRight').droppable(
{
activeClass: "hover",
drop: function (ev, ui) {
/* do nothing when the parent == destination */
if ($(ui.draggable).parents(".listBoxLeft").length != 0 && ($(this)).hasClass("listBoxLeft") ||
$(ui.draggable).parents(".listBoxRight").length != 0 && ($(this)).hasClass("listBoxRight"))
return;
var itemIndex = $(ui.draggable).parent().index(); // this is a fragile part of the application
var fromListBox, toListBox;
if ($(this).hasClass("listBoxRight")) { // determine a source and a destination
toListBox = lbChosen;
fromListBox = lbAvailable;
}
else {
toListBox = lbAvailable;
fromListBox = lbChosen;
}
//toListBox.AddItem(fromListBox.GetItem(itemIndex).text,
// fromListBox.GetItem(itemIndex).value);
$("#lbChosen").append(toListBox.AddItem(fromListBox.GetItem(itemIndex).text,
fromListBox.GetItem(itemIndex).value));
fromListBox.RemoveItem(itemIndex);
//Robson Sousa's code
var category;
$('#lbChosen_LBT td').each(function () {
category = $(this).text();
});
console.log(category); //tried printing it on console.
InitalizejQuery(); // repeat the initialization for new items
}
}
);
}
</script>
【问题讨论】：
标签： javascript jquery asp.net webforms