EasyUI 의 TreeGrid 필터 기능 의 해결 방향

맨 앞 에 써 주세요.
이번 주 내 내 easyui 의 treegrid 필터 기능 을 고민 하고 있 습 니 다.그 이 유 는 당연히 프로젝트 의 기묘 한 수요 이기 때 문 입 니 다.
easyui 는 백 엔 드 프로그래머 의 전단 구조 라 고 하지만 솔직히 api 를 제외 하고 저 에 게 안에 있 는 노드 정 보 를 직접 쓰 라 고 하면 손 을 쓸 수가 없습니다.여기 서 먼저 전단 의 친구 들 에 게 경 배 를 드 립 니 다.
수 요 를 말씀 드 리 겠 습 니 다.최근 한 프로젝트 에서 인터페이스 가 사용 하 는 easyui 의 treegrid 전시 가 있 습 니 다.처음에는 문제 가 없 었 지만 데이터 가 져 오 면서 실제 작업 에 불편 함 을 발 견 했 습 니 다.그 이 유 는 개발 할 때 treegrid 가 페이지 를 나 누 어 처리 하지 않 았 기 때 문 입 니 다.현재 테스트 환경 데이터 가 456 개 에 달 했 습 니 다.그 중에서 하 나 를 찾 아 처리 하려 면 시간 이 걸 릴 수 밖 에 없습니다.그래서 필터 검색 기능 을 개발 하 겠 다 는 생각 이 들 었 다.
처음에는 api 를 간단하게 호출 하 는 것 같 았 습 니 다.datagrid 에 datagrid-filter.js 공식 확장 이 있 었 던 것 으로 기억 되 지만 api 매 뉴 얼 을 찾 아 보 았 지만 treegrid 에 이미 만들어 진 방법 이 있 는 지 발견 하지 못 했 습 니 다.두 개의 속성 만 찾 았 습 니 다.loader 와 loadfilter 는 무슨 관계 가 있 는 것 같 습 니 다.
그 동안 저도 인터넷 의 해결 방법 을 봤 는데 너무 간단 한 지 모 르 겠 습 니 다.인터넷 에서 TreeGrid 여과 에 관 한 자원 이 매우 적 습 니 다.보 문 리 도 큰 소 에 게 무시 당 했다.

해결 방향
여기 정원 에서 본 글 을 열거 하 였 으 나,다른 것 도 이와 유사 한 내용 을 찾 지 못 했다.
루트 노드 와 구체 적 인 하위 노드 의 정 보 를 조회 할 수 있 습 니 다.EasyUI 의 TreeGrid 의 loadData 로 url 을 불 러 오 는 방식 으로 조회 기능 을 실현 할 수 없습니다.그래서 비동기 AJAX 를 이용 하여 데 이 터 를 조회 한 후에 변 수 를 할당 한 다음 에 TreeGrid 의 loadData 로 이 json 형식의 반환 결 과 를 불 러 와 TreeGrid 에 대한 조회 기능 을 실 현 했 습 니 다.코드 는 다음 과 같 습 니 다.출처:https://www.jb51.net/article/120646.htm

function searchROM() {
 var product = $('#Product').combobox('getValue');
 var keytype = $('#keytype').combobox('getValue');
 var keywords = $('#keywords').val();
 var url = encodeURI('/GoodsROM/ROMList?product=' + product + '&keytype=' + keytype + '&keywords=' + keywords+'&'+Math.random());
 $.post(url, {}, function(data) {
  var d = data;//  json    
  $('#grid').treegrid('loadData',d);//      treegrid
 }, 'json');
 }

생각 은 좋 지만 어 쩌 겠 습 니까?우리 백 엔 드 의 코드 는 Genel 에 봉 인 된 것 입 니 다.백 엔 드 코드 를 바 꾸 는 데 많은 영향 을 주 었 습 니 다.그래서 api 를 생각 하고 처음에 loader 와 loadFilter 를 시도 해 보 세 요.

 loadFilter:function(data){ 
  var newData = new Array();
  var filter = $("#filter").val();
  for(var i=0; i<data.length; i++){ 
  if(data[i].nodeName.indexOf(filter)>0){ 
   //        
   newData.push(data[i]); 
  }
  }
  if(newData.length==0){
  return data; 
  }else{
  return newData; 
  }
 },

