城市选择器3级联动源码分享及使用方法

1、HTML中调用JS显示3级联动的下拉选项。
https://github.com/webjust/case-study
3_level_city

Select Code
1
2
3
省:<select id="province"></select>
市:<select id="city"></select>
区:<select id="area"></select>

2、JSON格式的城市数据,转换成普通变量array格式,批量导入到数据库。
2016-08-22_211617

city_array

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// $data是存储的JSON格式,转换成数组时,第2个参数必须填写,默认转换成数组对象。
$arr = json_decode($data, true);

$arr2 = array();
// 转换索引
foreach ($arr as $key => $value) {
	$arr2[$key]['data_id'] = $value['id'];
	$arr2[$key]['code'] = $value['code'];
	$arr2[$key]['name'] = $value['name'];
	$arr2[$key]['pid'] = $value['pid'];
}

// 实例化模型对象,批量导入数据到MySQl
D("City")->addAll($arr2);

3、存储到数据库中的地址是value值。(如图所示)
shop_city2

shop_city
4、写函数将地址转换成中文格式。

在送货地址表shop_address中,address_id和customer_id关联,查找当前默认地址。
ER_Cart

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 根据address_id查找详细的地址
public function findDefaultAddress($address_id)
{
	try{
		$ret = M('address')->where('address_id='.$address_id)->find();
		$address = $this->findCity($ret['province'], $ret['city'], $ret['area']).$ret['address'];
		return $address;
	}catch(Exception $e){
		return $e->getMessage();
	}
}

// 根据value值查找城市
private function findCity($value1, $value2, $value3)
{
	if ($value1 == 0 || $value2 == 0 || $value3 == 0) {
		return '****城市信息缺失****';
	}
	try{
		$address = M("city");
		return $address->where("data_id=".$value1)->getField('name').$address->where("data_id=".$value2)->getField('name').$address->where("data_id=".$value3)->getField('name');
	} catch(Exception $e)
	{
		return $e->getMessage();
	}
	
}

TP中js实现每页显示数量

page_num

1、通过$_GET[‘pnum’]传递每页显示数量。

2、通过JS获取option值,拼接url地址。
var url = “{:U(‘Order/index/’)}”+”?pnum=”+pageNum;

3、JS跳转到url地址,通过$_GET[‘pnum’]传值。

Select Code
1
2
3
4
5
6
// 每页显示多少条
$("#pageOption").change(function(){
    var pageNum = $("#dataTables-example_length option:selected").attr('attr_value');
    var url = "{:U('Order/index/')}"+"?pnum="+pageNum;
    window.location.href = url;
})

4、选项。

Select Code
1
2
3
4
5
6
7
<select class="form-control input-sm" aria-controls="dataTables-example" name="dataTables-example_length" id="pageOption">
    <option value="2" attr_value="2" <if condition="(I('get.pnum') eq 2)">selected="selected"</if>>2</option>
    <option value="10" attr_value="10" <if condition="(I('get.pnum') eq 10)">selected="selected"</if>>10</option>
    <option value="25" attr_value="25" <if condition="(I('get.pnum') eq 25)">selected="selected"</if>>25</option>
    <option value="50" attr_value="50" <if condition="(I('get.pnum') eq 50)">selected="selected"</if>>50</option>
    <option value="100" attr_value="100" <if condition="(I('get.pnum') eq 100)">selected="selected"</if>>100</option>
</select> 条数/页</label>

封装类:无限级分类的常用4种方法

1、无限级分类方法:组合一维数组

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 无限级分类方法:组合一维数组
public function unlimitedForLevel ($cate, $html='+  ', $pid=0, $level=0)
{
	$arr = array();
	foreach($cate as $v)
	{
		if($v['pid'] == $pid)
		{
			$v['level'] = $level + 1;
			$v['html'] = str_repeat($html, $level);
			$arr[] = $v;
			$arr = array_merge($arr, $this->unlimitedForLevel($cate, $html, $v['id'], $level+1));
		}
	}

	return $arr;
}

$arr的值:
unlimited_01

