js06金沙官网登录-js06.com-欢迎您

来自 计算机 2019-12-25 06:16 的文章
当前位置: js06金沙官网登录-js06.com-欢迎您 > 计算机 > 正文

xmlplus组件设计系列之网格(DataGrid)(10),xmlp

xmlplus组件设计体系之网格(DataGrid)(10),xmlplusdatagrid

那后生可畏章大家要得以达成是八个网格组件,该零零件除了最宗旨的多少显示效果外,还提供排序以至数据过滤效果。

图片 1

数据源

为了测验大家就要编写好网格组件,大家应用如下格式的数据源。此数据源富含两部分的开始和结果,分别是表头数据集和表体数据集。网格组件实例最后的列数由表头数据集的尺寸调整。

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='table'>
  <Thead id='thead'/>
  <Tbody id='tbody'/>
  </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 成分的子级项 th 的个数决定于表头数据集的尺寸,所以供给动态成立。由于 th 成分包蕴了排序功效,所以须求再行封装。上边是大家付出的表头的希图。

Thead: {
 xml: `<thead id='thead'>
  <tr id='tr'/>
  </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='th'>
  
  </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='tbody'/>`,
 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='table'>
  <Thead id='thead'/>
  <Tbody id='tbody'/>
  <Sort id='sort'/>
  </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 作一些改善,纠正内容与上述的排序功用的插足相同,分歧在于额外康健了 filter 接口以至对音信效能域实行了约束。下边是大家最终的网格组件。

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='table'>
  <Thead id='thead'/>
  <Tbody id='tbody'/>
  <Sort id='sort'/>
  <Filter id='filter'/>
  </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: "<div id='index'>
  Search <input id='search'/>
  <Table id='table'/>
  </div>",
 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。这里有详实的入门文书档案可供参谋。

上述正是本文的全部内容,希望对大家的读书抱有利于,也冀望大家多多支持帮客之家。

那风流浪漫章大家要贯彻是叁个网格组件,该构件除了最宗旨的数目显示效果外,还提供排...

本文由js06金沙官网登录-js06.com-欢迎您发布于计算机,转载请注明出处:xmlplus组件设计系列之网格(DataGrid)(10),xmlp

关键词: