高度可定制JavaScript数据网格，无需第三方依

高度可定制JavaScript数据网格，无需第三方依赖，兼容主流JS框架

日推荐的GitHub项目是AG Grid，它是一个功能齐全且高度可定制的JavaScript数据网格。AG Grid提供了出色的性能，不需要第三方依赖，并且可以与所有主要的JavaScript框架流畅地集成。

该项目已经收获了8.6k的Star。

项目地址：https://github.com/ag-grid/ag-grid#readme

下图为启用多个过滤器和分组情况下的网格外观。

特性功能

AG Grid可以提供任何网格都具备的标准功能，如下所示。

列交互（调整大小、重新排序和固定列）
分页
排序
行选择

除此之外，AG Grid还能提供一些特有功能，如下所示。

分组/整合
可访问性支持
自定义过滤
In-place单元格编辑
记录延迟加载
服务器端记录操作
直播流媒体更新
分层数据支持和树视图
可定制外观
可定制单元格内容
状态持续性
键盘导航
数据导出到CSV
数据导出到Excel
类Excel旋转
行重新排序
复制粘贴
列跨越
固定行
全宽行
集成图表
迷你图

开始上手

安装依赖

$ npm install --save ag-grid-community

添加一个占位符到HTML

<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>

导入网格和风格

import { Grid } from 'ag-grid-community';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

设置配置

var gridOptions={
	columnDefs: [
		{ headerName: 'Make', field: 'make' },
		{ headerName: 'Model', field: 'model' },
		{ headerName: 'Price', field: 'price' }
	],
	rowData: [
		{ make: 'Toyota', model: 'Celica', price: 35000 },
		{ make: 'Ford', model: 'Mondeo', price: 32000 },
		{ make: 'Porsche', model: 'Boxster', price: 72000 }
	]
};

初始化网格

var eGridDiv=document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

更多细节请参照原项目。

装对象

我们知道，基本类型值不是对象，因而从逻辑上讲它们不应该有方法。但是为了便于操作基本类型值，JavaScript提供了3个特殊的引用类型：Boolean、Number和String。说其特殊，是因为每当读取一个基本类型值的时候，后台就会创建一个对应的包装对象，从而让我们能够调用一些方法来操作这些数据。

例子：

console.log("love".slice(1));
//输出：ove

对象与包装对象的主要区别就是生存期。后台自动创建的包装对象，只存在于一行代码的执行瞬间，然后立即被销毁。因此我们不能为包装对象添加属性和方法。

例子：

var str="love";
str.name="me";
console.log(str.name);
//输出：undefined

*我们也可以显式地调用 String 构造函数来创建字符串对象（Boolean 和Number 也可以），但基本用不到。

例子：

var str=new String("love");
console.log(str);
//输出：love

字符串的属性

length 属性

字符串的每个实例都有一个length属性，表示字符串中包含多少个字符。

例子：

console.log("love".length); //输出：4
console.log("妈妈".length); //输出：2
console.log("m e".length); //输出：3

字符串的方法

访问单个字符的方法

charAt()和charCodeAt() 方法

charAt()方法接受一个参数，即基于0的字符位置，返回给定位置的那个字符。charCodeAt() 方法返回字符编码。

例子：

console.log("love".charAt(1));
//输出：o

访问个别字符更为常用的是使用方括号加数字索引的方式。

例子：

console.log("love" [1]);
//输出：o

取得字符位置的方法

indexOf()和lastIndexOf() 方法

这两个方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置（如果没有找到该子字符串，则返回-1）。这两个方法的区别在于：indexOf()方法从字符串的开头向后搜索子字符串，而lastInddexOf()方法是从字符串的末尾向前搜索子字符串。这两个方法都可以接收可选的第二个参数，表示从字符串中的哪个位置开始搜索。

例子：

console.log("love".indexOf("o")); //输出：1
console.log("love".indexOf("a")); //输出：-1
console.log("love".indexOf("o", 2)); //输出：-1

includes() 方法

这个方法接受两个参数，第一个参数指定要搜索的文本；第二个参数指定开始搜索的位置的索引值。如果在字符串中检测到指定的文本则返回true。

例子：

console.log("love me".includes("me")); //输出：true
console.log("love me".includes(" ")); //输出：true
console.log("love me".includes("o", 2)); //输出：false

startsWith()和 endsWith() 方法

这两个方法都接受两个参数，一个参数指定要搜索的文本；第二个参数指定开始搜索的位置的索引值。其中，startsWith() 方法会从字符串起始位置开始匹配，如果检测到指定文本则返回true。endsWith() 方法从字符串末尾位置开始匹配，如果检测到指定文本则返回true。如果指定了第二个参数，则startsWith() 方法会从这个索引值的位置开始匹配。endsWith() 方法从字符串长度减去这个索引值的位置开始匹配。

例子：

console.log("love me!".startsWith("love")); //输出：true
console.log("love me!".endsWith("!")); //输出：true
console.log("love me!".startsWith("o", 2)); //输出：false
console.log("love me!".endsWith("o", 2)); //输出：true

