1. Python技术站首页
  2. css

原生javascript实现简单的datagrid数据表格

• css

请看下面的攻略：

一、什么是DataGrid数据表格

DataGrid数据表格是Web应用程序中常见的一种显示和编辑数据的方式。它通常由多个数据列和若干行组成，每一个单元格可以编辑文本、选项、日期等不同类型的数据。

二、实现DataGrid数据表格的基本思路

我们可以借助HTML的<table>标签来实现数据表格的显示和基本布局，然后用原生Javascript来实现数据的加载、筛选、排序和分页等功能。

1. 加载数据

我们可以通过Ajax从服务端获取数据，或者直接使用已有的静态数据，然后将数据填充到表格的每一行中。具体实现可以采用如下的步骤：

  • 创建一个<table>标签，定义好表格的样式和布局；
  • 创建一个空的<tbody>标签，用于后续动态添加行；
  • 使用Ajax或者其他方式获取数据；
  • 遍历数据数组，创建新的行和单元格，并填充数据；
  • 将新行添加到<tbody>标签中。

示例代码：

var data = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'}
];

var tbody = document.querySelector('#myTable tbody');
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + data[i].name + '</td>' +
                 '<td>' + data[i].age + '</td>' +
                 '<td>' + data[i].gender + '</td>' +
                 '<td>' + data[i].address + '</td>';
  tbody.appendChild(tr);
}

2. 筛选数据

我们可以通过用户输入关键字或者选择某一列排序方式来实现数据的筛选。具体实现可以采用如下的步骤：

  • 创建一个输入框或者下拉菜单，用于用户输入筛选条件；
  • 监听输入框或者下拉菜单的input或change事件，根据用户输入的条件动态过滤行；
  • 在过滤前需要保存原始数据，以便还原数据。

示例代码：

var originData = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'}
];

var data = originData;

var input = document.querySelector('#filterInput');
input.addEventListener('input', function() {
  var keyword = input.value.trim().toLowerCase();
  data = originData.filter(function(item) {
    return item.name.toLowerCase().indexOf(keyword) >= 0 ||
           item.address.toLowerCase().indexOf(keyword) >= 0;
  });
  renderTable();
});

function renderTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + data[i].name + '</td>' +
                   '<td>' + data[i].age + '</td>' +
                   '<td>' + data[i].gender + '</td>' +
                   '<td>' + data[i].address + '</td>';
    tbody.appendChild(tr);
  }
}

3. 排序数据

我们可以通过用户点击表格头部来实现数据的排序。具体实现可以采用如下的步骤：

  • 为每一列的表头添加一个点击事件监听器；
  • 监听器中根据当前列的数据值和排序方式（升序/降序）对表格行进行排序；
  • 排序前需要保存原始数据，以便还原数据。

示例代码：

var originData = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'}
];

var data = originData;
var sortBy = 'name'; // 默认按照姓名排序
var sortOrder = 'asc'; // 默认升序排列

var ths = document.querySelectorAll('#myTable th');
for (var i = 0; i < ths.length; i++) {
  ths[i].addEventListener('click', function() {
    var key = this.dataset.key;
    if (sortBy === key) {
      sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
    } else {
      sortBy = key;
      sortOrder = 'asc';
    }
    sortTable();
    renderTable();
  });
}

function sortTable() {
  var compare;
  if (sortOrder === 'asc') {
    compare = function(a, b) {
      if (typeof a[sortBy] === 'number' && typeof b[sortBy] === 'number') {
        return a[sortBy] - b[sortBy];
      } else {
        return a[sortBy].toString().localeCompare(b[sortBy].toString());
      }
    };
  } else {
    compare = function(a, b) {
      if (typeof a[sortBy] === 'number' && typeof b[sortBy] === 'number') {
        return b[sortBy] - a[sortBy];
      } else {
        return b[sortBy].toString().localeCompare(a[sortBy].toString());
      }
    };
  }
  data = data.sort(compare);
}

function renderTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + data[i].name + '</td>' +
                   '<td>' + data[i].age + '</td>' +
                   '<td>' + data[i].gender + '</td>' +
                   '<td>' + data[i].address + '</td>';
    tbody.appendChild(tr);
  }
}

4. 分页数据

如果数据量很大，我们可以通过分页来提高数据的显示效率和用户体验。具体实现可以采用如下的步骤：

  • 设置每页显示的数据条数和当前页码；
  • 根据当前页码和每页显示的数据条数计算出需要显示的数据范围；
  • 显示当前页的数据并更新页码和页码按钮状态。

示例代码：

var originData = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'},
  {name: '赵六', age: 33, gender: '男', address: '深圳'},
  {name: '钱七', age: 27, gender: '女', address: '西安'},
  {name: '孙九', age: 31, gender: '男', address: '武汉'},
  // ... 省略部分数据
  {name: '吴十', age: 26, gender: '女', address: '天津'}
];

