主頁(yè) > 知識(shí)庫(kù) > asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫(kù)字段排序

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫(kù)字段排序

熱門(mén)標(biāo)簽:天心智能電銷機(jī)器人 塔城代理外呼系統(tǒng) 地圖定位圖標(biāo)標(biāo)注 地圖標(biāo)注的公司有哪些 代理接電話機(jī)器人如何取消 400電話辦理哪家性價(jià)比高 遂寧市地圖標(biāo)注app 地圖標(biāo)注專業(yè)團(tuán)隊(duì) 濮陽(yáng)外呼電銷系統(tǒng)怎么樣

數(shù)據(jù)庫(kù)表中有一個(gè)單位表,里面包括ID、Name、Order等字段,現(xiàn)在有個(gè)后臺(tái)管理功能,可以設(shè)置這些單位在某些統(tǒng)計(jì)表格中的先后顯示順序,于是想到用拖拽方式實(shí)現(xiàn),這樣操作起來(lái)更簡(jiǎn)便。

使用了GifCam軟件做了一個(gè)示例動(dòng)畫(huà),效果如下圖所示:

于是就動(dòng)手起來(lái),發(fā)現(xiàn)jquery.ui中提供sortable函數(shù),可用于排序,界面中從數(shù)據(jù)庫(kù)綁定的單位使用Repeater控件,下面簡(jiǎn)單介紹下主要步驟:

1、項(xiàng)目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js請(qǐng)點(diǎn)擊進(jìn)行下載,地址為: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, //設(shè)置拖動(dòng)時(shí)候的透明度  
      revert: true, //緩沖效果  
      cursor: 'move', //拖動(dòng)的時(shí)候鼠標(biāo)樣式  
      handle: '.m_title', //可以拖動(dòng)的部位,模塊的標(biāo)題部分  
      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", //服務(wù)端處理程序  
          data: { id: newid, order: oldid },  //id:新的排列對(duì)應(yīng)的ID,order:原排列順序  
          beforeSend: function () { 
            show.html("img src='load.gif' /> 正在更新..."); 
          }, 
          success: function (msg) { 
            show.html("排序成功..."); 
            //重新刷新頁(yè)面 
            window.location.reload(); 
          } 
        }); 
      } 
    }); 
  }); 
/script> 

TestDemo.cs代碼如下,具體數(shù)據(jù)庫(kù)操作類獲取數(shù)據(jù)根據(jù)各自的情況進(jìn)行,這里就不詳細(xì)介紹了。

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方法請(qǐng)求的頁(yè)面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> 
[csharp] view plaincopy
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) 
          { 
          } 
        } 
      } 
    } 
  } 
} 

以上內(nèi)容是小編給大家介紹的關(guān)于asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫(kù)字段排序的相關(guān)敘述,希望大家喜歡。

您可能感興趣的文章:
  • repeater分頁(yè) 內(nèi)容顯示
  • asp.net repeater手寫(xiě)分頁(yè)實(shí)例代碼
  • asp.net Repeater之非常好的數(shù)據(jù)分頁(yè)
  • asp.net下Repeater使用 AspNetPager分頁(yè)控件
  • asp.net中讓Repeater和GridView支持DataPager分頁(yè)
  • asp.net Repeater分頁(yè)實(shí)例(PageDataSource的使用)
  • Repeater控件與PagedDataSource結(jié)合實(shí)現(xiàn)分頁(yè)功能
  • 在ASP.NET 2.0中操作數(shù)據(jù)之四十二:DataList和Repeater數(shù)據(jù)排序(一)
  • 在ASP.NET 2.0中操作數(shù)據(jù)之四十三:DataList和Repeater數(shù)據(jù)排序(二)
  • 在ASP.NET 2.0中操作數(shù)據(jù)之四十四:DataList和Repeater數(shù)據(jù)排序(三)

標(biāo)簽:麗江 婁底 宜春 吉林 河南 重慶 本溪 汕頭

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫(kù)字段排序》,本文關(guān)鍵詞  asp.net,中,使用,Repeater,控件,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫(kù)字段排序》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫(kù)字段排序的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章