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コードは以下の通りです.
<!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)
                        {
 
                        }
                    }
                }
            }

        }
    }

===========================================================================
もしあなたに役に立つと思ったら、微信スキャンでサポートします.