保存动态创建的 jQuery 连接可排序列表的顺序
Save order of dynamically created jQuery Connected Sortable Lists
我正在尝试做的是有一个asp转发器,它可以动态生成给定数量的连接的jQuery可排序列表组。然后,我想在用户按下 asp 按钮后,将这些列表组中每个列表组的顺序保存到 MS SQL 数据库中。
列表项到无序可排序列表的初始填充工作正常,对每个列表进行排序的功能工作正常。
下面是代码示例。我更改了变量/方法名称,省略了我认为对该问题不必要的代码。
HTML/ASP:
<asp:Repeater ID="MyRepeater" runat="server" OnItemDataBound="MyRepeater_ItemDataBound">
<ItemTemplate>
<div class="col-md-6">
<strong>Column 1</strong>
<br />
<ul id="Sortable1" class="sortable" runat="server"></ul>
</div>
<div class="col-md-6">
<strong>Column 2</strong>
<br />
<ul id="Sortable2" class="sortable" runat="server"></ul>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="row">
<div class="col-md-3">
<asp:Button runat="server" ID="SaveButton" Text="Save Layout" OnClick="SaveButton_Click" CssClass="btn btn-primary" />
</div>
</div>
C# 代码隐藏:
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
List<MyObject> myObjects = GetMyObjectsFromDB();
MyRepeater.DataSource = myObjects;
MyRepeater.DataBind();
}
}
protected void MyRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item)
{
HtmlGenericControl ul1 = (HtmlGenericControl)e.Item.FindControl("Sortable1");
HtmlGenericControl ul2 = (HtmlGenericControl)e.Item.FindControl("Sortable2");
// script block that'll be added to every group of sortable lists to allow for the connected sorting functionality
string scriptBlock =
@"<script type=""text/javascript"">
$(function () {
$(""#" + ul1.ClientID + @""").sortable({
connectWith: ""#" + ul2.ClientID + @"""
}).disableSelection();
});
$(function () {
$(""#" + ul2.ClientID + @""").sortable({
connectWith: ""#" + ul1.ClientID + @"""
}).disableSelection();
});
</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), ul1.ClientID + ul2.ClientID, scriptBlock);
List<MyOtherObject> myObjectsForEachListGroup = GetMyListObjectsFromDB((int)DataBinder.Eval(e.Item.DataItem, "GroupId"));
AddListItemsToSortables(ul1, ul2, myObjectsForEachListGroup);
}
}
private void AddListItemsToSortables(HtmlGenericControl ul1, HtmlGenericControl ul2, List<MyOtherObject> myObjectsForEachListGroup)
{
for (int i = 0; i < myObjectsForEachListGroup.Count; i++)
{
HtmlGenericControl li = new HtmlGenericControl("li");
li.Attributes.Add("id", myObjectsForEachListGroup[i].Id.ToString());
li.Attributes.Add("class", "ui-state-default");
li.Attributes.Add("runat", "server");
li.InnerText = myObjectsForEachListGroup[i].Name;
if (i % 2 == 0)
{
ul1.Controls.Add(li);
}
else
{
ul2.Controls.Add(li);
}
}
}
private void SaveOrder()
{
foreach (RepeaterItem rptItem in MyRepeater.Items)
{
HtmlGenericControl ul1 = (HtmlGenericControl)rptItem.FindControl("Sortable1");
HtmlGenericControl ul2 = (HtmlGenericControl)rptItem.FindControl("Sortable2");
int i = 0;
foreach (HtmlGenericControl li in ul1.Controls)
{
// save the row and column for the given object in the DB
UpdateMyObjectPosition(Convert.ToInt32(li.ClientID), i, 0);
i++;
}
i = 0;
foreach (HtmlGenericControl li in ul2.Controls)
{
// save the row and column for the given object in the DB
UpdateMyObjectPosition(Convert.ToInt32(li.ClientID), i, 1);
i++;
}
}
}
我遇到的问题是每个<li>
元素在回发期间都不会保留。ul1.Controls
和ul2.Controls
只包含我的SaveLayout
方法中的一个LiteralControl
,没有其他内容。我尝试从 Page_Load
方法中删除!Page.IsPostBack
,它只是在回发期间重新初始化转发器列表,并且没有给我更改的顺序。
我尝试研究几个堆栈溢出问题,即通过将控件的 ID 存储在视图状态中来持久化动态控件数据,但它似乎在我的情况下不起作用。或者也许我做得不对。
通过使用javascript和asp HiddenField解决了我的问题,它将获取列表的顺序:
function GetOrder() {
var order1 = $("#<%= Sortable1.ClientID %>").sortable('toArray').toString();
var order2 = $("#<%= Sortable2.ClientID %>").sortable('toArray').toString();
document.getElementById("<%= DynamicFieldData.ClientID %>").value = order1 + " " + order2;
}
按钮:
<asp:Button runat="server" ID="SaveButton" Text="Save Layout" OnClick="SaveButton_Click" OnClientClick="GetOrder()" CssClass="btn btn-primary" />
其中DynamicFieldData
是隐藏字段,您将在其中存储列表中每个项目的 ID 数组。然后,您可以在代码隐藏中提取隐藏字段中的值,并根据需要使用它。
我还必须在代码隐藏中修改我的 SaveOrder() 方法,以便现在遍历 HiddenField 值中的字符串(我拆分的)。
相关文章:
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- jQuery带计数器的可排序列表
- 我们可以在 CouchDB 中对排序列表视图进行排序吗?
- SharePoint :按日期排序列表
- jQueryUI可排序-从可排序列表中删除li
- Rails3-可排序列表不能与wysihtml5一起工作
- 如何同步包含克隆元素的jquery可排序列表
- 无法将id放在Jquery插件生成的模式中的未排序列表上
- 为未排序列表设置onclick()属性
- Mvc4将Jquery可排序列表项的顺序保持到控制器
- 无法从jQuery可排序列表中删除新添加的项
- iframe内容可编辑,位于jqueryUI可排序列表项中
- 对象的数组列表的Javascript排序列表-基于特定的数组列表
- 动态生成<选择>未显示已排序列表中的第一个项目
- 从 ajax 调用到 jquery UI 可排序列表构建 html
- 使用 jqueryui 的多个可排序列表 - 不希望项目在列表组之间混合
- jQuery - 获取可排序列表的索引
- jQuery - 排序后更新可排序列表
- YUI 轮播导航按钮在排序列表下