类javaeye博客我的收藏页面中分类标签输入功能的实现

hegz

浏览: 441650 次
性别:
来自: 茂名

最近访客更多访客>>

u012363178

zhangze6000

corn8888

咕咕鸡呜呜

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FleaPHP

jQuery PHP JavaScript 数据结构 UI

javaeye博客的收藏管理页面，收藏分类是通过下拉列表选择来录入已有分类标签的，这个功能非常方便实用，因为不用死记旧标签，还提高了标签的录入效率，于是决定自己模仿也搞一个。

在开始之前，先说明一下，以下的模仿过程全部处于FleaPHP框架之下，数据库为MySQL。

以下为功能实现的整个过程。

第一步：相关数据表准备

先创建一个文章管理数据表articles，该表含有一个自增量字段art_id。
接着创建一个分类标签数据表tags，其表结构如下图所示：

再创建一个中间表articles_tags，其表结构如下图所示：

第二步：编写数据表对象代码

1、编写文章数据表对象代码。如下所示：

<?php

FLEA::loadClass('FLEA_Db_TableDataGateway');

/**
 * 文章数据表对象
 */
class Table_Articles extends FLEA_Db_TableDataGateway
{
    var $tableName = 'articles';
    var $primaryKey = 'art_id';

    /**
     * 定义多对多关系
     *
     */
    var $manyToMany = array(
        array(
            'tableClass'      => 'Table_Tags',
            'joinTable'       => 'articles_tags',
            'foreignKey'      => 'art_id',
            'assocforeignKey' => 'tag_id',
            'mappingName'     => 'tags',
            'enabled'          => false
        )
    );
}
?>

2、编写分类标签数据表对象代码。如下所示：

<?php

FLEA::loadClass('FLEA_Db_TableDataGateway');

/**
 * 分类标签数据表对象
 */
class Table_Tags extends FLEA_Db_TableDataGateway
{
    var $tableName = 'tags';
    var $primaryKey = 'tag_id';
}
?>

第三步：编写模型对象类代码

1、编写分类标签模型对象类代码。如下所示：

<?php

/**
 * 分类标签模型对象类
 */
class Model_Tags
{
    var $_tblTags;

    /**
     * 构造函数
     *
     */
    function Model_Tags()
    {
        $this->_tblTags = & FLEA::getSingleton('Table_Tags');
    }

    /**
     * 生成标签下拉列表HTML代码
     */
    function makeTagsDropdownlist()
    {
        $ui = & FLEA::initWebControls();
        FLEA::loadFile('FLEA_Helper_Array.php');

        $rows = $this->_tblTags->findAll();

        // 增加一个下拉选择项在最前面
        array_unshift($rows, array('tag_id' => 0, 'label' => '选择已有分类'));

        $items = array_to_hashmap($rows, 'label', 'tag_id');

        return $ui->control(
            'dropdownlist',
            'tagsel',  // 下拉列表ID
            array(
                'items' => $items,
                //'selected' => null,
            ),
            true // 指示返回html代码，如果为false，则不返回
        );
    }
}
?>

2、编写文章模型对象代码。如下所示：

<?php

/**
 * 文章模型对象
 */
class Model_Articles
{
    var $_tblArt;
   
    /**
     * 构造函数
     *
     */
    function Model_Articles()
    {
        $this->_tblArt = & FLEA::getSingleton('Table_Articles');
    }
   
    /**
     * 完成对文章条目所关联的 tags 的处理
     *
     * @param array $row
     */
    function _processTags(& $row) {
        // 读出数据库现有的所有 tags
        $tblTags = & FLEA::getSingleton('Table_Tags');

        $rows = $tblTags->findAll(null);
       
        FLEA::loadFile('FLEA_Helper_Array.php');
        $existsTags = array_to_hashmap($rows, 'label', 'tag_id');

        // 处理用户输入的 tags
        $labels = explode(',', $row['tags']);
        //$labels = explode(',', $tags);
        $tagsIdList = array();
        foreach ($labels as $label) {
            $label = strtolower(trim($label));
            if ($label == '') {
                continue;
            }
            if (isset($existsTags[$label])) {
                // 将文档登记到现有 tag
                $tagsIdList[] = $existsTags[$label];
            } else {
                // 创建新 tag，并登记文档
                $tag = array('label' => $label);
                $tagsIdList[] = $tblTags->create($tag);
            }
        }

        $row['tags'] = $tagsIdList;
        //return $tagsIdList;
    }
   
