TP5 三級關聯執行個體 以及 原理、流程

這裡還是拿省市區三級關聯為例。

1. 首先下一個三級關聯的資料表，結構如下：

   

字段說明：

id：位址的ID

pid：等于父級位址的 id ，用于識别該地點隸屬于哪裡

name: 地點名稱

type：地點的級别，1是省，2是市，3是縣/區

表名：tree

1. 在背景把所有一級地點（省）查詢出來，并循環輸出到前端第一個select框中

//查詢所有省
	private function getProvince()
	{
		$province = db('tree')->where ([ 'pid'=>1])->select ();
		$this->assign('province',$province);
	}
           

前端省級select框

<select class="select" name="province" id="province" onchange="loadRegion('province',2,'city');">
		<option value="0" selected>省份/直轄市</option>
		{volist name="province" id="vo"}
				<option value="{$vo.id}">{$vo.name}</option>
		{/volist}
</select>
           

1. 給這個下拉框綁定一個onchange事件，用以觸發下面的Ajax，并把需要的參數傳給Ajax

三個參數：

province ： 是省級select框的ID

2：對應表中type字段，等于2的所有資料，即所有二級地點

city：市級select框的ID

同理，寫下下面的市、縣(區)的select下拉框：

<select class="select" name="city" id="city" onchange="loadRegion('city',3,'town');">
		<option value="0">市/縣</option>
</select>

<select class="select" name="town" id="town">
		<option value="0">鎮/區</option>
</select>
           

1. Ajax 向背景送出父級地點的 ID ，并接收在背景查詢得到的 子級地點的 id 和 name，并把得來的值循環輸出到子級的select框裡面

<script type="text/javascript">
			function loadRegion(sel, type_id, selName) {
				$("#" + selName + " option").each(function() {
					$(this).remove();
				});
				$("<option value=0>請選擇</option>").appendTo($("#" + selName));
				if($("#" + sel).val() == 0) {
					return;
				}
				$.ajax({
					url: "{:url('index/Index/getRegion')}",
					type: 'GET',
					data: {
						pid: $("#" + sel).val(),
						type: type_id
					},
					dataType: "json",
					success: function(data) {
						if(data) {
							$.each(data, function(idx, item) {
								$("<option value=" + item.id + ">" + item.name + "</option>").appendTo($("#" + selName));
							});
						} else {
							$("<option value='0'>請選擇</option>").appendTo($("#" + selName));
						}
					}
				});
			}
	</script>
           

背景的 getRegion 方法：

public function getRegion()
	{
		$map['pid']=input("pid");
		$map['type']=input("type");
		$list=db("tree")-> where($map)->select();
		echo json_encode($list);
	}