var data = originData;
var perPage = 5; // 每页显示5条数据
var currentPage = 1; // 当前第1页

var inputPage = document.querySelector('#inputPage');
var btnPrev = document.querySelector('#btnPrev');
var btnNext = document.querySelector('#btnNext');

inputPage.addEventListener('input', function() {
  var num = parseInt(inputPage.value);
  if (num >= 1 && num <= getTotalPage()) {
    currentPage = num;
    renderTable();
  }
});

btnPrev.addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    renderTable();
  }
});

btnNext.addEventListener('click', function() {
  if (currentPage < getTotalPage()) {
    currentPage++;
    renderTable();
  }
});

function getTotalPage() {
  return Math.ceil(data.length / perPage);
}

function getPageData() {
  var start = (currentPage - 1) * perPage;
  var end = Math.min(start + perPage, data.length);
  return data.slice(start, end);
}

function renderTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  var pageData = getPageData();
  for (var i = 0; i < pageData.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + pageData[i].name + '</td>' +
                   '<td>' + pageData[i].age + '</td>' +
                   '<td>' + pageData[i].gender + '</td>' +
                   '<td>' + pageData[i].address + '</td>';
    tbody.appendChild(tr);
  }
  inputPage.value = currentPage;
  btnPrev.disabled = currentPage === 1;
  btnNext.disabled = currentPage === getTotalPage();
}

三、实现一个简单的DataGrid数据表格

综合以上思路，我们可以实现一个简单的DataGrid数据表格。具体代码见下：

```html





DataGrid数据表格示例



姓名 年龄 性别 地址


/

  • border-radius给元素添加圆角边框的方法

    当我们需要给元素添加圆角边框时，可以使用CSS属性border-radius来轻松实现。下面是关于如何使用border-radius属性来添加圆角边框的攻略： 一、使用border-radius属性添加圆角边框 1. 在CSS样式中设置border-radius属性 使用border-radius属性可以轻松设置元素的圆角边框，它接受一个或多个值，用空格分隔…

    css 2023年6月10日
    00

  • Canvas如何做个雪花屏版404的实现

    当用户访问网站中不存在的页面时，通常会显示一个404错误页面。为了增加页面的趣味性和互动性，我们可以在404页面中添加一些动态效果，比如利用Canvas制作一个雪花屏版的404页面。 以下是实现过程： 1. 创建HTML文件 首先需要创建一个HTML文件，并在文件中添加一个canvas元素和一个提示信息。如下所示： <!DOCTYPE html>…

    css 2023年6月10日
    00

  • IE6 float:left margin-left出现两倍像素

    首先，我们需要了解以下几点： 浮动元素具有块级盒子的特性，可以清除其前面的行内元素，但是它的外边距可能会和其他元素的外边距叠加。 IE6对浮动元素的解析方式与现代浏览器不同，可能会出现问题。 具体解决方案如下： 1.清除浮动，使用clear:both 在IE6浏览器中，float:left元素的左边距可能会变成两倍。这是由于浮动元素与其他元素的外边距叠加导致…

    css 2023年6月10日
    00

  • 四种CSS常用的选择器使用方法和注意事项

    当我们编写样式表时，我们需要选中一些HTML元素，并定义它们的样式。选择器是可以选择特定元素的CSS规则。在CSS中，有四种常用的选择器，分别是：1. ID选择器2. 类选择器3. 元素选择器4. 后代选择器 下面将详细讲解这四种选择器的使用方法和注意事项： 1. ID选择器 ID选择器可以用来为单个元素设置样式。我们可以通过HTML标签中的“id”属性来定…

    css 2023年6月9日
    00

  • CSS精灵图（图片合并）设置方法详解

    CSS精灵图（CSS Sprites）是一种将多个小图片合并成一张大图片，并用CSS来控制显示的技术。使用CSS精灵图可以减少网页的HTTP请求次数，提高网站的加载性能和用户体验。 下面详细讲解CSS精灵图的完整攻略。 准备小图片 首先，准备多个小图片，并将它们合并成一张大图片。可以使用PS等工具来完成这个过程，或者使用在线工具如CSS Sprite Gen…

    Web开发基础 2023年3月20日
    00

  • CSS 中的六个重要选择器(三秒就可以记住)

    下面是关于“CSS 中的六个重要选择器”的详细讲解攻略。 什么是 CSS 选择器？ 在 CSS（层叠样式表） 中，选择器用于定位要应用样式的 HTML 元素。选择器可以根据元素的标签名、class、id、属性等多种方式进行匹配。在 CSS 中，选择器非常重要，选择器的选择决定了应用到那些元素上的 CSS 样式。 CSS 中的六个重要选择器 在 CSS 中，有…

    css 2023年6月9日
    00
    • 合作推广
    合作推广
    分享本页
    返回顶部