zTree 樹插件實(shí)現(xiàn)全國(guó)五級(jí)地區(qū)點(diǎn)擊后加載的示例
更新時(shí)間：2018年02月05日 11:23:14 作者：Li_Ya_Fei
下面小編就為大家分享一篇zTree 樹插件實(shí)現(xiàn)全國(guó)五級(jí)地區(qū)點(diǎn)擊后加載的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在項(xiàng)目功能中需要錄入戶籍地和現(xiàn)居住地，為減少用戶輸入量，將使用樹插件選擇全國(guó)五級(jí)地區(qū)+輸入框輸入詳細(xì)地址。這里優(yōu)先使用了zTree樹插件。為了以后使用學(xué)習(xí)，在這里進(jìn)行相關(guān)記錄。當(dāng)然在實(shí)現(xiàn)過(guò)程中參考各大神的文章是必不可少的，可以結(jié)合了自己的實(shí)際需求進(jìn)行快速解決問(wèn)題。
zTree 樹插件官網(wǎng)簡(jiǎn)介
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。
zTree 樹插件官網(wǎng)地址
http://www.treejs.cn/v3/main.php#_zTreeInfo
功能實(shí)現(xiàn)代碼
數(shù)據(jù)庫(kù)地區(qū)表基本結(jié)構(gòu)：
regionType 地區(qū)級(jí)別 path 地區(qū)編碼 name 地區(qū)名稱 parentRegion 上級(jí)地區(qū)
頁(yè)面代碼：
<!-- 戶籍地、現(xiàn)居住地 -->
<tr>
<td colspan="3">
<div class="form-group">
<label style="display: block;">戶籍地</label>
<input type="hidden" name="domiciliary" id="domiciliary">
<input type="text" class="form-control" style="width:300px;float:left;" id="domiciliary-text" value="" onclick="showRegion('domiciliary')" placeholder="點(diǎn)擊選擇地區(qū)" maxlength="20" readonly="readonly">
<input type="text" class="form-control" style="width:320px;float:left;" name="domiciliaryAddress" value="" placeholder="詳細(xì)地址" maxlength="100">
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="form-group">
<label style="display: block;">現(xiàn)居住地址</label>
<input type="hidden" name="bide" id="bide">
<input type="text" class="form-control" style="width:300px;float:left;" id="bide-text" value="" onclick="showRegion('bide')" placeholder="點(diǎn)擊選擇地區(qū)" maxlength="20" readonly="readonly">
<input type="text" class="form-control" style="width:320px;float:left;" name="bideAddress" value="" placeholder="詳細(xì)地址" maxlength="100">
</div>
</td>
</tr>
<!-- bootstrap 模態(tài)框（Modal） -->
<div class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-hidden="true">
<input type="hidden" id="regionModalType" />
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- zTree 的容器 -->
<ul id="treeRegion" class="ztree"></ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="confimRegion()">確認(rèn)</button>
</div>
</div>
</div>
</div>
效果：
js代碼：
$(document).ready(function() {
// zTree 參數(shù)配置
var setting = {
view: {
showIcon: false,//是否顯示節(jié)點(diǎn)的圖標(biāo)
selectedMulti: false //設(shè)置是否允許同時(shí)選中多個(gè)節(jié)點(diǎn)。默認(rèn)值: true。
},
data: {
simpleData: {
enable: true, //是否采用簡(jiǎn)單數(shù)據(jù)模式 (Array)。默認(rèn)值：false
idKey: "path", //節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識(shí)的屬性名稱。
pIdKey: "parentRegion", //節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識(shí)的屬性名稱。
rootPid: "10000000000000" //用于修正根節(jié)點(diǎn)父節(jié)點(diǎn)數(shù)據(jù)，即 pIdKey 指定的屬性值。
}
},
callback: {
// 用于捕獲節(jié)點(diǎn)被點(diǎn)擊的事件回調(diào)函數(shù)
onClick: function(event, treeId, treeNode, clickFlag) {
var treeObj = $.fn.zTree.getZTreeObj(treeId); //根據(jù) treeId 獲取 zTree 對(duì)象
// 這里判斷節(jié)點(diǎn)被點(diǎn)擊時(shí)，如果有已經(jīng)加載下級(jí)節(jié)點(diǎn)，則不用請(qǐng)求服務(wù)器
if((treeNode.children == null || treeNode.children == "undefined")){
if(!$("#"+treeNode.tId+"_switch").hasClass("center_docu") && !$("#"+treeNode.tId+"_switch").hasClass("bottom_docu")){
// 請(qǐng)求服務(wù)器，獲得點(diǎn)擊地區(qū)的下級(jí)地區(qū)
$.ajax({
type: "get",
async: false,
url: "tRegion/ajaxArea",
data:{
path:treeNode.path
},
dataType:"json",
success: function(data){
if(data != null && data.length != 0){
//添加新節(jié)點(diǎn)
var newNodes = treeObj.addNodes(treeNode, data);
$(newNodes).each(function(i,n){
var id = n.tId+"_switch";
if($("#"+id).hasClass("center_docu")){
$("#"+id).removeClass("center_docu");
$("#"+id).addClass("center_close");
}
if($("#"+id).hasClass("bottom_docu")){
$("#"+id).removeClass("bottom_docu");
$("#"+id).addClass("bottom_close");
}
});
}else{
var id = treeNode.tId+"_switch";
if($("#"+id).hasClass("center_close")){
$("#"+id).removeClass("center_close");
$("#"+id).addClass("center_docu");
}
if($("#"+id).hasClass("bottom_close")){
$("#"+id).removeClass("bottom_close");
$("#"+id).addClass("bottom_docu");
}
}
},
error:function(event, XMLHttpRequest, ajaxOptions, thrownError){
result = true;
toastr.error("請(qǐng)求失敗!");
}
});
}
}else{
// 展開當(dāng)前節(jié)點(diǎn)
treeObj.expandNode(treeNode);
}
}
}
};
// 顯示區(qū)域樹，加載頂級(jí)節(jié)點(diǎn)
$.ajax({
type: "get",
url: "tRegion/ajaxArea",
data: {path:"10000000000000"},
success: function(data, status) {
if (status == "success") {
// 初始化區(qū)域樹
$.fn.zTree.init($("#treeRegion"), setting, data);
// 獲得zTree對(duì)象
var treeObj = $.fn.zTree.getZTreeObj("treeRegion");
// 獲得初始化的所有節(jié)點(diǎn)，即頂級(jí)節(jié)點(diǎn)
var nodes = treeObj.getNodes();
$(nodes).each(function(i,n){
var id = n.tId+"_switch";
if($("#"+id).hasClass("roots_docu")){
$("#"+id).removeClass("roots_docu");
$("#"+id).addClass("roots_close");
}
if($("#"+id).hasClass("center_docu")){
$("#"+id).removeClass("center_docu");
$("#"+id).addClass("center_close");
}
if($("#"+id).hasClass("bottom_docu")){
$("#"+id).removeClass("bottom_docu");
$("#"+id).addClass("bottom_close");
}
});
}
},
error : function() {
toastr.error('Error');
},
});
});
function showRegion(type){
// 顯示模態(tài)框
$('#regionModal').modal('show');
$("#regionModalType").val(type);
}
// 選擇地區(qū)確認(rèn)
function confimRegion(){
var type = $("#regionModalType").val();
var treeObj = $.fn.zTree.getZTreeObj("treeRegion");
var node = treeObj.getSelectedNodes(); //選中節(jié)點(diǎn)
var regionType = node[0].regionType;
if(Number(regionType) >= 5){
$("#"+type+"-text").val(node[0].name);
$("#"+type).val(node[0].path);
$('#regionModal').modal('hide');
}
}
實(shí)現(xiàn)效果：
以上這篇zTree 樹插件實(shí)現(xiàn)全國(guó)五級(jí)地區(qū)點(diǎn)擊后加載的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用jquery選擇器得到對(duì)應(yīng)表單的jquery對(duì)象，然后使用attr方法修改對(duì)應(yīng)的action,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了如何實(shí)現(xiàn)單元選擇合并變色，感覺還不錯(cuò)的一個(gè)小功能，大家可以學(xué)習(xí)下2014-05-05
Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery簡(jiǎn)單實(shí)現(xiàn)列表隱藏和顯示效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)列表隱藏和顯示效果,結(jié)合實(shí)例形式分析了jQuery中slideToggle動(dòng)態(tài)操作頁(yè)面元素切換的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jquery中交替點(diǎn)擊事件的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery中交替點(diǎn)擊事件的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-02-02
Js與Jq 獲取頁(yè)面元素值的方法和差異對(duì)比
這篇文章主要介紹了原生js獲取瀏覽器和對(duì)象寬高與jquery獲取瀏覽器和對(duì)象寬高的方法關(guān)系對(duì)比,十分實(shí)用，需要的朋友可以參考下2015-04-04
EasyUI Datebox 日期驗(yàn)證之開始日期小于結(jié)束時(shí)間
這篇文章主要介紹了EasyUI Datebox 日期驗(yàn)證之開始日期小于結(jié)束時(shí)間,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery制作圣誕主題頁(yè)面的方法，類似動(dòng)感影集，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法，非常的實(shí)用，這里推薦給有相同需求的小伙伴2014-12-12
jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項(xiàng)對(duì)象
這篇文章主要介紹了jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項(xiàng)對(duì)象的相關(guān)資料,需要的朋友可以參考下2016-01-01