2

我正在尝试访问 php 中的无序列表元素，以便将它们插入数据库中，我需要能够通过位置访问它们，但我不确定如何在 PHP 中执行此操作。我正在使用 jQuery，以便列表可以在客户端进行排序。在 Javascript 中，它可以通过以下方式访问

alert($("#sortable li:first").text() + ' is first ' + $("#sortable   li:eq(1)").text()    + ' is second ' + $("#sortable li:eq(11)").text() + ' is last');

我正在使用的列表位于http://jsfiddle.net/mMTtc/

我只是在寻找有关如何将这些列表项存储在 php 变量中的帮助，即假设我想要基于用户如何订购列表的第 6 个元素。我该怎么做？

谢谢

4

3 回答 3

2

使用以下代码，您可以在用户更改前端元素的顺序时向 PHP 后端发送更新：

$("#sortable").on("sortupdate", function() {
    var dataArr = [];
    $("#sortable li").each(function(idx, elem) {
        dataArr[idx] = $(elem).html();
    });
    var dataStr = '{"newOrder":' + JSON.stringify(dataArr) + '}';
    $.ajax({
        url: "<url_to_php_file>",
        data: dataStr
    });
    // alert(dataStr);
});

现场示例（前端部分）：here

您必须替换<url_to_php_file>为处理元素顺序的 PHP 文件的路径（即，将它们保存在数据库中）。该文件将能够使用普通 PHP Array 访问用户定义的顺序，json_decode($_POST["newOrder"])即

...
$newOrder = json_decode($_POST["newOrder"]);
for ($i = 0; $i < count($newOrder); $i++) {
    echo("The item labeled '" . $newOrder[$i] . "' is placed by the user at index " . $i . ".\n";
    /* 1st item: index 0 */
    /* 2st item: index 1 */
    /* ... */
}

示例：您向用户呈现一个可排序的列表，其中包含项目：item1、item2、item3（按此顺序）。
用户将item2 放在item1之前，此时进行 AJAX 调用，将数组传递给服务器["item2", "item1", "item3"]（注意顺序）。上面的片段会回显：

The item labeled 'item2' is placed by the user at index 0.
The item labeled 'item1' is placed by the user at index 1.
The item labeled 'item3' is placed by the user at index 2.

（当然，您不会回显任何内容，而是为每个项目更新数据库中索引字段的值或做一些有用的事情。）

于 2013-05-09T22:30:11.153 回答
1

您可以使用它DomDocument来解析您的 HTML。这可以通过使用 的字符串loadHTML()或使用 加载外部 HTML 文件来完成loadHTMLFile()。

此示例使用loadHTML()：

<?php

  $html = '<html>
    <body> 
    <ul id="sortable">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ul>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    </body>
    </html>';

$dom = new DomDocument;
$dom->loadHTML($html);

$li = $dom->getElementsByTagName('li');

// Print first item value
echo $li->item(0)->nodeValue;

// Print third item value
echo $li->item(2)->nodeValue;
于 2013-05-09T22:10:38.800 回答
1

这就是我要做的，这当然不是最干净的方式，但它应该可以工作。

这假设您正在使用自己的页面，而不是您通过对某些外部站点（例如通过 CURL）的 http 请求获取页面 html 并需要解析它的场景。DOMDocument 为后一种情况提供了很好的服务。此解决方案适用于前者，因为我假设由于您在其客户端使用 javascript，它可能是您自己的页面（除非您在页面加载后将该 javascript 注入该页面）。

首先，在每个列表项中，我会包含一个服务器端可访问的输入标签。它将用于跟踪位置和值，并在提交表单时将其传递给服务器端脚本。

<form method="POST">
  <ul id="sortable">
    <li class="ui-state-default">1
      <input id="the_list_item_1" name="the_list_item[]" type="text" value="1_0" style="display: none;">
    </li>
    ...
  </ul>
</form>

该值是项目的实际值（示例范围为 1 - 12），其位置由下划线分隔（值 + "_" + 位置）；

如果您只需要在用户完成后将列表提交给服务器进行处理，则该列表需要位于表单变量中。但是，如果您打算只使用 Ajax 将该数据获取到服务器，那么这个解决方案并不是必需的（因为您只需使用 jquery 来获取每个位置和值对并直接在您的 ajax 调用中发送它们）。

当用户拖动项目并更改列表的顺序时，您需要处理更新这些输入标签。如果您需要了解如何使用可排序事件，请参阅此处。也许，在更新时，对于每个列表项，使用新位置调用此函数：

function update_pos(value,pos)
{
  $("#the_list_item_"+value).val(value+"_"+pos);
}

所以在表单提交时，我们现在在 PHP 端。

$list_items = $_POST["the_list_item"]; // This is basically an array of all the list_items, thanks to naming all the list items with "the_list_item[]",  note the empty subscript (square braces).

$ordered_list_items = array();  // Let's push them into an associative array.

foreach($list_items as $li)
{
  $li_split = explode("_",$li);
  if(count($li_split) <= 0)
    continue;  // maybe you'd want to handle this situation differently, it really shouldn't happen at all though.  Here, I'm just ignoring nonsensical values.
  $item_id = $li_split[0];
  $pos = $li_split[1];
  $ordered_list_items[$item_id] = $pos;
}

// Then later you can shoot through this list and do whatever with them.
foreach($ordered_list_items as $item_id => $pos)
{
   // postgres perhaps. Insert if not already there, update regardless.
   pg_query("insert into the_list_item (item_id,position) select '$item_id','$pos' where '$item_id' not in (select item_id from the_list_item where '$item_id' = item_id limit 1));
   pg_query("update the_list_item set position = '$pos' where item_id = '$item_id'");
}

当然，说了这么多，根据您的需要，您可能需要将这些数据重新加载到页面上。因此，循环遍历您的数据库结果（也许对于该用户），您会将每个 list_item 输出到位。

$list_items = pg_fetch_all(pg_query($sql)); // $sql needs to be the query to get the results. Probably should order by position ascending.

$lic = count($list_items);
?>
<html> and stuff

<form method="POST">
  <ul id="sortable">
<?php
for($i = 0; $i < $lic; $i++)
{
  $li = $list_items[$i];
  echo "<li class=\"ui-state-default\">".$li["item_id"]."<input id=\"the_list_item_".$li["item_id"]."\" name=\"the_list_item[]\" type=\"text\" value=\"".$li["item_id"]."_".$li["position"]."\" style=\"display: none;\"></li>";
}
?>
</ul>
</form>
于 2013-05-09T22:57:50.560 回答