1. 程式人生 > >PHP.39-TP框架商城應用實例-後臺16-商品屬性2-AJAX添加、刪除

PHP.39-TP框架商城應用實例-後臺16-商品屬性2-AJAX添加、刪除

false .ajax ucc 下標 peid query 添加 split nbsp

添加商品屬性

思路:根據【後臺15】類型表{id,type_name}與屬性表{id,attr_name,attr_type,attr_option_values,type_id}

技術分享

  1、建表商品屬性表p39_goods_attr{id,attr_value,attr_id,goods_id}

/********商品屬性表【多對多:一個屬性可以有多個值,一個商品可以有多個屬性,一個屬性可以對應多個商品】*******/
drop if exists p39_goods_attr;
create table p39_goods_attr
(
    id mediumint unsigned not 
null auto_increment comment Id, attr_value varchar(150) not null default ‘‘ comment 屬性值, attr_id mediumint unsigned not null comment 屬性Id, //屬性id對應屬性表中的屬性id->值 goods_id mediumint unsigned not null comment 商品Id, primary key (id), key goods_id(goods_id), key attr_id(attr_id) )engine
=InnoDB default charset=utf8 comment 商品屬性;

註:在商品表p39_goods中添加字段保存類型id

ALTER TABLE p39_goods ADD column type_id mediumint unsigned not null default 0 comment 類型id;

2、在添加商品/Goods/add.html的表單中使用封裝好的函數buildSelect()制作一個類型的下拉框,並放一個UL標簽來存放屬性

技術分享

3、在商品控制器中添加ajaxGetAttr處理這個AJAX請求,輸出json

技術分享

4、AJAX與JS綁定事件addNewAttr

// 選擇類型獲取屬性的AJAX
        $("select[name=type_id]").change(function(){
            // 獲取當前選中的類型的id
            var typeId = $(this).val();
            // 如果選擇了一個類型就執行AJAX取屬性
            if(typeId > 0)
            {
                // 根據類型ID執行AJAX取出這個類型下的屬性,並獲取返回的JSON數據
                $.ajax({
                    type : "GET",
                    url : "<?php echo U(‘ajaxGetAttr‘, ‘‘, FALSE); ?>/type_id/"+typeId,
                    dataType : "json",
                    success : function(data)
                    {
                        /** 把服務器返回的屬性循環拼成一個LI字符串,並顯示在頁面中 **/
                        var li = "";
                        // 循環每個屬性
                        $(data).each(function(k,v){
                            li += <li>;
                            
                            // 如果這個屬性類型是可選的就有一個+
                            if(v.attr_type == 可選)
                                /************ 綁定點擊事件增加[+] =》addNewAttr()******/
                                li += <a onclick="addNewAttr(this);" href="#">[+]</a>;
                            // 屬性名稱
                            li += v.attr_name +  : ;    
                            // 如果屬性有可選值就做下拉框,否則做文本框
                            if(v.attr_option_values == "")
                                li += <input type="text" name="attr_value[+v.id+][]" />;
                            else    /********* v.id[屬性ID(attr_id)做下標],提交表單處理*************/
                            {
                                li += <select name="attr_value[+v.id+][]"><option value="">請選擇...</option>;
                                // 把可選值根據,轉化成數組
                                var _attr = v.attr_option_values.split(,);
                                // 循環每個值制作option
                                for(var i=0; i<_attr.length; i++)
                                {
                                    li += <option value="+_attr[i]+">;
                                    li += _attr[i];
                                    li += </option>;
                                }
                                li += </select>;
                            }
                                
                            li += </li>
                        });
                        // 把拼好的LI放到 頁面中
                        $("#attr_list").html(li);
                    }
                });
            }
            else
                $("#attr_list").html("");  // 如果選的是請 選擇就直接清空
        });

        // 點擊屬性的+號2
        function addNewAttr(a)
        {
            // $(a)  --> 把a轉換成jquery中的對象,然後才能調用jquery中的方法
            // 先獲取所在的li
            var li = $(a).parent();
            if($(a).text() == [+])
            {
                var newLi = li.clone();
                // +變-
                newLi.find("a").text([-]);
                // 新的放在li後面
                li.after(newLi);
            }
            else
                li.remove();
            }

5、循環處理每個屬性值插入到商品屬性表=>修改商品模型GoogsModel.class.php 在添加後_after_insert()的鉤子方法中添加代碼

/***************處理插入的商品屬性p39_goods_attr***/
            $attrValue = I(post.attr_value);
            $gaModel = M(goods_attr);
            //var_dump($attrValue);die;
            foreach ($attrValue as $K => $v)
            {
                //把屬性值數組【二維】去重
                $v = array_unique($v);
                $k = $K;
                //var_dump($v);die;
                foreach ($v as $k1 => $v1)
                {
                    $gaModel->add(array(
                        goods_id => $data[id],
                        attr_id => $k,
                        attr_value => $v1,
                    ));
                }
            } 

技術分享

  註:在添加商品時,把商品類型更新到商品表中的type_id字段上,修改商品模型設置允許接收type_id字段

技術分享

商品屬性的刪除

思路:當刪除一件商品時,這件商品所有的屬性也一起刪除

技術分享

PHP.39-TP框架商城應用實例-後臺16-商品屬性2-AJAX添加、刪除