上一节，我们已经完成了视图的显示，并且知道了视图的最终渲染代码是在default.php中。在本节，就编码完成编辑页面
编码完成编辑页面
当我们知道编辑页面的代码是写在default.php这个文件中之后，接下来的工作就基本和joomla框架无关了，只需要正常的使用HTML输出表单即可。简单的实例代码如下：
<form name="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data"> <!-- 编辑表单 --> <div class="control-group"> <div class="control-label"><label >标题</label></div> <div class="controls"><input name="title" type="text" /></div> </div> <div class="control-group"> <div class="control-label"><label >作者</label></div> <div class="controls"><input name="author" type="text" /></div> </div> <div class="control-group"> <div class="control-label"><label >价格</label></div> <div class="controls"><input name="price" type="text" /></div> </div> <div class="control-group"> <div class="control-label"><label >ID</label></div> <div class="controls"><input name="id" type="text" /></div> </div> <input type="hidden" name="option" value="com_zmaxbook" /> <input type="hidden" name="id" value="" /> <input type="hidden" name="task" value="" /> <button type="submit" class="btn btn-primary">保存</button> </form>
刷新后，页面效果如下：
上面的代码为简单的HTML基础，如果感觉阅读有困难，建议自行查找相关资料。另外，可以看到图中的第一个红框栏目有点错位，这是因为我们没有在视图中设置页面的标题，导致出现空格。解决的方法就是在视图中试设置页面的标题。
编辑view.html.php文件，实现display方法，增加视图的标题设置，代码如下：
class zmaxbookViewItem extends JViewLegacy
{
public function display($tpl = null)
{
JToolbarHelper::title('书本管理 - 编辑书本', 'edit');
parent::display($tpl);
}
}
效果如下：
此时就好看多了。在视图渲染的时候默认会执行视图的display方法，这个方法在JViewLegacy父类中实现，主要负责将视图和布局进行关联并且输出。因为我们需要增加标题设置，所以只需要简单的重写父类的display方法，增加输出标题的相关代码。另外，也可以继续改进保存按钮，使用工具栏方法，将按钮添加到工具栏上，以便页面更加的美观。代码如下：
class zmaxbookViewItem extends JViewLegacy
{
public function display($tpl = null)
{
JToolbarHelper::title('书本管理 - 编辑书本', 'edit');
JToolBarHelper::save('item.save');//保存按钮
parent::display($tpl);
}
}
效果如下：
因为是编辑具体的一条记录，提供一个空的表单显然是不行的，下一步就是获得表单的数据。在编辑的时候，我们已经传递了需要编辑记录的ID,因此，可以通过ID,找到需要的数据，再把数据注入到表单。实现代码如下：
<?php
/**
* description:ZMAXBOOK组件 Items视图 布局文件
* author：min.zhang
* Url:http://www.zmax99.com
* copyright:南宁市程序人软件科技有限责任公司保留所有权利
* date:2021-05-24
* version:v2.0.0
* @license GNU General Public License version 3, or later
*/
defined('_JEXEC') or die;
//STEP 1:获得需要编辑记录的ID
$app = JFactory::getApplication();
$id = $app->input->get("id",'0','INT');
//STEP 2:查询数据库，得到编辑记录的详情
$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query->select("*")->from("#__zmaxbook_item")->where("id=".$db->quote($id));
$db->setQuery($query);
$item = $db->loadObject();
?>
<form name="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data">
<!-- 编辑表单 -->
<div class="control-group">
<div class="control-label"><label >标题</label></div>
<div class="controls"><input name="title" type="text" value="<?php echo $item->title;?>" /></div>
</div>
<div class="control-group">
<div class="control-label"><label >作者</label></div>
<div class="controls"><input name="author" type="text" value="<?php echo $item->author;?>"/></div>
</div>
<div class="control-group">
<div class="control-label"><label >价格</label></div>
<div class="controls"><input name="price" type="text" value="<?php echo $item->price;?>"/></div>
</div>
<div class="control-group">
<div class="control-label"><label >ID</label></div>
<div class="controls"><input name="id" type="text" value="<?php echo $item->id;?>" /></div>
</div>
<input type="hidden" name="option" value="com_zmaxbook" />
<input type="hidden" name="task" value="" />
</form>
上面解决问题的逻辑非常的清晰，看一下注释即可理解。现在页面的效果如下：
这样，编辑页面基本就有点雏形了。按照设想，用户在编辑页面填入相应的信息，然后点击保存按钮并关闭按钮，将新的数据存储到数据库即可完成。
说明一下，JToolbarHelper类关于保存按钮的方法一共有4个，分别是：
JToolBarHelper::apply('item.apply');//保存
JToolBarHelper::save('item.save');//保存并关闭
JToolBarHelper::save2new('item.save2new');//保存并新建
JToolBarHelper::save2copy('item.save2copy');//保存为副本
这4个按钮没有本质的区别，仅仅只是CSS样式和按钮文本有所不同而已，最终执行何种动作，还是由控制器的逻辑来决定(也就是传递的第一个参数：item.apply) .这些按钮的本质就是生成一段HTML代码。详细说明请查看使用工具栏
如果点击“保存并关闭”按钮，此时是没有响应的。打开浏览器的控制台，发现存在一个JS错误。
提示告诉我们core.js代码需要表单的id为adminForm。因此，需要修改html代码，为form表单增加id属性。
<form name="adminForm" id="adminForm" class="form-horizontal" action="index.php" method="post" enctype="multipart/form-data">
修改完成后，再次点击保存按钮，发现此时可以提交。但页面出现了找不到视图的错误。这个错误并不是本节的重点，重点是点击保存按钮，表单可以提交了。
表单提交到了什么地方？
在form中，设置了action=“index.php”.说明这个表单将会提交到index.php这个文件。另外，除了表单的内容字段外，我们还另增加了两个隐藏的input.
<input type="hidden" name="option" value="com_zmaxbook" /> <input type="hidden" name="task" value="" />
也就是，在提交表单内容到index.php的时候，还附带了option=com_zmaxbook,task=item.save这个两个参数。
此时，可以按照组件执行的路由理论来重新的走一次这个地址：index.php
如何获得提交表单的数据？
按照之前的理论，现在系统会执行item控制的save方法，因此，需要在save方法中来处理表单的保存。
修改item.php文件，和实现edit方法一样，在里面增加save方法，代码如下：
class zmaxbookControllerItem extends JControllerLegacy
{
public function save()
{
//STEP 1:获得表单的数据
$app = JFactory::getApplication();
$title = $app->input->get("title","",'STRING');
$author = $app->input->get("author","",'STRING');
$price = $app->input->get("price","",'FLOAT');
$id = $app->input->get("id",'','INT');
//STEP 2:更新数据库
$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query->update("#__zmaxbook_item")->set("title=".$db->quote($title));
$query->set("author=".$db->quote($author));
$query->set("price=".$db->quote($price));
$query->where("id=".$db->quote($id));
$db->setQuery($query);
$db->execute();
//STEP 3:重定向
$this->setRedirect("index.php?option=com_zmaxbook&view=items","保存成功");
return true;
}
至此就实现了编辑功能。
实现编辑后的完整版本代码下载：[下载文件:]com_zmaxbookv2.0.3_2021-05-24_for_j3x.zip
评论 (0)