页面显示控制器代码(添加了翻页):

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public function index()
{
    // import("Org.Util.Category");
    $Cate = D('cata');
    $sortCate = new \Org\Util\Category();

    // 分页数据
    $count = $Cate->count();// 查询满足要求的总记录数
    $Page = new \Think\Page($count,10);// 实例化分页类 传入总记录数和每页显示的记录数(25)
    $show = $Page->show();// 分页显示输出

    // 进行分页数据查询 注意limit方法的参数要使用Page类的属性
    $list = $sortCate->unlimitedForLevel($Cate->limit($Page->firstRow.','.$Page->listRows)->order('sort')->select());
    $this->assign('list',$list);// 赋值数据集
    $this->assign('page',$show);// 赋值分页输出

    $this->display();
}

unlimited_02

2、无限级分类方法:组合多维数组
(常用于:导航,下拉导航)

还有另外一种方法;使用concat查询语句排序,见文章:SQL的CONCAT()函数实现无限级分类排序

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 无限级分类方法:组合多维数组
public function unlimitedForLayer ($cate, $pid=0)
{
	$arr = array();

	foreach($cate as $v)
	{
		if ($v['pid'] == $pid) {
			$v['child'] = $this->unlimitedForLayer($cate, $v['id']);
			$arr[] = $v;
		}
	}
	return $arr;
}

unlimited_03

3、面包屑导航:传递一个子分类ID返回所有的父类

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 面包屑导航:传递一个子分类ID返回所有的父类
public function getParents ($cate, $id)
{
	$arr = array();

	foreach($cate as $val)
	{
		if($val['id'] == $id)
		{
			$arr[] = $val;
			$arr = array_merge($this->getParents($cate, $val['pid']), $arr);
		}
	}
	return $arr;
}

unlimited_04

4、传递一个父ID,列出1个分类下的所有子分类ID

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
public function getChildId($cate, $pid)
{
	$arr = array();

	foreach($cate as $val)
	{
		if($val['pid'] == $pid)
		{
			$arr[] = $val['id'];
			$arr = array_merge($arr, $this->getChildId($cate, $val['id']));
		}
	}
	return $arr;
}

unlimited_05

分享2个简单实用的jQuery选择器

1、子选择器:nth-child 匹配其父元素下的第N个子或奇偶元素。

nthchild

代码实例:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
        $(document).ready(function(){
            $("ol li:nth-child(5n)").addClass("last");
        })
    </script>
    <style>
        *{ color: #666; text-decoration-line: none;}
        .last a{color: #f00;}
    </style>
    </head>
    <body>
    <ol>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
        <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
    </ol>

2、选择的标签加class,其他同级元素标签移除class

removeclass

Select Code
1
2
3
4
5
6
7
8
9
<!-- 
点击的当前li添加class, 其他移除class
-->
<script>
    $("ol li a").click(function(){
        $(this).parents().children().removeClass('last');
        $(this).parent().addClass('last');
    })
</script>

简述:购物车实现原理

1、产品页POST提交产品信息到购物车页面

2、提交产品:购物车页面,使用$_SESSION存储购物车的信息:

  • 登录信息
  • 添加购物车前访问的页面
  • 购买的产品(3维数组)
  • 存储订单的金额,订单编号等
Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Array
(
[buyer] => Array
(
[username] => wangwei
[isLogin] => 1
)

[history_url] => http://ishop.com/product.php?id=175
[order] => Array
(
[total] => 67.78
[order_num] => AM2016081515061378142
)

[buy_product] => Array
(
[182] => Array
(
[id] => 182
[name] => 春夏款甜美蕾丝修身连衣裙
[image] => f667f48d5d913b414d4f278d413037a5.jpg
[s_image] => s_3b25e1bc109b3cad598055d6b07af7ce.jpeg
[price] => 67.78
[sku] => LYQ-028
[nums_buy] => 1
)

[175] => Array
(
[id] => 175
[name] => 雪梨同款蕾丝拼接连衣裙
[image] => c2f6b45ada75a2508a339ad870ac2592.jpg
[s_image] => s_2ae1772b4dbfc5f384f9c6fa2e9c4f3f.jpeg
[price] => 55.00
[sku] => LYQ-021
[nums_buy] => 1
)
)
)

3、下一步:填写收货信息、选择运费、付款方式

4、获取收货人的信息,生成订单,写入数据库

  • 生成订单信息,写入数据库
  • 订单的产品信息,写入数据库

5、跳转至成功页面

  • 显示成功的信息:单号
  • 清空$_SESSION的订单信息