谨慎:您正在浏览遗产ob娱乐下载symfony 1.倍本网站的一部分。< / div >

如何制作可排序的列表

ob娱乐下载Symfony的版本
语言

概述

许多web应用程序需要提供一个界面来订购物品——想想博客中的分类，CMS中的文章，电子商务网站中的愿望……老式的方法是提供箭头来在列表中上下移动一个项目。AJAX的方法是在服务器支持下允许直接拖放排序。本章将描述这两种方法，以及一些关于如何增强对象模型和使用Creole进行复杂查询的技巧。

经典和AJAX排序列表

你需要什么

数据结构

对于本文，使用的示例将是一个未定义的示例项表-根据您的需要命名。为了可排序，记录至少需要一个排名场，不需要堆这里因为排序将由用户完成，而不是由计算机完成。因此，数据结构(要写入schema.yml)是简单的:

propel: test_item: _attributes: {phpName: Item} id: name: varchar(255) rank: {type: integer, required: true}

确保在命令行界面中输入数据结构定义后构建模型:

$ ob娱乐下载symfony推进-构建-模型

您还需要一个具有相同结构的数据库。最快的方法是调用:

$ ob娱乐下载symfony push -build-sql

扩展模型

类中添加以下方法，在考虑用户交互之前，请确保您有一种方法可以按顺序检索项、按顺序获取项列表以及获得当前最大排序lib /模型/ ItemPeer.php：

