JavaScript 프레임워크(xmlplus) 구성 요소 소개(10) 그리드(DataGrid)

xmlplus는 프론트엔드 및 백엔드 프로젝트의 신속한 개발을 위한 JavaScript프레임워크입니다. 이번 글에서는 xmlplus 컴포넌트 디자인 시리즈 중 xmlplus 그리드를 주로 소개했는데, 관심 있는 친구들은

을 참고하세요. 이번 장에서는 그리드 컴포넌트 외에 이 컴포넌트도 구현해보겠습니다. 가장 기본적인 데이터 표시 기능 외에 정렬, 데이터 필터링 기능도 제공합니다.

데이터 소스

그리드 컴포넌트를 작성하려고 하는지 테스트하기 위해 데이터를 사용합니다. 다음 형식의 소스를 사용하세요. 이 데이터 소스에는 헤더 데이터 세트 와 테이블 본문 데이터 세트라는 두 부분이 포함되어 있습니다. 그리드 구성 요소 인스턴스의 최종 열 수는 헤더 데이터 세트의 길이에 따라 결정됩니다.

var data = {
 gridColumns: ['name', 'power'],
 gridData: [
 { name: 'Chuck Norris', power: Infinity },
 { name: 'Bruce Lee', power: 9000 },
 { name: 'Jackie Chan', power: 7000 },
 { name: 'Jet Li', power: 8000 }
 ]
};

최상위 디자인

시각적으로 그리드 구성요소를 자연스럽게 테이블 헤더와 테이블 본문으로 나눕니다. 이 그리드 구성 요소에는 세 가지 기능이 있으므로 세 가지 동적 인터페이스를 제공해야 합니다. 하지만 정렬 기능은 테이블 헤더를 클릭하여 수행되고 테이블 헤더는 그리드 구성요소의 일부이므로 이 기능이 내장되어야 한다는 점을 확인했습니다. 따라서 실제로 우리의 그리드 구성 요소는 두 개의 동적 인터페이스만 외부 세계에 노출합니다. 하나는 필터링용이고 다른 하나는 데이터 소스 수신용입니다. 따라서 우리는 다음과 같이 최상위 수준의 디자인을 얻을 수 있습니다.

DataGrid: {
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  </table>`,
 fun: function (sys, items, opts) {
 function setValue(data) {
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  // 过滤函数
 }
 return { val: setValue, filter: filter };
 }
}

디자인 테이블 헤더

테이블 헤더에는 행이 하나만 있으므로 tr 요소를 직접 제공할 수 있습니다. tr 요소의 하위 항목 수는 헤더 데이터 세트의 길이에 따라 달라지므로 동적으로 생성해야 합니다. 번째 요소에는 정렬 기능이 포함되어 있으므로 별도로 캡슐화해야 합니다. 아래는 우리가 준 헤더의 디자인입니다.

Thead: {
 xml: `<thead id=&#39;thead&#39;>
  <tr id=&#39;tr&#39;/>
  </thead>`,
 fun: function (sys, items, opts) {
 function setValue(value) {
  sys.tr.children().call("remove");
  data.forEach(item => sys.tr.append("Th").value().val(item));
 }
 return { val: setValue };
 }
}

헤더 데이터 항목 구성 요소는 텍스트 설정 인터페이스를 제공합니다. 구성 요소 자체는 정렬을 담당하지 않으며 자체 보기 상태 변경만 완료합니다. 정렬 명령을 디스패치하려면 두 가지 데이터가 필요합니다. 하나는 헤더 텍스트인 정렬 키워드이고, 다른 하나는 정렬 방향(오름차순 또는 내림차순)입니다.

Th: {
 css: "#active { color: #fff; } #active #arrow { opacity: 1; } #active #key { color: #fff; }\
  #arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66; }\
  #asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff;}\
  #dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; }",
 xml: "<th id=&#39;th&#39;>\
  <span id=&#39;key&#39;/><span id=&#39;arrow&#39;/>\
  </th>",
 fun: function (sys, items, opts) {
 var order = "#asc";
 this.watch("sort", function (e, key, order) {
  sys.key.text().toLowerCase() == key || sys.th.removeClass("#active");
 });
 this.on("click", function (e) {
  sys.th.addClass("#active");
  sys.arrow.removeClass(order);
  order = order == "#asc" ? "#dsc" : "#asc";
  sys.arrow.addClass(order).notify("sort", [sys.key.text().toLowerCase(), order]);
 });
 sys.arrow.addClass("#asc");
 return { val: sys.key.text };
 }
}

디자인 테이블 본문

테이블 본문은 여러 행을 가질 수 있지만 테이블 본문은 데이터 표시만 담당하므로 훨씬 간단합니다. 테이블 헤더보다 구현하십시오.

Tbody: {
 xml: `<tbody id=&#39;tbody&#39;/>`,
 fun: function (sys, items, opts) {
 function setValue(gridColumns, gridData) {
  sys.tbody.children().call("remove");
  gridData.forEach(data => 
  tr = sys.tbody.append("tr");
  gridColumns.forEach(key => tr.append("td").text(data[key]));
  ));
 }
 return { val: setValue };
 }
}

