ztree 트 리 플러그 인 은 전국 5 급 지역 클릭 후 불 러 오 는 예제 입 니 다.
ztree 트 리 플러그 인 홈 페이지 안내
ztree 는 jQuery 에 의 해 이 루어 진 다기 능'트 리 플러그 인'입 니 다.우수한 성능,유연 한 배치,다양한 기능 의 조합 은 ztree 의 가장 큰 장점 입 니 다.
ztree 트 리 플러그 인 홈 페이지 주소
http://www.treejs.cn/v3/main.php#_zTreeInfo
기능 구현 코드
데이터베이스 지역 표 기본 구조:
regionType
path
name
parentRegion
페이지 코드:
<!-- 、 -->
<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=" " maxlength="20" readonly="readonly">
<input type="text" class="form-control" style="width:320px;float:left;" name="domiciliaryAddress" value="" placeholder=" " maxlength="100">
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="form-group">
<label style="display: block;"> </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=" " maxlength="20" readonly="readonly">
<input type="text" class="form-control" style="width:320px;float:left;" name="bideAddress" value="" placeholder=" " maxlength="100">
</div>
</td>
</tr>
<!-- bootstrap (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()"> </button>
</div>
</div>
</div>
</div>
효과:js 코드:
$(document).ready(function() {
// zTree
var setting = {
view: {
showIcon: false,//
selectedMulti: false // 。 : true。
},
data: {
simpleData: {
enable: true, // (Array)。 :false
idKey: "path", // 。
pIdKey: "parentRegion", // 。
rootPid: "10000000000000" // , pIdKey 。
}
},
callback: {
//
onClick: function(event, treeId, treeNode, clickFlag) {
var treeObj = $.fn.zTree.getZTreeObj(treeId); // treeId zTree
// , ,
if((treeNode.children == null || treeNode.children == "undefined")){
if(!$("#"+treeNode.tId+"_switch").hasClass("center_docu") && !$("#"+treeNode.tId+"_switch").hasClass("bottom_docu")){
// ,
$.ajax({
type: "get",
async: false,
url: "tRegion/ajaxArea",
data:{
path:treeNode.path
},
dataType:"json",
success: function(data){
if(data != null && data.length != 0){
//
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(" !");
}
});
}
}else{
//
treeObj.expandNode(treeNode);
}
}
}
};
// ,
$.ajax({
type: "get",
url: "tRegion/ajaxArea",
data: {path:"10000000000000"},
success: function(data, status) {
if (status == "success") {
//
$.fn.zTree.init($("#treeRegion"), setting, data);
// zTree
var treeObj = $.fn.zTree.getZTreeObj("treeRegion");
// ,
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){
//
$('#regionModal').modal('show');
$("#regionModalType").val(type);
}
//
function confimRegion(){
var type = $("#regionModalType").val();
var treeObj = $.fn.zTree.getZTreeObj("treeRegion");
var node = treeObj.getSelectedNodes(); //
var regionType = node[0].regionType;
if(Number(regionType) >= 5){
$("#"+type+"-text").val(node[0].name);
$("#"+type).val(node[0].path);
$('#regionModal').modal('hide');
}
}
구현 효과:이상 의 이 ztree 트 리 플러그 인 은 전국 5 급 지역 에서 클릭 한 후에 불 러 온 예 시 는 바로 작은 편집 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ztree 트 리 플러그 인 은 전국 5 급 지역 클릭 후 불 러 오 는 예제 입 니 다.프로젝트 기능 에 호적 지 와 현 거주 지 를 입력 해 야 합 니 다.사용자 의 수 입 량 을 줄 이기 위해 트 리 플러그 인 을 사용 하여 전국 5 급 지역+입력 상자 에 상세 한 주 소 를 입력 합 니 다.여기에...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.