Перетащите строку в таблицу с помощью jQueryUI - PullRequest
Новая
       12

Перетащите строку в таблицу с помощью jQueryUI

0 голосов
/ 13 мая 2011

Я новичок в Javascript, jQuery, во всем клиентском материале.

Я пытаюсь перетащить «строку таблицы» (каждая строка имеет метку и 2 флажка) в одном и том жеТаблица.Я использую jQueryUI, перетаскиваемый и сбрасываемый.У меня есть следующие проблемы:

  1. Например.Когда я щелкаю / перетаскиваю строку 1 в строку 3, строка 1 (все элементы, сжатые в одну <td>) устанавливаются в <td> любой строки, в которую я перетаскиваю.

  2. Перетаскиваемый ряд должен быть удален с места перетаскивания.

Я включил ссылку здесь .

Ответы [ 2 ]

1 голос
/ 13 мая 2011

Несколько вещей, которые вы захотите сделать:

Перетаскивание не требуется (если я не прочитал то, что вы пытаетесь сделать).Все, что вам нужно, это добавить тег tbody вокруг tr, который вы хотите отсортировать, например: 

<table width="350px" id="regFields">
    <thead>            
        <tr id="rowHeader">
            <th align="left" colspan="1">Field Name</th>
            <th align="center" colspan="1">Include</th>
            <th colspan="1"><ul>Required</ul></th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td align="left" colspan="1">First Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Last Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Company</td>
            <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Email</td>
            <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
         </tr>
    </tbody>
</table>

Также обратите внимание, что вы не хотите иметь несколько идентификаторов с одним и тем же именем.Вместо этого вам понадобятся занятия.Я не стал исправлять это здесь, но вы захотите это сделать.

JQuery на самом деле довольно прост: 

$('#regFields tbody').sortable({
    items: 'tr'
});

Я выбираю таблицу и элемент tbody (так что я не получаю заголовок).Сортируемый автоматически делает все остальное (вероятно, даже не нужен параметр элементов, но это не повредит).

Надеюсь, это поможет!

Jamon

0 голосов
/ 13 мая 2011

Попробуйте использовать сортируемую вместо перетаскиваемой 

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
</head>
<body>
<div id="leftHalfContainer" style="display: block; float: left;">     
    <form name="setupRegForm" id="setupRegForm" method="post">                                            
    <table width="350px" id="regFields">
        <thead>            
            <tr id="rowHeader">
                <th align="left" colspan="1">Field Name</th>
                <th align="center" colspan="1">Include</th>
                <th colspan="1"><ul>Required</ul></th>
            </tr>
        </thead>
            <tr id="row">
                <td align="left" colspan="1">First Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Last Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Company</td>
                <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Email</td>
                <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
             </tr>
    </table>
    </form>                     
</div><script>
    $("table").sortable({
            items: 'tr'
    });   
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...