如何在 DataList 控件中实现 JQuery UI Sortable？

基本上，DataList 在 HTML 中渲染成表格，如下所示：

<table>

<tr>

  <td> HTML 代码放在 ItemTemplate 中 </td>

</tr>

</table>

但是 UI Sortable 只能应用于 <tbody>，所以我们需要在上面的表格中添加 tbody 才能实现 Jquery UI Sortable。

但是现在我们如何将 tbody 注入到 DataList 中呢？这很容易做到。

<asp:DataList ID="dlList" runat="server" >

        <HeaderTemplate>

<tbody>

</HeaderTemplate>

        <ItemTemplate>

</ItemTemplate>       

        <FooterTemplate>

</tbody>

</FooterTemplate>

</asp:DataList>

     

通过在 HeaderTemplate 中添加  <tbody> 开始标记，并在 FooterTemplate 中添加 </tbody> 结束标记，我们可以将 <tbody> 注入到 DataList 中。

 在 Header & Footer Template 中添加 tbody 后，渲染的 HTML 将变为：

<table>

<tbody>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</tbody>

</table>

现在我们可以很容易地在 DataList 中实现 JQuery UI Sortable，以下是 Jquery 的实现。

为此，您需要在应用程序中添加以下 Js：

 

$(function () {

             $("#<%=dlProcessList.ClientID %> tbody").sortable({

                 handle: ".handle",

                 helper: tableRowHelper,

                 placeholder: 'ui-state-highlight',

                 cursor: 'move',

                 start: function (event, ui) {

                     ui.placeholder.height(ui.helper.height());

                 }

             }).disableSelection();

         });        

<asp:DataList ID="dlList" runat="server" >

        <HeaderTemplate>

<tbody>

</HeaderTemplate>

        <ItemTemplate>

// 插入代码以显示所需数据

</ItemTemplate>       

        <FooterTemplate>

</tbody>

</FooterTemplate>

</asp:DataList>

编码愉快 :)