Question

在对表进行排序的同一文件中使用Jquery和PHP时遇到问题。我搜索了很长时间，发现使用JQuery UI提出了一种解决方案来保存排序后的列表，然后使用ajax将其发送到php表单，但是由于项目的限制，由于我们已经在使用Bootstrap，因此我无法包括JQuery UI。因此，我仅限使用香草javascript或jquery 1.7。这是我的代码段

        echo '<tr>';
        echo '<td><a class="icon-pencil icon-gray" href="unit_custom_fields.php?szAction=Edit&szUnitCustomFieldId=' . $pUnitCustomField->m_uId . '" title="Edit"></a></td>';
        echo '<td>' . $pUnitCustomField->m_szFieldPlaceholder . '</td>';
        echo '<td>' . $pUnitCustomField->m_szFieldDescription . '</td>';
        echo '<td>' . ($pUnitCustomField->m_bShowInUnitList == 1 ? "yes" : "no") . '</td>';
        echo '<td>' . ($pUnitCustomField->m_bIsPasswordField == 1 ? "yes" : "no") . '</td>';
        echo '<td><a class="icon-arrow-down moveDown"  href="javascript:;" onclick="sortUnitCustomFields()"></a><a class="icon-arrow-up moveUp" href="javascript:;" onclick="sortUnitCustomFields()"></a>';
        echo '</tr>';

这是用户如何使用Jquery使用向上和向下箭头对表格进行排序

        global $g_szUnitCustomFieldPriority;

    $g_szUnitCustomFieldPriority .= <<< END
      <script type="text/javascript">
      function sortUnitCustomFields() {
        $('.moveUp').live('click', function(){
            var row = $(this).closest('tr');
            var prev = row.prev();
            if (prev.length == 1) {
                    row.detach();
                    prev.before(row);
            }

        });

        $('.moveDown').live('click', function(){
            var row = $(this).closest('tr');
            var next = row.next('tr');
            if (next.length == 1) {
                row.detach();
                next.after(row);
            } 

        });
      }
      </script>
END;

为了保存对表单的更改，单击保存按钮时我正在使用POST方法

if ($szAction == 'Save') {
   $pUnitCustomField->m_szFieldPlaceholder = $_POST['szFieldPlaceholder'];
}

因此，如何在不使用Jquery UI的情况下将排序顺序保存在m_szFieldPlaceholder中。

Answer 1

不需要jQueryUI来将您的信息保存回PHP端数据库。

您需要做的是：

获取表行的更新顺序并将其存储在数组或类似的数组中；然后
通过ajax将订单发送回PHP端。（Ajax是javascript与php通信的“系统”）。
在PHP端，您将收到表顺序和
将该订单存储到表中。然后
您可以修改常规页面构建以从数据库中检索行顺序数据（如果不存在，也需要处理-即用户尚未对行进行重新排序），并且
然后将表重新排序为该顺序，然后再将控制权移交给用户。

该过程不需要jQueryUI（我也无法想象如何将其用于进行前端/后端通信。这不是jQueryUI的目的。）

Answer 2

如果表格位于form标记内，则更改此行，并通过以下形式的隐藏表单输入传递占位符：

echo '<td>' . $pUnitCustomField->m_szFieldPlaceholder . '<input type="hidden" name="szFieldPlaceholder[]" value="'.$pUnitCustomField->m_uId.'" /></td>';

然后检索数据，如：

if ($szAction == 'Save') {
       $flip = array_flip($_POST['szFieldPlaceholder']);
       $order = $flip[$pUnitCustomField->m_uId];
       $pUnitCustomField->m_szFieldPlaceholder = $order;
    }

Answer 3

如果您想使用jQuery UI Sortable，则可以使用jQuery v1.7。只需使用jQuery UI 1.11.4。这是一个示例：

$(function() {
  $("table tbody").sortable({
    items: "> tr",
    handle: ".sort-handle"
  });

  $("table .ui-icon-pencil").on("click", function() {
    var id = $(this).parents("tr").data("id");
    var url = "unit_custom_fields.php?szAction=Edit&szUnitCustomFieldId=" + id;
    console.log("Edit: " + url);
    //window.location.href = url;
  });

  $("button").click(function() {
    var data = $("table tbody").sortable("serialize");
    console.log("Sort Data: " + data);
  });
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<table>
  <tr id="m_uId-1" data-id="1">
    <td>
      <span class="ui-icon ui-icon-pencil"></span>
    </td>
    <td>FieldPlaceHolder 1</td>
    <td>ShowInUnitList 1</td>
    <td>IsPasswordField 1</td>
    <td>
      <span class="ui-icon ui-icon-grip-dotted-vertical sort-handle"></span>
    </td>
  </tr>
  <tr id="m_uId-2" data-id="2">
    <td>
      <span class="ui-icon ui-icon-pencil"></span>
    </td>
    <td>FieldPlaceHolder 2</td>
    <td>ShowInUnitList 2</td>
    <td>IsPasswordField 2</td>
    <td>
      <span class="ui-icon ui-icon-grip-dotted-vertical sort-handle"></span>
  </tr>
  <tr id="m_uId-3" data-id="3">
    <td>
      <span class="ui-icon ui-icon-pencil"></span>
    </td>
    <td>FieldPlaceHolder 3</td>
    <td>ShowInUnitList 3</td>
    <td>IsPasswordField 3</td>
    <td>
      <span class="ui-icon ui-icon-grip-dotted-vertical sort-handle"></span>
  </tr>
</table>
<button>Save</button>

现在，您可以根据需要使用Sortable及其方法，例如"serialize"和"toArray"。

希望有帮助。

使用普通的javascript / jquery保存用户排序的表顺序并将其保存在php变量中

3 个答案: