부 트 스 트랩 트 리 컨트롤 사용 경험 공유(그림 설명)

21139 단어 bootstrap나무.컨트롤
jquery 트 리 컨트롤
jquery 트 리 컨트롤 은 jquery+boottstrap 을 기반 으로 js 와 스타일 을 통 해 손 으로 쓴 매우 가 벼 운 컨트롤 로 기능 이 간단 하고 사용자 체험 이 좋 습 니 다.일부 간단 한 등급 관계 에 대한 전시 가 비교적 실 용적 이다.
앞에서 말 했 듯 이 우 리 는 프로젝트 에 나 무 를 사용 해 야 할 때 가 많 습 니 다.어떤 나 무 는 등급 관 계 를 보 여 주 는 것 일 뿐 입 니 다.어떤 나 무 는 등급 관 계 를 보 여 주 는 것 이 고 어떤 나 무 는 선택 한 다음 에 다른 곳 에서 선택 한 항목 을 호출 하기 위해 서 입 니 다.어쨌든 트 리 컨트롤 은 많은 항목 에 없어 서 는 안 되 거나 없어 서 는 안 되 는 구성 요소 중 하나 입 니 다.오늘 블 로 거들 은 자신의 사용 경험 과 인터넷 에서 찾 은 괜 찮 은 트 리 컨트롤 을 결합 하여 이곳 에서 공유 할 계획 입 니 다.여러분 에 게 가장 적합 한 컨트롤 을 찾 아 주 셨 으 면 합 니 다.아니면 그 말:컨트롤 이 가장 좋 지 않 고 가장 적합 할 뿐이다.
1.JQuery 트 리 컨트롤
Jquery 트 리 컨트롤 은 JQuery+boottstrap 을 기반 으로 js 와 스타일 을 통 해 손 으로 쓴 매우 가 벼 운 컨트롤 로 인터넷 여러 곳 에서 그림 자 를 볼 수 있 습 니 다.그것 은 기능 이 간단 하고 사용자 체험 이 좋다.일부 간단 한 등급 관계 에 대해 보 여 주 는 것 이 비교적 실 용적 이지 만 노드 에 대한 첨삭 과 수정 이 실현 되 기 가 쉽 지 않다.만약 에 굳이 하려 면 스스로 포장 해 야 할 수도 있다.
1.처음 모습 을 보면
싹 걷 어 치우다

한 단계 전개

모두 펼 치기

2.코드 예제
이 컨트롤 은 jQuery 와 boottstrap 구성 요 소 를 참조 하면 됩 니 다.

<link href="~/Content/Tree1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/Tree1/css/style.css" rel="external nofollow" rel="stylesheet" />

 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script type="text/javascript">
　　$(function(){
 　　$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
 　　$('.tree li.parent_li > span').on('click', function (e) {
 　　 var children = $(this).parent('li.parent_li').find(' > ul > li');
 　　if (children.is(":visible")) {
  　　children.hide('fast');
  　　$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
 　　} else {
  　　children.show('fast');
  　　$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
 　　}
 　　e.stopPropagation();
 　　});
　　});
 </script>
<div class="tree well">
 <ul>
  <li>
  <span><i class="icon-folder-open"></i>     1</span> <a href="">Goes somewhere</a>
  <ul>
   <li>
   <span><i class="icon-minus-sign"></i>     1</span> <a href=""></a>
   <ul>
    <li>
    <span><i class="icon-leaf"></i>     1_1</span> <a href=""></a>
    </li>
   </ul>
   </li>
   <li>
   <span><i class="icon-minus-sign"></i>     2</span> <a href=""></a>
   <ul>
    <li>
    <span><i class="icon-leaf"></i>    2_1</span> <a href=""></a>
    </li>
    <li>
    <span><i class="icon-minus-sign"></i>     2_2</span> <a href=""></a>
    <ul>
     <li>
     <span><i class="icon-minus-sign"></i>    2_1</span> <a href=""></a>
     <ul>
      <li>
      <span><i class="icon-leaf"></i>    2_1</span> <a href=""></a>
      </li>
      <li>
      <span><i class="icon-leaf"></i>     2_2</span> <a href=""></a>
      </li>
     </ul>
     </li>
     <li>
     <span><i class="icon-leaf"></i>    2_2</span> <a href=""></a>
     </li>
     <li>
     <span><i class="icon-leaf"></i>     2_3</span> <a href=""></a>
     </li>
    </ul>
    </li>
    <li>
    <span><i class="icon-leaf"></i>    2_3</span> <a href=""></a>
    </li>
   </ul>
   </li>
  </ul>
  </li>
  <li>
  <span><i class="icon-folder-open"></i>     2</span> <a href=""></a>
  <ul>
   <li>
   <span><i class="icon-leaf"></i>     2_1</span> <a href=""></a>
   </li>
  </ul>
  </li>
 </ul>
 </div>
