Introduction to the xmlplus component (10) grid (DataGrid)

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the xmlplus grid in the xmlplus component design series, which has some reference value. If you are interested, refer to xmlplus as a JavaScript framework for fast development of front-end and back-end projects. This article mainly introduces the xmlplus grid in the xmlplus component design series, which has some reference value. If you are interested, please refer to it.

In this chapter, we want to implement a grid component. In addition to the basic data display function, this component also provides sorting and data filtering functions.

Data Source

To test that we are about to compile the grid component, we use the data source in the following format. This data source contains two parts: the header dataset and the table body dataset. The final number of columns of the grid component instance is determined by the length of the header dataset.

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 } ]};

Top-level design

Visually, we naturally divide grid components into headers and table bodies. This grid component has three functions, so it should provide three dynamic interfaces. However, we note that the sorting function is performed by clicking the header, and the header is part of the grid component. Therefore, this function should be built-in. In fact, our grid component only exposes two dynamic interfaces: one for filtering and the other for receiving data sources. So we can get the following top-level design.

DataGrid: {xml :'
 
 ', Fun: function (sys, items, opts) {function setValue (data) {items. thead. val (data. gridColumns); items. tbody. val (data. gridColumns, data. gridData);} function filter (filterKey) {// filter function} return {val: setValue, filter: filter };}}

Design Header

The header has only one row, so you can directly provide it with a tr element. The number of sub-level th of the tr element depends on the length of the header dataset. Therefore, you need to create it dynamically. The th element contains the sorting function, so it needs to be encapsulated separately. The following is the design of the table header.

Thead: { xml: `    `, 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 }; }}

The header data item component provides an interface for text setting. This component is not responsible for sorting. It only changes the view status and distributes the sorting commands. Distribution of sorting commands requires two data types: one is the sorting keyword, that is, the header text, and the other is the sorting direction, which is ascending or descending.

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: "\  \  ", 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 }; }}

Design table body

The table body can have multiple rows, but the table body is only responsible for displaying data. Therefore, it is much simpler to implement than the header.

Tbody: { xml: ``, 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 }; }}

Add sorting Function

To facilitate management, we encapsulate the sorting function into a single component, which provides a sorting interface and listens for a sorting message at the same time. Once a sorting message is received, the keyword and sorting direction are recorded, and a table body refresh command is sent.

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; }; }}

To fully implement the sorting function, make some modifications to the component DataGrid, mainly by built-in the sorting function component and listening to the table body refresh command. Once the refresh command is received, the table body data is sorted and refreshed.

DataGrid: {xml :'
   
 
 
 ', 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) {// filter function} this. on ("update", function () {items. tbody. val (items. sort (data. gridData) ;}); return {val: setValue, filter: filter };}}

Add filter function

Similar to the process of adding the sorting function, we encapsulate the filtering function into a single component, which provides a filter interface and listens for a filter message at the same time. Once a message is received, the system records the filter keyword and sends a table body refresh command.

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;  });  }); }; }}

In addition, the DataGrid component needs to be modified. The modified content is similar to the preceding sorting function. The difference is that the filter interface is supplemented and the message scope is limited. Below is our final grid component.

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: `
   
    
  
 
 
 `, 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 }; }}

It is worth noting that the option that limits the message scope must be configured in the ing item. Otherwise, messages interfere with each other when multiple grid components are instantiated in an application.

Test

Finally, let's test the components we have completed. The test function is mainly described in three aspects: data presentation, sorting, and filtering.

Index: {css: "# index {font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444 ;}\# search {margin: 8px 0;} ", xml :"
\ Search\
This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.
 
 
  
  
\", Fun: function (sys, items, opts) {items. table. val (data); sys. search. on ("input", e => items. table. filter (sys. search. prop ("value ")));}}