无限级联动

来源:互联网 发布:发那科机器人基础编程 编辑:程序博客网 时间:2024/06/10 09:44

在做商城网站的开发,考虑到商品表有很多一级级的分类,从一级二级到N级下才是商品本身,所以做了一个无限级的联动


add.HTML页面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

<body>

<script>

function change(obj){
        //负责判断要删除的level标签数字,因为删除的是他下一级的内容所以要加1
        var level=$(obj).attr("level");
        if(typeof(level)=="undefined"){
            //alert("undefined==undefined");
        }else{
            var dellevel=parseFloat(level)+parseFloat(1);
            var jianlevel=parseFloat(level)-parseFloat(1);
        }
        //value选择的分类ID
        var value=$(obj).val();
        if(value==0){
            if(level==1){
                $(".sel").remove();
                $('#pid').val(value);
                $('#level').val(level);
            }else if(level>1){
                $("#"+dellevel).remove();
                //alert(jianlevel);
                var newpid=$("[name='level"+jianlevel+"']").val();
                //alert($('#level1').val());
                $('#pid').val(newpid);
                $('#level').val(level);
                
            }
            return false;
        }else{
           $('#level').val(dellevel);
           $('#pid').val(value);
        }
        var url='__APP__/Commodity/ajaxlevel';
            $.ajax({
                url:url,
                cache:false,
                dataType:'html',
                type:'post',
                data:{
                    pid:function(){
                        return value;
                    }
                },
                success:function(data){
                    if(data==2){
                        //错误
                        $("#"+dellevel+"").remove();
                    }else{
                        $("#"+dellevel+"").remove();
                        $('#nimei').before(data);
                    }
                },
                error:function(){
                    alert('网络异常');
                }
            });
    
}

</script>

<form method='post' id="form1" action="__URL__/insert/" enctype="multipart/form-data">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="add">

<tr>
          <td align="right">类别:</td>
          <td>
              <select id="is_leaf" name="is_leaf">
                <option value="2">分类</option>
                <option value="1">商品</option>
              </select>
          </td>
      </tr>
      <tr>
        <td align="right">商品名字:</td>
        <td><input id="commodity_name" name="commodity_name" type="text" class="input" maxlength="30"  value=""/>&nbsp;<font class="red">*</font></td>
      </tr>
      <tr>
        <td align="right">商品总数:</td>
        <td><input id="commodity_number" name="commodity_number" type="text" class="input" maxlength="30"  value=""/>&nbsp;<font class="red">*</font></td>
      </tr>
      <tr>
        <td align="right">商品单价:</td>
        <td><input id="commodity_price" name="commodity_price" type="text" class="input" maxlength="30"  value=""/>&nbsp;<font class="red">*</font></td>
      </tr>
      <tr>
        <td align="right">商品简介:</td>
        <td><input id="commodity_brief" name="commodity_brief" type="text" class="input" maxlength="30"  value=""/>&nbsp;<font class="red">*</font></td>
      </tr>

<tr>
        <td align="right">商品层级:</td>
        <td><input id="level" name="level" readonly="readonly" type="text" class="input" maxlength="30"  value="1"/>&nbsp;<font class="red">*</font></td>
      </tr>
      <tr>
        <td align="right">商品父级ID:</td>
        <td><input id="pid" name="pid" readonly="readonly" type="text" class="input" maxlength="30"  value="0"/>&nbsp;<font class="red">*</font></td>
      </tr>
      <tr id="1">
          <td  align="right">第1级:</td>
          <td>
             <select onchange="change(this)" class="level" name="level1" id="level1" level="1">
                <option value="0">请选择</option>
                {$level1}
             </select>
          </td>
      </tr>
      <input type="hidden" id="nimei">

