asp.NetRepeaterドラッグ&ドロップでソートを実装し、ソートフィールドをデータベースに同期
7050 ワード
データベーステーブルにはID、Name、Orderなどのフィールドを含む単位テーブルがあり、バックグラウンド管理機能があり、これらの単位の統計テーブルでの前後表示順序を設定することができ、ドラッグアンドドロップで実現することを考え、操作がより簡単になります.
GifCamソフトウェアを使用して、次の図のようなアニメーションの例を作成しました.
そこで手を出して、jqueryを発見しました.uiにはsortable関数が用意されています.ソートに使用できます.インタフェースでは、データベースからバインドされた単位でRepeaterコントロールが使用されます.次に、主な手順を簡単に説明します.
1、プロジェクトで使用するjquery-1.7.2.min.jsとjquery-ui.min.jsはクリックしてダウンロードしてください.アドレスは:http://download.csdn.net/detail/taomanman/9315373
2、TestDemo.aspxコードは以下の通りです.
TestDemo.csコードは以下の通りであり,具体的なデータベース操作クラス取得データはそれぞれの状況に応じて行われるが,ここでは詳細に説明しない.
3、$.ajaxメソッドが要求するページupdate.aspxおよびupdate.aspx.csコードは以下の通りです.
===========================================================================
もしあなたに役に立つと思ったら、微信スキャンでサポートします.
GifCamソフトウェアを使用して、次の図のようなアニメーションの例を作成しました.
そこで手を出して、jqueryを発見しました.uiにはsortable関数が用意されています.ソートに使用できます.インタフェースでは、データベースからバインドされた単位でRepeaterコントロールが使用されます.次に、主な手順を簡単に説明します.
1、プロジェクトで使用するjquery-1.7.2.min.jsとjquery-ui.min.jsはクリックしてダウンロードしてください.アドレスは:http://download.csdn.net/detail/taomanman/9315373
2、TestDemo.aspxコードは以下の通りです.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../Scripts/jquery-1.7.2.min.js"></script>
<script src="../../Scripts/jquery-ui.min.js"></script>
<title>Repeater </title>
<style type="text/css">
#module_list {
margin-left: 4px;
}
.modules {
float: left;
width: 200px;
height: 140px;
margin: 10px;
border: 1px solid #acc6e9;
background: #e8f5fe;
}
.m_title {
margin-top: 0px;
height: 24px;
line-height: 24px;
background: #afc6e9;
}
#loader {
height: 24px;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="loader"></div>
<div id="module_list">
<input type="hidden" id="orderlist" />
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<div class="modules" title='<%#Eval("F_DataCenterID") %>'>
<h3 class="m_title"><%#Eval("F_DataCenterName").ToString() %></h3>
<p><%#Eval("F_Order") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
$(".m_title").bind('mouseover', function () {
$(this).css("cursor", "move")
});
var show = $("#loader");
var orderlist = $("#orderlist");
var list = $("#module_list");
var old_order = [];
//
list.children(".modules").each(function () {
var val = $(this).find("p").text();
old_order.push(val);
});
list.sortable({
opacity: 0.6, //
revert: true, //
cursor: 'move', //
handle: '.m_title', // ，
update: function () {
var new_id = [];
list.children(".modules").each(function () {
new_id.push(this.title);
});
var newid = new_id.join(',');
var oldid = old_order.join(',');
$.ajax({
type: "post",
url: "update.aspx", //
data: { id: newid, order: oldid }, //id: ID,order：
beforeSend: function () {
show.html("<img src='load.gif' /> ...");
},
success: function (msg) {
show.html(" ...");
//
window.location.reload();
}
});
}
});
});
</script>
TestDemo.csコードは以下の通りであり,具体的なデータベース操作クラス取得データはそれぞれの状況に応じて行われるが,ここでは詳細に説明しない.
public partial class TestDemo : System.Web.UI.Page
{
public static GGJ_DC_DataCenterBaseInfoBLL bll = new GGJ_DC_DataCenterBaseInfoBLL();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
/// <summary>
///
/// </summary>
public void BindData()
{
string where = "";
string orderby = "F_Order ASC";
DataTable dt = bll.GetData(where, orderby);
this.rpt.DataSource = dt;
this.rpt.DataBind();
}
}
3、$.ajaxメソッドが要求するページupdate.aspxおよびupdate.aspx.csコードは以下の通りです.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
public partial class update : System.Web.UI.Page
{
public static GGJ_DC_DataCenterBaseInfoBLL bll = new GGJ_DC_DataCenterBaseInfoBLL();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string order = Request["order"].ToString();
string depId = Request["id"].ToString();
UpdateOrder(depId, order);
}
}
/// <summary>
///
/// </summary>
/// <param name="deptId"></param>
/// <param name="order"></param>
public void UpdateOrder(string deptId, string order)
{
string[] deptIds = deptId.Split(',');
string[] orders = order.Split(',');
for (int i = 0; i < deptIds.Length; i++)
{
for (int j = 0; j < orders.Length; j++)
{
if (i == j)
{
string sql = "update GGJ_DC_DataCenterBaseInfo set F_Order=" + orders[j] + " where F_DataCenterID='" + deptIds[i]+ "'";
DataTable dt = CommonClass.QuerySQL.GetDataTable(sql);
if (dt.Rows.Count > 0)
{
}
}
}
}
}
}
===========================================================================
もしあなたに役に立つと思ったら、微信スキャンでサポートします.