이 코드 들 은 모두 인터넷 에서 직접 내 려 온 것 입 니 다.노드 위의 아이콘 은 스타일 을 통 해 수정 할 수 있 고 아이콘 스타일 도 boottstrap 을 기반 으로 합 니 다.노드 를 동적 으로 추가 할 필요 가 있다 면,스스로 구성 요 소 를 패키지 하여 html 를 맞 출 수 있 고,실현 하기 도 비교적 간단 할 것 이다.이상 에서 알 수 있 듯 이 이 구성 요소 의 경량급 입 니 다.노드 에 대한 추가 삭제 나 선택 등 작업 이 필요 하 다 면 서 두 르 지 마 십시오.아래 의 컨트롤 이 적 용 될 수 있 습 니 다.
2.파일 트 리 편집 플러그 인 Treed
이 구성 요 소 는 인터넷 에서 찾 았 습 니 다.처음에 보 여 드 렸 을 때 팀 내 구성원 들 은 모두 효과 가 매우 좋다 고 생각 했 습 니 다.트 리 전 시 를 통 해 노드 의 첨삭 을 편리 하 게 제공 하기 때문이다.노드 의 신축 효과 도 비교적 좋다.자,어디 보 자.데모 및 다운로드 주소:http://www.jq22.com/jquery-info401
1.트 레이 드 를 처음 본다.
기본 전개 1 단계

왼쪽 에 있 는"+"번 과 오른쪽 에 있 는 노드 를 누 르 면 하위 노드 가 펼 쳐 집 니 다.

다단 계 전개

왼쪽 에서 노드 이름 을 편집 할 수 있 습 니 다.

Enter 키 를 누 르 면 줄 을 바 꾸 고 형제 노드 를 추가 합 니 다.줄 을 바 꾸 면 노드 를 삭제 할 수 있 습 니 다.

Enter 키 를 누 른 후 Tab 키 를 누 르 면 하위 노드 를 추가 할 수 있 습 니 다.

강하 다.심사 요 소 는 html 5 의 svg 라벨 을 사용 하여 이 루어 진 것 을 알 수 있 기 때문에 브 라 우 저 에 대해 어느 정도 요구 가 있 습 니 다.
3.유 니 버 설 트 리 컨트롤―zTree
ztree 는 전통 적 인 트 리 구성 요소 로 강력 한 기능 이 트 리 컨트롤 계 에서 의 위 치 를 결정 합 니 다.트 리 디 스 플레이 든 편집 이 든 노드 선택 과 다 중 선택 이 든 강력 한 기능 API 를 제공 합 니 다.그러나 인터페이스 효과 가 그다지 좋 지 않 기 때문에 많은 회사 들 이 이 를 사용 할 때 어느 정도 망 설 이 고 있다.다행히 편평 한 스타일 이 나 온 후에 ztree 도 어느 정도 미화 되 었 다.예 를 들 어 Metro 스타일 의 구성 요소 와 boottstrap 스타일 은 매우 비슷 하 다.오늘 은 Metro 스타일 의 ztree 와 결합 하여 이 구성 요소 의 용법 을 소개 합 니 다.데모 및 다운로드 주소:http://www.jq22.com/jquery-info941
1.구성 요소 사용
이 구성 요 소 는 Nuget 을 통 해 직접 추가 할 수 있 습 니 다.

2.구성 요소 효과
노드 모두 접 기

노드 전개

