easyui tree 는 ztree 와 유사 한 데이터 형식 을 실현 합 니 다.

요 며칠 동안 easyui 를 만 지 작 거 리 는 tree 는 너무 상처 가 나 지 않 습 니 다. 그 형식 데이터 가 많 으 면 바로 취 했 습 니 다. 그래서 인터넷 의 예 를 참고 하여 그의 loadFilter 를 다시 썼 습 니 다.
그렇게 많은 것 은 말 하지 않 고, 몇 단계 에 해결 하면 바로 코드 를 올 린 다.
첫 번 째: easyui tree 의 loadFilter 재 작성
4. 567913. 무슨 뜻 인지 신경 쓰 지 않 고 copy 하면 됩 니 다.
두 번 째: tree 를 초기 화 할 때 몇 개의 속성 을 추가 합 니 다.
$.fn.tree.defaults.loadFilter = function (data, parent) {
		    var opt = $(this).data().tree.options;
		    var idFiled,textFiled,parentField;
		    if (opt.parentField) {
		        idFiled = opt.idFiled || 'id';
		        textFiled = opt.textFiled || 'text';
		        parentField = opt.parentField;
		        var i,l,treeData = [],tmpMap = [];
		        for (i = 0, l = data.length; i < l; i++) {
		            tmpMap[data[i][idFiled]] = data[i];
		        }
		        for (i = 0, l = data.length; i < l; i++) {
		            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
		                if (!tmpMap[data[i][parentField]]['children'])
		                    tmpMap[data[i][parentField]]['children'] = [];
		                data[i]['text'] = data[i][textFiled];
		                tmpMap[data[i][parentField]]['children'].push(data[i]);
		            } else {
		                data[i]['text'] = data[i][textFiled];
		                treeData.push(data[i]);
		            }
		        }
		        return treeData;
		    }
		    return data;
		};

ps:
$('#tree').tree({    
		    url:'system/user/getMenu',
		    parentField:"pid",
			textFiled:"text",
			idFiled:"id",
			onClick : function(node) {
				if($(this).tree('isLeaf',node.target)){
					addTab(node.text, node.url);
				}else{
					$(this).tree('toggle',node.target);
				}
			}
		}); 
textFiled:           
<pre name="code" class="javascript">parentField:      

이런 것들 은 주로 자신 이 나중에 사용 할 것 을 기록 하고 다른 사람 이 효율 을 높이 는 데 도움 이 되 기 를 바란다.

좋은 웹페이지 즐겨찾기