复制子字符并创建新字符串的方法

concat() 方法

concat() 方法用于将一个或多个字符串拼接起来，返回拼接得到的新字符串。

例子：

console.log("love ".concat("me", "!"));
//输出：love me!

拼接字符串使用更多的是加号操作符（+）。

例子：

console.log("love " + "me" + "!");
//输出：love me!

substring() 方法

这个方法会返回被操作字符串的一个子字符串，接受的两个参数分别指定子字符串的开始位置和结束位置（不包括结束位置的字符）。如果没有传递第二个参数，则将字符串的长度作为结束位置。当传入的参数是负值时，substring()方法会把所有负值参数都转换为0。

例子：

console.log("love me".substring(0)); //输出：love me
console.log("love me".substring(0, 4)); //输出：love
console.log("love me".substring(-1)); //输出：love me

substr() 方法

这个方法会返回被操作字符串的一个子字符串，接受的两个参数分别指定子字符串的开始位置和返回的字符个数。如果没有传递第二个参数，则将字符串的长度作为结束位置。当传入的参数是负值时，substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。

例子：

console.log("love me".substr(0)); //输出：love me
console.log("love me".substr(0, 1)); //输出：l
console.log("love me".substr(-1)); //输出：e

slice() 方法

这个方法会返回被操作字符串的一个子字符串，接受的两个参数分别指定子字符串的开始位置和结束位置（不包括结束位置的字符）。如果没有传递第二个参数，则将字符串的长度作为结束位置。当传入的参数是负值时，slice()方法会将传入的负值与字符串的长度相加。

例子：

console.log("love me".slice(0)); //输出：love me
console.log("love me".slice(0, 4)); //输出：love
console.log("love me".slice(-2)); //输出：me

repeat() 方法

这个方法接受一个number类型的参数，表示该字符串的重复次数，返回当前字符串重复一定次数后的新字符串。

例子：

console.log("0".repeat(2).concat("7"));
//输出：007

操作字符串前后内容的方法

trim()方法

这个方法删除字符串前后的所有空格，返回没有前后空格的新字符串。

例子：

console.log(" love ".trim());
//输出：love

padStart()和padEnd() 方法

这两个方法用于字符串的补全功能，一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。如果省略第二个参数，默认使用空格补全长度。其中，padStart()用于头部补全，padEnd()用于尾部补全。返回补全之后的新字符串。

例子：

console.log("7".padStart(3, "0")); //输出：007
console.log("7".padEnd(3, "0")); //输出：700

字符串大小写转换方法

toLowerCase()和toUpperCase() 方法

例子：

console.log("LOVE".toLowerCase()); //输出:love
console.log("love".toUpperCase()); //输出:LOVE

字符串转为数组的方法

split() 方法

这个方法用于把一个字符串分割成数组并返回该数组，接受两个参数，第一个参数可以是字符串或正则表达式，表示从该参数指定的地方分割；第二个参数用于指定数组的最大长度。

例子：

console.log("love".split()); //输出:["love"]
console.log("love".split("")); //输出:["l", "o", "v", "e"]
console.log("lo,ve".split(",")); //输出:["lo", "ve"]
console.log("l,o,v,e".split(",", 2)); //输出:["l", "o"]

字符串用于正则匹配的方法

match() 方法

这个方法只接受一个正则表达式作为参数，可在字符串内检索匹配的文本并返回一个数组。这个方法的行为在很大程度上依赖于正则表达式是否具有标志 g。如果正则表达式没有标志 g，那么 match() 方法就只会在字符串中执行一次匹配。

例子：

var str="A;B;C;"
var m=str.match(/.;/g);
console.log(m);
//输出:["A;", "B;", "C;"]

replace() 方法

这个方法用于在字符串中用一些字符替换另一些字符。接受两个参数：第一个参数可以是一个正则表达式或者一个字符串，表示检索文本，第二个参数可以是一个字符串或者一个函数，表示替换文本。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的办法就是提供一个正则表达式，而且要指定全局（g）。该方法返回替换后新创建的字符串。

例子：

var str="a_1;a_1;a_1";
var new_str_1=str.replace(1, 2);
var new_str_2=str.replace(/1/g, 2);
console.log(new_str_1); //输出：a_2;a_1;a_1
console.log(new_str_2); //输出：a_2;a_2;a_2

ES6的模板字符串

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

基本用法

1、用反引号替换单、双引号。

例子：

let str=`love`;
console.log(str);
//输出：love

在模板字符串中不需要转义单、双引号。但如果想在字符串中使用反引号，则要用反斜杠（\）进行转义。

例子：

let str1=`I am a "fool"`;
let str2=`I am a \`fool\``;
console.log(str1); //输出：I am a "fool"
console.log(str2); //输出：I am a `fool`

2、ES6之前，创建多行字符串我们通常会在字符串中手动加入换行符（\n）：

例子：

var str=["A", "B", "C"].join("\n");
console.log(str);
//输出：A B C (多行显示)

但在ES6的模板字符串中，如果需要在字符串中添加新的一行，只需在代码中直接换行：

例子：