정렬 기능 추가

관리를 용이하게 하기 위해 정렬 기능을 정렬 인터페이스를 제공하고 메시지를 정렬합니다. 정렬 메시지를 수신하면 키워드와 정렬 방향을 기록하고 테이블 새로 고침 명령을 내린다.

Sort: {
 fun: function (sys, items, opts) {
 var sortKey, sortOrder;
 this.watch("sort", function (e, key, order) {
  sortKey = key, sortOrder = order;
  this.trigger("update");
 });
 return function (data) {
  return sortKey ? data.slice().sort(function (a, b) {
  a = a[sortKey], b = b[sortKey];
  return (a === b ? 0 : a > b ? 1 : -1) * (sortOrder == "#asc" ? 1 : -1);
  }) : data;
 };
 }
}

정렬 기능을 완전히 구현하려면 주로 위의 정렬 기능 구성 요소를 빌드하고 테이블 본문 새로 고침 명령을 수신하도록 DataGrid 구성 요소를 일부 수정하세요. 새로 고침 명령을 받으면 테이블 본문 데이터가 정렬되고 테이블 본문이 새로 고쳐집니다.

DataGrid: {
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  <Sort id=&#39;sort&#39;/>
  </table>`,
 fun: function (sys, items, opts) {
 var data = {gridColumns: [], gridData: []};
 function setValue(value) {
  data = value;
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  // 过滤函数
 }
 this.on("update", function() {
  items.tbody.val(items.sort(data.gridData));
 });
 return { val: setValue, filter: filter };
 }
}

필터링 기능 추가

정렬 기능을 추가하는 과정과 유사하게 필터링 인터페이스를 제공하는 별도의 구성 요소에 필터링 기능을 캡슐화합니다. 필터링된 메시지도 들어보세요. 메시지가 수신되면 필터 키워드가 기록되고 테이블 본문 새로 고침 명령이 전달됩니다.

Filter: {
 fun: function (sys, items, opts) {
 var filterKey = "";
 this.watch("filter", function (e, key) {
  filterKey = key.toLowerCase();
  this.trigger("update");
 });
 return function (data) {
  return data.filter(function (row) {
  return Object.keys(row).some(function (key) {
   return String(row[key]).toLowerCase().indexOf(filterKey) > -1;
  });
  });
 };
 }
}

또한, DataGrid 구성요소에 일부 수정이 필요합니다. 수정 내용은 위에서 언급한 정렬 기능 추가와 유사하지만 필터 인터페이스가 추가로 개선되고 메시지가 표시됩니다. 범위가 제한되어 있습니다. 아래는 최종 그리드 구성요소입니다.

DataGrid: {
 css: `#table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; }
  #table th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #table td { background-color: #f9f9f9; }
  #table th, #table td { min-width: 120px; padding: 10px 20px; }`,
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  <Sort id=&#39;sort&#39;/>
  <Filter id=&#39;filter&#39;/>
  </table>`,
 map: { msgscope: true },
 fun: function (sys, items, opts) {
 var data = {gridColumns: [], gridData: []};
 function setValue(value) {
  data = value;
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  sys.table.notify("filter", filterKey);
 }
 this.on("update", function() {
  items.tbody.val(items.filter(items.sort(data.gridData)));
 });
 return { val: setValue, filter: filter };
 }
}

매핑 항목에서 메시지 범위를 제한하는 옵션을 구성해야 한다는 점에 유의할 필요가 있습니다. 그렇지 않으면 애플리케이션에서 여러 그리드 구성 요소가 인스턴스화될 때 메시지가 서로 간섭하게 됩니다.

테스트

마지막으로 완성한 구성 요소를 테스트해 보겠습니다. 테스트의 주요 기능은 처음에 언급한 세 가지, 즉 데이터 표시, 정렬 및 필터.

Index: {
 css: "#index { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; }\
  #search { margin: 8px 0; }",
 xml: "<p id=&#39;index&#39;>\
  Search <input id=&#39;search&#39;/>\
  <Table id=&#39;table&#39;/>\
  </p>",
 fun: function (sys, items, opts) {
 items.table.val(data);
 sys.search.on("input", e => items.table.filter(sys.search.prop("value")));
 }
}

이 기사 시리즈는 xmlplus 프레임워크를 기반으로 합니다. xmlplus에 대해 잘 모르신다면 www.xmlplus.cn을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.

[관련 추천]

1. 무료 js 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

위 내용은 JavaScript 프레임워크(xmlplus) 구성 요소 소개(10) 그리드(DataGrid)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!