나 는 조회 한 결과 에 필 터 를 하고 처리 한 결 과 를 되 돌려 로드 방법 으로 다시 불 러 옵 니 다.
효 과 는 기대 하지 않 습 니 다.조회 기능 은 실현 되 었 습 니 다.그러나 매번 조회 할 때마다 데이터 베 이 스 를 로드 해 야 하기 때 문 입 니 다.원래 페이지 가 초기 화 될 때 데이터 조회 시간 이 20s 에 달 했 습 니 다.한 번 에 20s 를 찾 아 20s 를 찾 아 보 았 습 니 다.누가 견 딜 수 있 는 지 알 아 보 았 습 니 다.결 과 는 당연히 지도자 에 게 무정 하 게 되 돌 아 왔 습 니 다.
 이 생각 에 따라 계속 찾 아 보 세 요.데이터 베 이 스 를 방문 하면 실현 할 수 있 습 니 다.그러면 저 는 페이지 를 초기 화 할 때 데 이 터 를 저장 하 는 것 이 아 닙 니까?그래서 저 는 이번에 loadfilter 에서 논리 적 인 검증 을 하지 않 았 습 니 다.data 값 을 꺼 낸 다음 에 논리 적 처 리 를 다른 함수 에 두 었 습 니 다.노력 은 마음 에 드 는 사람 을 저 버 리 지 않 고 효 과 는 결국 실현 되 었 습 니 다.초기 화 할 때 데이터 베 이 스 를 한 번 찾 을 뿐 다른 검색 은 load 데이터베이스 에 없습니다.아래 에 관련 코드 를 붙 여 여러분 께 참고 하 겠 습 니 다.더 좋 은 생각 을 가 진 학생 들 은 아 이 디 어 를 주 십시오.이것 은 먼저 감 사 드 립 니 다.

var allData = new Array();
function doOrgChartInit(idTreeGrid, idMenu, idUriQuery) {
 var bFound = true; 
 $('#' + idTreeGrid).treegrid({
 rownumbers:true,
 animate:true,
 collapsible:true,
 fitColumns:true,
 url:idUriQuery,
 idField:'nodeId',
 treeField:'nodeName',
 loadFilter:function(data){ 
  if (bFound&&data[0].nodeName!="Root") {
  allData = data;
  bFound = false;
  }
  return data;
 },
 columns:[
  [
  {halign:'center', align:'left',field:'nodeName', title:'  ', width:200},
  {halign:'center', align:'left',field:'description', title:'  ', width:100, align:'center'}
  ]
 ],
 // -----------------------------------------------------------------------------------    
 toolbar:[
  {
//    
  iconCls:'icon-reload',
  handler:function () {
   doTreeGridRefresh(idTreeGrid);
  }
  },
  '-',
  {
//        
  iconCls:'icon-redo',
  handler:function () {
   doTreeGridExpand(idTreeGrid);
  }
  },
  '-',
  {
//        
  iconCls:'icon-undo',
  handler:function () {
   doTreeGridCollapse(idTreeGrid);
  }
  },
  '-',
  {
//     
  text: '<input id="filter" type="text" />',
  },
  {
//    
  iconCls:'icon-search',
  handler:function () {
   doFilter(idTreeGrid);
  }
  }
 ],
 // -----------------------------------------------------------------------------------     
 onContextMenu:function (e, row) {
  e.preventDefault();
  $(this).treegrid('select', row.nodeId);
//  alert(row.orgChartPk);
  vOrgChartPk = row.orgChartPk;
  $('#' + idMenu).menu('show', {
  left:e.pageX,
  top:e.pageY
  });
 }
 });
}
function doFilter(idTreeGrid) {
 var newData = new Array();
 var filter = $("#filter").val();
 if (allData.length==0) {
 alert("    Root     ");
 return false;
 }
 for(var i=0; i<allData.length; i++){ 
 if(allData[i].nodeName.indexOf(filter)>0){ 
  //        
  newData.push(allData[i]); 
 }
 }
 if (filter=="") {
 $('#' + idTreeGrid).treegrid('loadData',allData);
 }else{
 $('#' + idTreeGrid).treegrid('loadData',newData);
 }
}

총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 EasyUI 의 TreeGrid 필터 기능 의 해결 방향 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!