    /**
     * 新增文章
     *
     * @param array $row
     * @return int
     */
    function create(& $row) {
        $this->_processTags($row);
        $this->_tblArt->enableLink('tags');
        return $this->_tblArt->create($row);
    }
   
    /**
     * 更新文章
     *
     * @param array $row
     * @return int
     */
    function update(& $row) {
        $this->_processTags($row);
        $this->_tblArt->enableLink('tags');
        return $this->_tblArt->update($row);
    }
}
?>

第四步、编写HTML模板代码

因为要利用到jQuery，所以模板文件要引入jQuery库文件。如下所示：

<!-- // 引入 jQuery 库文件 -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

模板文件中与标签相关的HTML代码：

<tr>
   <td>分类标签：</td>
   <td><input name="tags" type="text" id="tags" size="30" />
{{ $art.taglist }}*多个标签之间用半角逗号分隔</td>
</tr>

编写选择录入已有标签的JavaScript代码：

<script type="text/javascript">
    $(function() {
        $("#tagsel").change(function(){
            var txt = $("option:selected", this).text();
            if (txt == '选择已有分类') {
                txt = '';
            } else {
                var label = $("#tags").val();
                if (label) {
                    txt = label +  ', ' + txt;
                }
            }
            $("#tags").val(txt);
        });
    });
</script>

第五步：编写后台文章控制器类代码

<?php
/**
 * 办公网站后台管理——文章管理控制器类
 *
 * 文 件 名：Admin/Controller/Article.php
 * 作    者：hegz
 * 更新时间：2010/05/07
 *
 */

/**
 * 装入后台管理控制器基类
 */

//{{
FLEA::loadClass('Controller_AdminBase');
//}}

class Controller_Article extends Controller_AdminBase
{
    var $_modelArt;

    /**
     * 构造函数
     *
     */
    function Controller_Article()
    {
        parent::Controller_AdminBase();
        $this->_modelArt = & FLEA::getSingleton('Model_Articles');
    }

   /**
    * 显示新增文档界面操作
    *
    */
    function actionAdd()
    {
        ......
       
        $tags = & FLEA::getSingleton('Model_Tags');
        $data = array(
            'header' => '攒写文档',
            'action' => $this->_url('Save'),
            'taglist' => $tags->makeTagsDropdownlist()  // 注意此句代码，生成下拉列表HTML代码
        );

        ......

        $this->tpl->assign('art', $data);   // Smarty模板引擎变量替换

        ......
    }

    /**
     * 保存文档操作
     *
     */
    function actionSave()
    {
        $data = $_POST;

        ......
       
        if ($data['art_id']) {
            $this->_modelArt->update($data);
            $art_id = $data['art_id'];
        } else {
            $art_id = $this->_modelArt->create($data);
        }
       
        ......
    }
}

结束语

上面的实现过程由于要考虑新标签的保存及旧标签的处理，以及文章表与标签表的多对多关联，所以看上去有些复杂。如果不考虑这些实现，就只是下面几行处理标签录入的JavaScript代码的事。

<script type="text/javascript">
	$(function() {
        $("#tagsel").change(function(){
            var txt = $("option:selected", this).text();
            if (txt == '选择已有分类') {
                txt = '';
            } else {
				var label = $("#tags").val();
				if (label) {
					txt = label +  ', ' + txt;
				}
			}
			$("#tags").val(txt);
        });
	});
</script>

最后，实现的效果如下图所示：