- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用来自 http://farhadi.ir/projects/html5sortable/ 的可排序 javascript
该脚本对我来说工作正常,但是当我不了解 javascript 时,当您移动图片时如何创建代码以使用新顺序在 php 中取回数组是一个问题。
我现在使用的代码:
<section>
<ul class="sortable grid">
<?php
$i=1;
foreach ($werkbladen as $werkblad) {
$thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];
echo '<li id = "'.$i.'"><img src="'.$thumbnail.'" width="139" height="181" /></li>';
$i++;
}
?>
</ul>
</section>
<script>
$('.sortable').sortable().bind('sortupdate', function() {
//Triggered when the user stopped sorting and the DOM position has changed.
// i will need here the code in javascript that creates a new array in php with the new order
});
</script>
我希望有人能帮我解决这个问题。
也许更多的解释也会有所帮助:这就是我的 session_array 的样子
Array
(
[0] => Array
(
[werkblad] => Array
(
[id] => 1105
[database] => 1111
[path] => groep12/1111
[thumbnail] => mensen-kleding-03.jpg
[bestand] =>
)
)
[1] => Array
(
[werkblad] => Array
(
[id] => 5639
[database] => 1111
[path] => groep12/1111/1111/
[thumbnail] => mensen-kleding-1-minder-en-1-meer.jpg
[bestand] => mensen-kleding-1-minder-en-1-meer.pdf
)
)
[2] => Array
(
[werkblad] => Array
(
[id] => 72
[database] => 1111
[path] => groep12/1111/
[thumbnail] => passieve-woordenschat-02.jpg
[bestand] => passieve-woordenschat-02.pdf
)
)
)
我需要的是一个包含排序图像的数组。该数组将被发送到一个从中创建 pdf 的 php 文件,因此我需要将所有信息恢复为原始信息。
亲切的问候,西茨科
最佳答案
我总是发现,如果我可以避免在某项任务中使用 JavaScript,这样做通常是值得的。至少在开始的时候,因为这意味着你的系统可以被更多的人使用。禁用脚本的回退在可访问性方面有好处,并且通常有助于指导您构建遵循可靠、易于理解的基线的应用程序。
我假设您了解 PHP,也会很好地理解 HTML。
基本上,作为一个简单的解决方案,您需要做的就是将隐藏的输入呈现为可排序标记的一部分。这些输入必须使用无索引数组表示法命名,即 name="row[]"
以便在服务器端显示数据时遵循 HTML 顺序。
然后输入将负责将有意义的信息存储在 HTML 中。您可以使用 PHP 的 serialize()
, 或 json_encode()
处理复杂的值,或者——如果你可以在服务器端(即在数据库或 session 中)以集合或列表的形式访问数据——*首选只存储唯一 ID。
然后隐藏的输入将与 HTML 的其余部分一起排序。
*preferable : Why would storing just IDs be better? Not only will you be sending less data with simple IDs, less interference can occur if you end up with a malicious user. Someone who may attempt to post unwanted information to your server. You should always test and clean the data received from the outside world to your server, this is just easier to do when dealing with simple array key offsets — rather than complex data structures.
为了使其正常工作,您需要使用表单标签和**提交按钮,或者至少一些触发表单提交的号召性用语来包装您的可排序列表.然后,当提交被调用时——根本不需要利用 JavaScript——表单的目的地将以正确的顺序接收您的数据。
<form id="sorted" action="destination.php" method="post">
<section>
<ul class="sortable grid">
<?php
$i=1;
foreach ($werkbladen as $werkblad) {
$thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];
/// I've used thumbnail as my stored data, but you use `$i` or anything you want really.
$input = '<input type="hidden" name="row[]" value="' . $thumbnail . '" />';
$image = '<img src="' . $thumbnail . '" width="139" height="181" />';
echo '<li id="'.$i.'">' . $input . $image . </li>';
$i++;
}
?>
</ul>
</section>
</form>
**submit button : If I were to be generating a PDF, I wouldn't trigger its generation after every sort event. You would really want the user to request via a call-to-action because PDF generation is usually quite heavy process. Not to mention you waste bandwidth and processing time if the user hasn't finished with their ***ordering.
然后在 PHP 端,您将使用以下方法获取行信息:
$_POST['row']; // <-- this should be a sorted array of thumbnail paths.
***ordering : True, you could put a timeout delay on the sortupdate event, so as not to trigger after every sort. But my reasons for implementing a call-to-action are not just based on minimizing the work your server has to do. It is just a good idea to implement a call-to-action by default, and then progressively hide it away for users that either don't want or need it.
如果您真的想要一个最新的排序交互预览,那么我仍然会实现上面的纯 HTML 解决方案,但会逐步使用 JavaScript 进行增强以添加额外的功能。您可以使用已经评论过的 AJAX/$sortable
解决方案来执行此操作。但是因为您现在有了一个表单,您可以使用 jQuery 的 .serialize()
方法。这旨在采用一种形式并生成它本应作为名称-值对的字符串提交的数据。然后可以通过多种方式将此“URL”字符串发布或获取回服务器。
$('.sortable').sortable().bind('sortupdate', function() {
var data = jQuery('form#sorted').serialize();
console.log(data);
/// there are a number of ways you can use this data
/// send it via AJAX, open a new tab, open a pop-up window,
/// open a preview iframe... even encode it using semaphore
/// and create a canvas animation of waving flags.
});
关于javascript - 使用 sortable.js 时如何在 php 中返回一个新数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29938445/
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务,尤其是 WebScriptEndpoint。 任何人都可以对此给出任何指导吗? 谢谢 最佳答案 这是一篇关于
我正在编写一个将运行 Linux 命令的 C 程序,例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
所以我正在尝试处理文件上传,然后将该文件作为二进制文件存储到数据库中。在我存储它之后,我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库,因为我使用 Google 应用引
我正在尝试制作一个宏,将下面的公式添加到单元格中,然后将其拖到整个列中并在 H 列中复制相同的公式 我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
问题类似于this one ,但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
我正在使用GNU bash,版本5.0.3(1)-发行版(x86_64-pc-linux-gnu),我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
这里,为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时,它发现错误。 而且我的 jquery 类和 insertadjacentHTMl 也不
我正在尝试更改标签的innerHTML。我无权访问该表单,因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。 这是输入和标签的结构:
我有一个页面,我可以在其中返回用户帖子,可以使用一些 jquery 代码对这些帖子进行即时评论,在发布新评论后,我在帖子下插入新评论以及删除 按钮。问题是 Delete 按钮在新插入的元素上不起作用,
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列,它是一个数字,如帐号,并按原样返回其余列。 使用 awk 或 sed 执行此操作的最佳方法是什么? Accounti
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中,我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
所以我试图有一个输入字段,我可以在其中输入任何字符,但然后将输入的值小写,删除任何非字母数字字符,留下“。”而不是空格。 例如,如果我输入: 地球的 70% 是水,-!*#$^^ & 30% 土地 输
我正在尝试做一些我认为非常简单的事情,但出于某种原因我没有得到想要的结果?我是 javascript 的新手,但对 java 有经验,所以我相信我没有使用某种正确的规则。 这是一个获取输入值、检查选择
我想使用 angularjs 从 mysql 数据库加载数据。 这就是应用程序的工作原理;用户登录,他们的用户名存储在 cookie 中。该用户名显示在主页上 我想获取这个值并通过 angularjs
我正在使用 autoLayout,我想在 UITableViewCell 上放置一个 UIlabel,它应该始终位于单元格的右侧和右侧的中心。 这就是我想要实现的目标 所以在这里你可以看到我正在谈论的
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
我尝试使用for循环声明变量,然后测试cols和rols是否相同。如果是,它将运行递归函数。但是,我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗? 现在,在比较 col.1 和
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {
我是一名优秀的程序员,十分优秀!