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数据表格示例



姓名 年龄 性别 地址


/

  • Html+CSS绘制三角形图标

    下面我会详细讲解如何使用HTML和CSS绘制三角形图标的完整攻略。 1. 使用CSS border属性 CSS的border属性可以用来绘制三角形。具体操作如下： .triangle { width: 0; height: 0; border: 20px solid transparent; border-top-color: red; border-bot…

    css 2023年6月9日
    00

  • 基于javascript实现按圆形排列DIV元素(三)

    让我来详细讲解一下“基于javascript实现按圆形排列DIV元素(三)”。 首先，我们需要了解之前两篇文章的内容，包括如何创建圆形布局和如何实现根据半径和角度计算坐标。如果你还不了解这些内容，可以先去学习一下前两篇文章。 接下来，我们需要先创建一个包含要排列的div元素的父容器。在这个父容器中，我们设置一个中心点，作为圆心。 <div id=&qu…

    css 2023年6月10日
    00

  • 详解CSS的border边框属性及其在CSS3中的新特性

    CSS的border边框属性作为CSS中最常用的属性之一，可以为页面的各种元素添加边框，让页面更加美观可读性更强。在CSS3中，border属性迎来了新的特性，包括了更多的边框样式和形态。在这篇文章中，我们将详解border边框属性及其在CSS3中的新特性。 一、border边框属性介绍 border是CSS中常用的边框属性，常用的属性值包括border-s…

    css 2023年6月10日
    00

  • Dreamweaver代码区怎么输入标题1?

    在 Dreamweaver 中，可以使用快捷键或者菜单栏来输入标题1。具体步骤如下： 使用快捷键：在代码区中输入“h1”，然后按下 Tab 键，Dreamweaver 会自动补全为标题1的标签。 使用菜单栏：在菜单栏中选择“插入” -> “HTML” -> “标题1”，Dreamweaver 会自动在代码区中插入标题1的标签。 下面是两个示例说明…

    css 2023年5月18日
    00

  • 使用CSS混合模式和SVG来动态更改产品图片的颜色

    使用CSS混合模式和SVG来动态更改产品图片的颜色是一种常见且流行的技巧，它可以帮助网站设计师轻松地更改UI设计的元素颜色，从而创建出独特、精美的产品图片。下面是这种技巧的完整攻略。 步骤一：创建产品图片 首先，需要创建一个可编辑的产品图片。可以使用软件如Adobe Photoshop、Adobe Illustrator或Sketch等工具来完成这个步骤。例…

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