jQuery 는 ztree 를 이용 하여 트 리 표 의 인 스 턴 스 코드 를 실현 합 니 다.

9520 단어 jqueryztree
최근 회사 의 프로젝트 에 서 는 트 리 표를 만들어 야 합 니 다.그 전에 ztree 로 기본 적 인 트 리 구 조 를 실현 해 왔 기 때문에 당연히 ztree 를 이용 하여 하려 고 합 니 다.
인터넷 에서 다른 사람 이 만 든 트 리 표를 찾 아 보 았 습 니 다.ztree 를 사용 하 는 것 도 있 고 treeTable 을 사용 하 는 것 도 있 지만 효과 가 좋 지 않 습 니 다.그래서 ztree 를 사용 하 는 방법 을 참고 하여 자신 이 만 든 것 을 참고 하여 참고 할 수 있 도록 붙 였 습 니 다.주석 설명 을 보 세 요.효 과 는 다음 과 같 습 니 다.
这里写图片描述 

<!DOCTYPE HTML>
<html>
 <head>
 <link href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="external nofollow" rel="stylesheet">
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>
<style>
 body {
  overflow: auto;
 }
 .ztree *{
  font-family: "    ","  ",Arial, "Times New Roman", Times, serif;
 }
 .ztree {
  padding: 0;
  border-left: 1px solid #E3E3E3;
  border-right: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
 }
 .ztree li a {
  vertical-align: middle;
  height: 32px;
  padding: 0px;
 }
 .ztree li > a {
  width: 100%;
 }
 .ztree li a.curSelectedNode {
  padding-top: 0px;
  background-color: #FFE6B0;
  border: 1px #FFB951 solid;
  opacity: 1;
  height: 32px;
 }
 .ztree li ul {
  padding-left: 0px
 }
 .ztree div.divTd span {
  line-height: 30px;
  vertical-align: middle;
 }
 .ztree div.divTd {
  height: 100%;
  line-height: 30px;
  border-top: 1px solid #E3E3E3;
  border-left: 1px solid #E3E3E3;
  text-align: center;
  display: inline-block;
  color: #6c6c6c;
  overflow: hidden;
 }
 .ztree div.divTd:first-child {
  text-align: left;
  text-indent: 10px;
  border-left: none;
 }
 .ztree .head {
  background: #E8EFF5;
 }
 .ztree .head div.divTd {
  color: #393939;
  font-weight: bold;
 }
 .ztree .ck{
  padding: 0 5px;
  margin: 2px 3px 7px 3px;
 }
 li:nth-child(odd){
  background-color:#F5FAFA;
 }
 li:nth-child(even){
  background-color:#FFFFFF;
 }
</style>
 </head>
 <body>
  <div class="layer">
   <div id="tableMain">
    <ul id="dataTree" class="ztree">
    </ul>
   </div>
  </div>
 </body>
</html>
<script type="text/javascript">
var newOpen =null;
$(function () {
 //     
 var data = [{"id":"20170525091439001010","name":"    ","pId":null,"status":"1","typecode":"02"},{"id":"20170724174119005610","name":"      ","pId":"20170525091439001010","status":"1","typecode":"2"},{"id":"20170725085455000110","name":"  12","pId":null,"status":"1","typecode":"11"},{"id":"20170731171011000410","name":"    ","pId":null,"status":"1","typecode":"222"},{"id":"20170803133941018010","name":"    ","pId":null,"status":"1","typecode":"188"},{"id":"20170804085419000110","name":"  ","pId":null,"status":"1","typecode":"122"},{"id":"20170809090321000110","name":"    （ ）          ","pId":"20170525091439001010","status":"1","typecode":"110"},{"id":"20170809105407009210","name":"                  ","pId":"20170809090321000110","status":"1","typecode":"123"},{"id":"20170814183837000210","name":"    ","pId":null,"status":"1","typecode":"111"},{"id":"20170822183437000710","name":"   -    ","pId":"20170814183837000210","status":"1","typecode":"822"},{"id":"20170922112245000510","name":"23","pId":null,"status":"1","typecode":"03"},{"id":"20170922143810000010","name":"sdfa","pId":null,"status":"1","typecode":"04"},{"id":"20170922145203000110","name":"64526","pId":null,"status":"1","typecode":"34262"},{"id":"20170922155403001610","name":"333","pId":null,"status":"1","typecode":"33354"},{"id":"20170922171750000210","name":"4441234","pId":null,"status":"1","typecode":"44444"},{"id":"20170925160636007410","name":"    ","pId":"20170731171011000410","status":"1","typecode":"231"},{"id":"20170925163306007510","name":"23462111","pId":null,"status":"1","typecode":"2345"},{"id":"20170925163959007610","name":"242345","pId":"20170922112245000510","status":"1","typecode":"3625346"}];
 queryHandler(data);
});
var setting = {
 view: {
  showLine: false,
  addDiyDom: addDiyDom,
 },
 data: {
  simpleData: {
   enable: true
  }
 }
};
/**
 *    DOM  
 */
function addDiyDom(treeId, treeNode) {
 var spaceWidth = 15;
 var liObj = $("#" + treeNode.tId);
 var aObj = $("#" + treeNode.tId + "_a");
 var switchObj = $("#" + treeNode.tId + "_switch");
 var icoObj = $("#" + treeNode.tId + "_ico");
 var spanObj = $("#" + treeNode.tId + "_span");
 aObj.attr('title', '');
 aObj.append('<div class="divTd swich fnt" style="width:60%"></div>');
 var div = $(liObj).find('div').eq(0);
 //        
 switchObj.remove();
 spanObj.remove();
 icoObj.remove();
 //    div   
 div.append(switchObj);
 div.append(spanObj);
 //      span
 var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
 switchObj.before(spaceStr);
 //      
 icoObj.css("margin-top","9px");
 switchObj.after(icoObj);
 var editStr = '';
 //           
 editStr += '<div class="divTd" style="width:20%">' + (treeNode.typecode == null ? '' : treeNode.typecode ) + '</div>';
 editStr += '<div class="divTd" style="width:10%">' + (treeNode.status == '1' ? '  ' : '  ' ) + '</div>';
 editStr += '<div class="divTd" style="width:10%">' + opt(treeNode) + '</div>';
 aObj.append(editStr);
}
//     
function queryHandler(zTreeNodes){
 //    
 $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
 //    
 var li_head = ' <li class="head"><a><div class="divTd" style="width:60%">    </div><div class="divTd" style="width:20%">    </div>' +
  '<div class="divTd" style="width:10%">    </div><div class="divTd" style="width:10%">  </div></a></li>';
 var rows = $("#dataTree").find('li');
 if (rows.length > 0) {
  rows.eq(0).before(li_head)
 } else {
  $("#dataTree").append(li_head);
  $("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >       </div></li>')
 }
}
function opt(treeNode) {
 var htmlStr = '';
 htmlStr += '<input type="button" class="ck" onclick="doEdit(\'' + treeNode.tId + '\',\'' + treeNode.id + '\')" value="  "/>';
 htmlStr += '<input type="button" class="ck" onclick="doDelete(\'' + treeNode.tId + '\',\'' + treeNode.id + '\', \'' + treeNode.name + '\')" value="  "/>';
 return htmlStr;
}
총결산
위 에서 말 한 것 은 소 편 이 소개 한 jQuery 가 ztree 를 이용 하여 트 리 표를 실현 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
Vue-cli 대리 해결 크로스 도 메 인 문제
javascript 작용 도 메 인 체인 에 대한 상세 한 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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