노드 선택,물론 필요 하 다 면 단일 선택 이 될 수 있 습 니 다.

노드 를 첨삭 할 수 있다


텍스트 상 자 를 누 르 면 트 리 가 나타 납 니 다.

3.코드 예제
3.1 화면 에 텍스트 상 자 를 직접 표시
인용 할 js 와 css 파일

 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script src="~/Content/bootstrap/js/bootstrap.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.css" rel="external nofollow" rel="stylesheet" />
 <script src="~/Scripts/jquery.ztree.all-3.5.js"></script>
 <link href="~/Content/zTree.theme.metro.css" rel="external nofollow" rel="stylesheet" />
페이지 html

<div id="menuContent" class="menuContent" style="width:95%;border:1px solid rgb(170,170,170);z-index:10;">
  <ul id="treeDemo" class="ztree" style="margin-top:0; width:100%; height:auto;"></ul>
 </div>
JS 초기 화

var setting = {
 view: {
 addHoverDom: addHoverDom,
 removeHoverDom: removeHoverDom,
 selectedMulti: false
 },
 check: {
 enable: true
 },
 data: {
 simpleData: {
  enable: true
 }
 },
 edit: {
 enable: false
 }
};
var zNodes = [
 { id: 1, pId: 0, name: "   1", open: true },
 { id: 11, pId: 1, name: "   11" },
 { id: 111, pId: 11, name: "    111" },
 { id: 112, pId: 11, name: "    112" },
 { id: 113, pId: 11, name: "    113" },
 { id: 114, pId: 11, name: "    114" },
 { id: 12, pId: 1, name: "   12" },
 { id: 121, pId: 12, name: "    121" },
 { id: 122, pId: 12, name: "    122" },
 { id: 123, pId: 12, name: "    123" },
 { id: 124, pId: 12, name: "    124" },
 { id: 13, pId: 1, name: "   13", isParent: true },
 { id: 2, pId: 0, name: "   2" },
 { id: 21, pId: 2, name: "   21", open: true },
 { id: 211, pId: 21, name: "    211" },
 { id: 212, pId: 21, name: "    212" },
 { id: 213, pId: 21, name: "    213" },
 { id: 214, pId: 21, name: "    214" },
 { id: 22, pId: 2, name: "   22" },
 { id: 221, pId: 22, name: "    221" },
 { id: 222, pId: 22, name: "    222" },
 { id: 223, pId: 22, name: "    223" },
 { id: 224, pId: 22, name: "    224" },
 { id: 23, pId: 2, name: "   23" },
 { id: 231, pId: 23, name: "    231" },
 { id: 232, pId: 23, name: "    232" },
 { id: 233, pId: 23, name: "    233" },
 { id: 234, pId: 23, name: "    234" },
 { id: 3, pId: 0, name: "   3", isParent: true }
];
$(document).ready(function () {
 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function addHoverDom(treeId, treeNode) {
 var sObj = $("#" + treeNode.tId + "_span");
 if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
 var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
 + "' title='add node' onfocus='this.blur();'></span>";
 sObj.after(addStr);
 var btn = $("#addBtn_" + treeNode.tId);
 if (btn) btn.bind("click", function () {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
 return false;
 });
};
function removeHoverDom(treeId, treeNode) {
 $("#addBtn_" + treeNode.tId).unbind().remove();
};
3.2 기본적으로 숨 기 고 어떤 사건 을 촉발 할 때 트 리 가 나타 납 니 다.이런 장면 은 프로젝트 에서 매우 흔히 볼 수 있 는데 보통 나무 노드 를 선택 하 는 데 쓰 인 다.그 러 니까 블 로 거들 도 이거 따로 꺼 내 서 얘 기해.
div 기본 값 은 숨겨 져 있 습 니 다.

　　　　<input type="text" class="form-control" id="txt_ztree" placeholder="       ztree" onclick="showMenu()" />
  <div id="menuContent2" class="menuContent" style="display:none;position: absolute;width:95%;border:1px solid rgb(170,170,170);z-index:10;">
  <ul id="treeDemo2" class="ztree" style="margin-top:0; width:160px; height:auto;"></ul>
  </div>
js 에서 트 리 초기 화 및 쇼 메뉴 등록()방법

var setting2 = {
 check: {
 enable: true,
 chkStyle: "radio",
 radioType: "all"
 },
 view: {
 dblClickExpand: false
 },
 data: {
 simpleData: {
  enable: true
 }
 },
 callback: {
 onClick: onClickNode,
 onCheck: onCheck
 }
};
var zNodes = [
 { id: 1, pId: 0, name: "   1", open: true },
 { id: 11, pId: 1, name: "   11" },
 { id: 111, pId: 11, name: "    111" },
 { id: 112, pId: 11, name: "    112" },
 { id: 113, pId: 11, name: "    113" },
 { id: 114, pId: 11, name: "    114" },
 { id: 12, pId: 1, name: "   12" },
 { id: 121, pId: 12, name: "    121" },
 { id: 122, pId: 12, name: "    122" },
 { id: 123, pId: 12, name: "    123" },
 { id: 124, pId: 12, name: "    124" },
 { id: 13, pId: 1, name: "   13", isParent: true },
 { id: 2, pId: 0, name: "   2" },
 { id: 21, pId: 2, name: "   21", open: true },
 { id: 211, pId: 21, name: "    211" },
 { id: 212, pId: 21, name: "    212" },
 { id: 213, pId: 21, name: "    213" },
 { id: 214, pId: 21, name: "    214" },
 { id: 22, pId: 2, name: "   22" },
 { id: 221, pId: 22, name: "    221" },
 { id: 222, pId: 22, name: "    222" },
 { id: 223, pId: 22, name: "    223" },
 { id: 224, pId: 22, name: "    224" },
 { id: 23, pId: 2, name: "   23" },
 { id: 231, pId: 23, name: "    231" },
 { id: 232, pId: 23, name: "    232" },
 { id: 233, pId: 23, name: "    233" },
 { id: 234, pId: 23, name: "    234" },
 { id: 3, pId: 0, name: "   3", isParent: true }
];
//   
$(document).ready(function () {
 $.fn.zTree.init($("#treeDemo2"), setting2, zNodes);
});
//    
function showMenu() {
 $("#menuContent2").css({ left: "15px", top: "34px" }).slideDown("fast");
 $("body").bind("mousedown", onBodyDown);
}
//    
function hideMenu() {
 $("#menuContent2").fadeOut("fast");
 $("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
 if (!(event.target.id == "menuBtn" || event.target.id == "menuContent2" || event.target.id == "txt_ztree" || $(event.target).parents("#menuContent2").length > 0)) {
 hideMenu();
 }
}
//      
function onClickNode(e, treeId, treeNode) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 zTree.checkNode(treeNode, !treeNode.checked, null, true);
 return false;
}
//      
function onCheck(e, treeId, treeNode) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
 nodes = zTree.getCheckedNodes(true),
 v = "";
 var parentid = "";
 var parentlevel = "";
 for (var i = 0, l = nodes.length; i < l; i++) {
 v += nodes[i].name + ",";
 parentid += nodes[i].id + ",";
 parentlevel += nodes[i].menu_level + ",";
 }
 if (v.length > 0) {
 v = v.substring(0, v.length - 1);
 parentid = parentid.substring(0, parentid.length - 1);
 parentlevel = parentlevel.substring(0, parentlevel.length - 1);
 }
 else {
 return;
 }
 hideMenu();
}
이상 은 모두 정적 데이터 이기 때문에 배경 에서 데 이 터 를 가 져 와 트 리 노드 를 동적 으로 불 러 오 려 면 배경 에서 zNodes 라 는 구조의 배열 을 구성 하면 됩 니 다.
총화
상기 세 가지 트 리 구성 요 소 는 각각 천추 가 있 으 며 수요 에 따라 서로 다른 구성 요 소 를 선택 할 수 있 습 니 다.
위 에서 말 한 것 은 소 편 이 소개 한 Bootstrap 트 리 컨트롤 사용 경험 공유(그림 설명)입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
React 를 신속하게 구축 하 는 환경 절차 에 대한 상세 한 설명
애니메이션 효과 예시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage