2010年8月14日星期六

ASP.NET GridView jQuery Drag & Drop

以前我們要做資料上的Sorting,可能還要用一些箭咀按鈕去一個個排列,但大家應該都用過很多先進的CMS,都會以Drag&Drop形式去操作。
當然這類現代的UI,不會是PHP專美,ASP.NET一樣可以做到。

大家都知道GridView Control 經Browser Render後,其實就是一個HTML Table,所以說穿了這和GridView沒有關係,即使你用Repeater,Listview Control只要ItemTemplate是Table架構就可以做到。

這個Demo我是用ASP.NET 4.0 + jQuery的TableDnD plugin製作的,其實官方網站已有很多Demo示範如何使用,所以我都沒寫 Tutorial 了,只是做一個screencast給大家看看效果,相信已經足夠。

不過大家可能會問影片中的Alert那些字串是什麼,其實就是當onDrop的時候所產生的Array,用途是給你做Ajax update之用。

3 則留言:

  1. hello, will you give the code after soriting save to sql server after gridview sorting save.

    回覆刪除
  2. After sorting, it should save the each of row element's index to database.
    It is easy to using jQuery Ajax and loop thought the rows,
    For me, i override the GridView's rowdatabound event and bind the ID to each row.

    It very on depend how is your usage, my code maybe not suitable.

    回覆刪除
  3. Can you send me the code updating sql table? Thanks

    回覆刪除