<tr>
        <td align="right">&nbsp;</td>
        <td><input name="button" type="submit" class="button" id="button" value="确定新增" onClick="getcontent()"/>
          &nbsp;&nbsp;
        <input name="button" type="button" class="button" id="button" value="取 消" onclick="javascript:history.go(-1)" /></td>
      </tr>

</table>
  </form>

</body>

</html>



TP的CommodityAction代码

//商品管理
class CommodityAction extends CommonAction{

//新增页面
    public function add() {
        $model=D('Commodity');
        $level1=$model->selectlevel(1,2);
        $option1=level($level1);
        // print_r($option1);exit;
        $this->assign('level1',$option1);
        $this->display();
    }

//无限级联动
    public function ajaxlevel(){
        // print_r($_REQUEST);exit;
        $pid=$_REQUEST['pid'];
        $model=M('Commodity');
        $rs=$model->where("pid=".$pid." and status=1 and is_leaf=2")->select();
        // echo $model->getLastSql();exit;
       
        if($rs){
            $level=$rs[0]['level'];
            $optionsel='<tr class="sel" id="'.$level.'"><td align="right">第'.$level.'级:</td><td><select   level="'.$level.'" onchange="change(this)" class="level" name="level'.$level.'"><option value="0">请选择</option>';
            $option1=level($rs);
            $optionend='</select></td></tr>';
            $option=$optionsel.$option1.$optionend;
            echo $option;
            // print_r($rs);
        }else{
            echo 2;
        }
    }
   
        //执行添加操作
    public function insert() {
        
        $model = D('Commodity');
        $rs=$model->insert();
        if($rs>0&&is_numeric($rs)){
            $this->success('添加成功',U('Commodity/index'));
        }else{
            $this->error('添加商品失败,错误原因:'.$rs);
        }
    }

}


common.php的自定函数部分

function level($rs){
    $option='';
    foreach($rs as $k=>$v){
        $option.='<option value="'.$v['id'].'">'.$v['commodity_name'].'</option>';
    }
    return $option;
}


TP的CommodityModel代码

class CommodityModel extends CommonModel {

//执行添加操作
    public function insert(){
        // print_r($_REQUEST);exit;
        $data['commodity_name']=(trim($_REQUEST['commodity_name']));
        $data['commodity_number']=(trim($_REQUEST['commodity_number']));
        $data['commodity_price']=(trim($_REQUEST['commodity_price']));
        $data['commodity_brief'] = trim($_REQUEST['commodity_brief']);
        $data['status']=(trim($_SESSION['status']));
        $data['status']=1;
        $data['is_leaf']=trim($_REQUEST['is_leaf']);
        $data['level']=trim($_REQUEST['level']);
        $data['pid']=trim($_REQUEST['pid']);
        $data['createtime']=time();
      
        if( $this->create( $data ) ) {
            return $this->add();
        } else {
            return $this->getError();
        }
        
    }

}


sql表创建语句

CREATE TABLE `zx_commodity` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',
  `commodity_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT '商品名字',
  `pid` int(11) NOT NULL COMMENT '父ID',
  `level` tinyint(3) unsigned NOT NULL COMMENT '层级',
  `is_leaf` tinyint(1) unsigned NOT NULL COMMENT '类型:1商品,2分类',
  `commodity_number` int(10) unsigned NOT NULL COMMENT '商品数量',
  `commodity_price` int(10) unsigned NOT NULL COMMENT '商品价格',
  `commodity_brief` longtext COLLATE utf8_unicode_ci NOT NULL COMMENT '商品简介',
  `commodity_introduction` longtext COLLATE utf8_unicode_ci NOT NULL COMMENT '商品介绍',
  `image_url` varchar(500) COLLATE utf8_unicode_ci NOT NULL COMMENT '图片地址',
  `status` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '是否启用:1启用,0停用',
  `is_delete` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否已经删除:1已删除,0未删除',
  `createtime` int(11) NOT NULL COMMENT '创建时间',
  `tstamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间戳',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='兑换商品表';

原创粉丝点击