静态函数retrieveByRank（美元的地位＝1）｛$ c＝新标准;$ c->添加（自我::排名，美元的地位）；返回自我::doSelectOne（$ c）；｝静态函数getAllByRank（）｛$ c＝新标准;$ c->addAscendingOrderByColumn（自我::排名）；返回自我::doSelect（$ c）；｝静态函数getMaxRank（）｛反对美元=推动:getConnection（自我::DATABASE_NAME）；美元的sql＝“选择马克斯(”.self::排名．AS max FROM '.self::TABLE_NAME；支撑美元＝反对美元->准备（美元的sql）；支撑美元->执行（）；行美元＝支撑美元->获取（）；返回行美元［“马克斯”］；｝

这些方法对于这两个排序接口都非常有用。如果需要关于对象模型在symfony中处理数据库查询的方式的更多信息，请参阅ob娱乐下载基本CRUD章节的驱动用户指南。

方法中还需要添加两个方法lib /模型/ Item.php类。这里不需要它们，但在实际应用程序中可能会需要它们，在应用程序中还需要向表中添加和删除项:

公共函数保存（PropelPDO反对美元＝零）｛//新记录需要用rank = maxRank +1初始化如果（！这个美元->getId（））｛反对美元=推动:getConnection（ItemPeer::DATABASE_NAME）；试一试｛反对美元->beginTransaction（）；这个美元->setRank（ItemPeer::getMaxRank（）＋1）；父::保存（）；反对美元->提交（）；｝抓（异常$ e）｛反对美元->回滚（）；扔$ e；｝｝其他的｛父::保存（）；｝｝公共函数删除（PropelPDO反对美元＝零）｛反对美元=推动:getConnection（ItemPeer::DATABASE_NAME）；试一试｛反对美元->beginTransaction（）；//降低同一类别中排名更高的页面记录的所有排名美元的sql＝“更新”.ItemPeer::TABLE_NAME．“集合”.ItemPeer::排名．' = '.ItemPeer::排名．' - 1 where '.ItemPeer::排名．' > '．这个美元->getRank（）；反对美元->执行（美元的sql）；//删除项目父::删除（）；反对美元->提交（）；｝抓（异常$ e）｛反对美元->回滚（）；扔$ e；｝｝

记录的添加和删除必须仔细管理，以保证档案的完整性排名场，这就是为什么save ()而且delete ()方法是专门化的。因为这些方法执行复杂的读/写操作并会产生并发问题的风险，所以这些操作被包含在一个事务(请参阅推动文档欧宝官网下载app有关symfony中的事务的更多详细信息)。ob娱乐下载

准备模块

本教程中描述的交互将发生在项模块。通过调用(假设您有一个前端应用程序):

$ ob娱乐下载symfony初始化模块前端项目

通过您最喜欢的浏览器测试对这个新模块的访问，确保您的web服务器配置正常。如果你使用沙盒来学习本教程，下面是你应该检查的URL:

http://localhost/sf_sandbox/web/frontend_dev.php/item

最后，如果你想测试物品的顺序，你需要…物品。创建一堆测试项，或者通过CRUD接口或者一个人口的文件．

既然一切都准备好了，我们就开始吧。

经典可排序列表

经典的可排序列表是一个列表，其中每个项目都有一个控件来改变其顺序。首先，创建显示列表的动作和模板:

//添加到modules/item/actions/actions.class.php公共函数executeList（）｛这个美元->项目= ItemPeer::getAllByRank（）；这个美元->max_rank= ItemPeer::getMaxRank（）；｝//在modules/item/templates/中创建一个listSuccess.php模板<标题>命令列表 
    <？phpforeach（美元的物品作为美元的项目）：？><李><？php回声美元的项目->getName（）．＇ ＇；如果（美元的项目->getRank（）>0）：回声link_to（“向上移动”，“项目/ ?id = '．美元的项目->getId（））；endif；如果（美元的项目->getRank（）! =max_rank美元）：回声link_to（“向下”，“项目/ ?id = '．美元的项目->getId（））；endif；？>李< / ><？phpendforeach？>< / ul >

只有在可能重新排序时，才会显示向上或向下移动项目的链接。这意味着第一项不能再往上移动，最后一项也不能再往下移动。检查页面是否正确显示:

http://localhost/sf_sandbox/web/frontend_dev.php/item/list

现在，是时候研究一下项目/了而且项目/下行动。的向上操作应该降低作为参数给定的页面的排名，并增加前一页的排名。的下来操作应该增加作为参数的页面的排名，并降低下一个页面的排名。由于它们都在数据库中执行两个写操作，因此这些操作应该使用一个事务。

这两个操作具有非常相似的逻辑，如果您想保持D.R.Y.，你最好找到一种聪明的方法来编写它们，而不重复任何代码。这是通过添加swapWith ()方法。Item.php模型类:

公共函数swapWith（美元的项目）｛反对美元=推动:getConnection（ItemPeer::DATABASE_NAME）；试一试｛反对美元->beginTransaction（）；美元的地位＝这个美元->getRank（）；这个美元->setRank（美元的项目->getRank（））；这个美元->保存（）；美元的项目->setRank（美元的地位）；美元的项目->保存（）；反对美元->提交（）；｝抓（异常$ e）｛反对美元->回滚（）；扔$ e；｝｝

然后,向上而且下来动作变得非常简单:

公共函数executeUp（）｛美元的项目= ItemPeer::retrieveByPk（这个美元->getRequestParameter（“id”））；这个美元->forward404Unless（美元的项目）；previous_item美元= ItemPeer::retrieveByRank（美元的项目->getRank（）-1）；这个美元->forward404Unless（previous_item美元）；美元的项目->swapWith（previous_item美元）；这个美元->重定向（“项/列表”）；｝公共函数executeDown（）｛美元的项目= ItemPeer::retrieveByPk（这个美元->getRequestParameter（“id”））；这个美元->forward404Unless（美元的项目）；next_item美元= ItemPeer::retrieveByRank（美元的项目->getRank（）+1）；这个美元->forward404Unless（next_item美元）；美元的项目->swapWith（next_item美元）；这个美元->重定向（“项/列表”）；｝

如果不是因为安全检查所做的调用forward404Unless ()，这些操作甚至可以更简单，但您必须保护您的应用程序不受错误请求的影响——这些请求可以通过直接键入URL来完成。

这个列表现在功能齐全。尝试在列表中上下移动项目。

AJAX可排序列表

基地

开发一个基本的AJAX可排序列表并不比开发一个经典的列表难。大部分工作是由一个特殊的JavaScript助手处理的sortable_element ()：

//添加到modules/item/actions/actions.class.php公共函数executeAjaxList（）｛这个美元->项目= ItemPeer::getAllByRank（）；｝//在modules/item/templates/中创建一个ajaxListSuccess.php模板<？phpuse_helper（Javascript的）？><时尚> .sortable｛光标:移动;｝< /风格> < h1 >命令列表的项目- AJAX启用 
    “秩序”><？phpforeach（美元的物品作为美元的项目）：？><李id =“item_ < ?php回声美元的项目->getId（）? >"类＝“合适的”><？php回声美元的项目->getName（）？>李< / ><？phpendforeach？>
 
“反馈”> < / div ><？php回声sortable_element（“秩序”，数组（“url”= >“项目/排序”，“更新”= >“反馈”，））？>

输入以下命令查看结果:

http://localhost/sf_sandbox/web/frontend_dev.php/item/ajaxlist

通过魔法sortable_element ()JavaScript助手，< ul >元素被设置为可排序的，这意味着它的子元素可以通过拖放来重新排序。每当用户拖动一个项目并释放它以重新排序列表时，就会使用以下参数发出一个AJAX请求:

POST / sf_sandbox / web / frontend_dev.php /项目/ HTTP / 1.1排序顺序[]= 1与秩序[]= 3与秩序[]= 2与秩序[]= 4与秩序[]= 5与秩序[]= _ = 6

完整的有序列表作为数组传递(格式为订单(排名美元)= $ id,美元的订单从0开始$ id基于下划线后面的内容(＿)在list元素中id属性)。的id可排序元素的属性(订单在本例中)用于命名参数数组。JavaScript助手生成一个XMLHttpRequest到url操作(项目/排序在本例中)，以POST模式传递有序列表，并使用操作的结果更新id元素更新(反馈例子中的Div)

处理AJAX请求

现在我们来写项目/排序动作，并查看它如何重新排序项列表:

//添加到modules/item/actions/actions.class.php公共函数executeSort（）｛美元的订单＝这个美元->getRequestParameter（“秩序”）；美元的标志= ItemPeer::doSort（美元的订单）；返回美元的标志？sfView::成功: sfView::错误；｝

对整个列表进行重新排序的能力是模型的一部分，这就是为什么它被实现为静态方法的原因ItemPeer类。同样，这种方法更新了许多记录的事实项表使得有必要将更新包含在数据库事务中。

静态函数doSort（美元的订单）｛反对美元=推动:getConnection（自我::DATABASE_NAME）；试一试｛反对美元->beginTransaction（）；foreach（美元的订单作为美元的地位= >$ id）｛美元的项目= ItemPeer::retrieveByPk（$ id）；如果（美元的项目->getRank（）! =美元的地位）｛美元的项目->setRank（美元的地位）；美元的项目->保存（）；｝｝反对美元->提交（）；返回真正的；｝抓（异常$ e）｛反对美元->回滚（）；返回假；｝｝

此方法返回的值将确定操作将显示哪个模板。在您的模块/项目/模板/文件夹:

/ / sortSuccess.php好吧/ / sortError.php出现问题。 . Please refresh and try again.输出说明

在重新排列列表后按F5测试服务器处理。顺序不应该改变，这证明服务器正确理解并保存了AJAX请求发送给它的内容。

专注于sortable_element ()选项

的Javascript助手章节描述远程函数调用的通用选项，但此示例是了解sortable_element ()在细节。

你可以定义一个悬浮列表元素的不同外观拖动另一个元素时hoverclass参数:

<？phpuse_helper（Javascript的）？><时尚> .sortable｛光标:移动;｝.hovered｛粗细:大胆的;｝< / >风格……<？php回声sortable_element（“秩序”，数组（“url”= >“项目/排序”，“hoverclass”= >“徘徊”，））？>

你可以添加不可排序的元素属性将拖放行为限制为单个类只有参数:

．.．< ul id =“秩序”><？phpforeach（美元的物品作为美元的项目）：？><李id =“item_ < ?php回声美元的项目->getId（）? >"类＝“合适的”><？php回声美元的项目->getName（）？>李< / ><？phpendforeach？>
  • 该元素不是有序列表的一部分
    •  <？php回声sortable_element（“秩序”，数组（“url”= >“项目/排序”，“只”= >“合适的”，））？>

    如果列表元素不像前面的示例中那样垂直显示，则必须设置重叠参数水平：

    <？phpuse_helper（Javascript的）？><时尚> .sortable｛光标:移动;浮:左;｝< / >风格……<？php回声sortable_element（“秩序”，数组（“url”= >“项目/排序”，“重叠”= >“水平”，））？>

    如果要排序的列表不是一套<李>元素，你必须定义可排序元素的哪些子元素是可拖拽的:

    ．.．< div id =“秩序”><？phpforeach（美元的物品作为美元的项目）：？>< div id =“item_ < ?php回声美元的项目->getId（）? >"类＝“合适的”><？php回声美元的项目->getName（）？>< / div ><？phpendforeach？>
    不能拖动
    <？php回声sortable_element（“秩序”，数组（“url”= >“项目/排序”，“标签”= >“div”，））？>

    对于所有AJAX操作，最好有一个视觉反馈背景活动和请求成功的情况:

    < div id =“反馈”>
    “指标”风格=“显示:没有;> < img src =“遗产/图片/ activity_indicator.gif”风格=“显示:没有;/ > < / div ><？php回声sortable_element（“秩序”，数组（“url”= >“项目/排序”，“更新”= >“反馈”，“加载”= >“Element.show(“指示器”)”，“完成”= >“Element.hide(“指示器”)”，“成功”= > visual_effect（“亮点”，“反馈”），））？>

    有关这些参数和此处未描述的其他一些参数的详细信息，请参阅可排序手册．

    比较

    这两种方法对列表排序都很有效，但都有局限性和缺点。

    对于大型项目数组，可能需要分页列表。经典方法适用于逐页列表，但AJAX方法需要进行调整，这使得不可能在自己的页面之外重新排列元素。这就是为什么除了AJAX排序界面之外，还应该提供“将物品移动到位置”功能的原因。

    AJAX操作不能像经典操作那样很好地防止错误请求。为了避免数据库不一致的风险，您应该添加validateSort ()方法。itemActions类。此方法将检查所有项id，并且只有它们，在接收的数组中只出现一次。

    它的一个缺点是ItemPeer: doSort ()在AJAX排序中使用的方法是它需要重新排序列表的查询数量。在包含n个元素的列表中，每次移动至少对数据库进行n+2次查询。AJAX列表不适合长列表，因此这可能不是一个主要问题，但如果您关心性能，则应该重构此方法，使其仅用一个查询更新排名—例如使用更新表集案例/时间SQL语法。

    AJAX接口无疑更加用户友好，特别是对于长时间的排序任务，因为在两个操作之间不需要进行服务器刷新。但是在网页界面中，拖拽元素的功能还是个新功能，不习惯的用户可能会感到惊讶。此外，如果您选择AJAX界面，您将不得不考虑可拖动元素的大小(它们需要足够大才能被抓取)、它们的方面、它们的移动自由……许多人机交互问题不需要用经典方法解决。

    如果您的目标用户可能会在浏览器中关闭JavaScripts，那么AJAX交互始终是个问题。这意味着，除了设计JavaScript界面之外，还应该提供经典的界面作为替代方案，以优雅地降低功能。

    总而言之，AJAX版本的感觉和外观确实更好，但它的开发时间至少是原来的两倍。

    本作品采用创作共用署名-非商业性-禁止派生作品3.0未移植许可协议授权。