let str=`A
B
C`;
console.log(str);
//输出： A B C (多行显示)

*在反引号中的所有空白符都属于字符串的一部分，所以要小心缩进。

3、在模板字符串中，可以把任何合法的JavaScript 表达式嵌入到 ${} 占位符之中。

例子：

变量和表达式

let n1=1,
 n2=2;
let str=`${n1}+${n2}=${n1+n2}`;
console.log(str);
//输出：1+2=3

函数

let fn=()=> "love";
let str=`${fn()} me`;
console.log(str);
//输出：love me

模板字符串本身也是JavaScript 表达式，因此也可以在模板字符串里面嵌入另一个。

例子：

let name="Tom";
let str=`hello,${`my name is ${name}.`}`;
console.log(str);
//输出：hello,my name is Tom.

Boolean、Number

包装对象的两外两个：Boolean和 Number ，由于实际应用比较少，所以在此不再叙述

https://zhuanlan.zhihu.com/p/53949660

作者：为爱心太软

来源：慕课网

ransform变形

transform在字面上就是变形、改变之意。

CSS3的transform主要包括rotate(旋转)、skew(扭曲)、scale(缩放)和translate(移动)以及matrix(矩形变形)。

rotate使用格式:(取值范围0-360, 单位deg)

rotate(10deg)

rotate(360deg)

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg

【实例】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片转换演示</title>
<style type="text/css">
img{
    width:460px;
    height:480px;
    border-radius:50%;
    transition:1s;
}
/*
过渡到···deg,而不是过渡···deg
*/
img:hover{
    /*transform: rotate(45deg);*/
    transform: rotateX(45deg);/*沿着x轴旋转*/
    transform: rotateY(45deg);/*沿着y轴旋转*/
    transform: rotateZ(45deg);/*沿着z轴旋转*/

    /*正数顺时针*/
    transform: rotate(45deg);/*z轴*/
    /*负数逆时针*/
    transform: rotate(-45deg);/*z轴*/

}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>

transform-origin: 设置旋转元素的基点位置

实例2: 旋转基点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    width: 300px;
    height: 220px;
    display: block;
    margin: 100px auto;

    transition: 1s linear;

    /*我们的旋转基点默认是中心*/
    /*规定旋转基点的
    * ①方位名词left top bottom right center
    * ②px(注意坐标原点为左上角)
    * ③%(参考的是宽高)*/
    transform-origin: center center;
    transform-origin: right top;
    transform-origin: -300px 110px;
    transform-origin: 150px 110px;
    transform-origin: 50% 50%;
    transform-origin: 100% 100%;

}
body:hover>img{
    transform: rotateX(45deg);/*沿着x轴旋转*/
    transform: rotateY(45deg);/*沿着y轴旋转*/
    transform: rotateZ(45deg);/*沿着z轴旋转*/
    transform: rotate(360deg);/*z轴*/
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

skew使用格式:(取值范围0-180, 单位deg)

skew(10deg,10deg)

skew(180deg,180deg)

实例: 斜切

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}

img:hover{
    transform: skewX(45deg);
    transform: skewX(-45deg);
    transform: skewY(45deg);
    transform: skewY(-45deg);

    /*skew(x轴斜切角度,y轴斜切角度)*/

    /*skew(x,y)同步动画*/
    /*transform: skew(45deg,45deg);*/


    /*现在x斜切基础之上再进行y斜切*/
    transform: skewX(45deg) skewY(45deg);
    transform: skewY(45deg) skewX(45deg);

}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

scale使用格式：

scale(0.2)

scale(2)

scale(2,3)

scale(0.5,2)

实例: 缩放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}
img:hover{
    transform: scale(1);/*本身*/
    transform: scale(2);/*扩大*/
    transform: scale(0.5);/*扩大*/
    transform: scale(-1);/*倒立*/
    transform: scale(-2);/*倒立放大2倍*/
    transform: scale(-0.5);/*倒立缩小1半*/
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

translate使用格式：

translate(10px)

translate(20px,20px)

translate(-25px,-25px)

实例: 平移

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
img{
    width: 400px;
    display: block;
    margin: 100px auto;
    transition: 1s;
}

img:hover{
    transform: translateX(100px);
    transform: translateX(-100px);
    transform: translateY(100px);
    transform: translateY(-100px);
    transform: translate(100px,100px);


    /*%参考的是各自的宽和高*/
    transform: translateX(100%);
    transform: translateY(100%);
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

综合使用: 旋转、斜切、缩放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    margin: 100px auto;
    background-color: orange;

    transition: 1s;
}
div:hover{
    /*transform: rotate(360deg);
    transform: skew(45deg);*/

    /*综合使用*/
    transform: rotate(360deg) skew(45deg) scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3新增特性都不会对盒子模型产生影响, 盒子模型大概永远是由width/height+padding+border+marign组成

在线咨询

上一篇：JS实现的tab切换并显示相应内容模块功能示例
下一篇：如何用Vue3和p5.js绘制一个交互式波浪图

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

高度可定制JavaScript数据网格，无需第三方依

您的项目需求