高度可定制JavaScript數(shù)據(jù)網(wǎng)格，無需第三方依

高度可定制JavaScript數(shù)據(jù)網(wǎng)格，無需第三方依賴，兼容主流JS框架

日推薦的GitHub項目是AG Grid，它是一個功能齊全且高度可定制的JavaScript數(shù)據(jù)網(wǎng)格。AG Grid提供了出色的性能，不需要第三方依賴，并且可以與所有主要的JavaScript框架流暢地集成。

該項目已經(jīng)收獲了8.6k的Star。

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

下圖為啟用多個過濾器和分組情況下的網(wǎng)格外觀。

特性功能

AG Grid可以提供任何網(wǎng)格都具備的標準功能，如下所示。

列交互（調(diào)整大小、重新排序和固定列）
分頁
排序
行選擇

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

分組/整合
可訪問性支持
自定義過濾
In-place單元格編輯
記錄延遲加載
服務(wù)器端記錄操作
直播流媒體更新
分層數(shù)據(jù)支持和樹視圖
可定制外觀
可定制單元格內(nèi)容
狀態(tài)持續(xù)性
鍵盤導(dǎo)航
數(shù)據(jù)導(dǎo)出到CSV
數(shù)據(jù)導(dǎo)出到Excel
類Excel旋轉(zhuǎn)
行重新排序
復(fù)制粘貼
列跨越
固定行
全寬行
集成圖表
迷你圖

開始上手

安裝依賴

$ npm install --save ag-grid-community

添加一個占位符到HTML

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

導(dǎo)入網(wǎng)格和風格

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

設(shè)置配置

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

初始化網(wǎng)格

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

更多細節(jié)請參照原項目。

裝對象

我們知道，基本類型值不是對象，因而從邏輯上講它們不應(yīng)該有方法。但是為了便于操作基本類型值，JavaScript提供了3個特殊的引用類型：Boolean、Number和String。說其特殊，是因為每當讀取一個基本類型值的時候，后臺就會創(chuàng)建一個對應(yīng)的包裝對象，從而讓我們能夠調(diào)用一些方法來操作這些數(shù)據(jù)。

例子：

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

對象與包裝對象的主要區(qū)別就是生存期。后臺自動創(chuàng)建的包裝對象，只存在于一行代碼的執(zhí)行瞬間，然后立即被銷毀。因此我們不能為包裝對象添加屬性和方法。

例子：

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

*我們也可以顯式地調(diào)用 String 構(gòu)造函數(shù)來創(chuàng)建字符串對象（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()方法接受一個參數(shù)，即基于0的字符位置，返回給定位置的那個字符。charCodeAt() 方法返回字符編碼。

例子：

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

訪問個別字符更為常用的是使用方括號加數(shù)字索引的方式。

例子：

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

取得字符位置的方法

indexOf()和lastIndexOf() 方法

這兩個方法都是從一個字符串中搜索給定的子字符串，然后返回子字符串的位置（如果沒有找到該子字符串，則返回-1）。這兩個方法的區(qū)別在于：indexOf()方法從字符串的開頭向后搜索子字符串，而lastInddexOf()方法是從字符串的末尾向前搜索子字符串。這兩個方法都可以接收可選的第二個參數(shù)，表示從字符串中的哪個位置開始搜索。

例子：

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

includes() 方法

這個方法接受兩個參數(shù)，第一個參數(shù)指定要搜索的文本；第二個參數(shù)指定開始搜索的位置的索引值。如果在字符串中檢測到指定的文本則返回true。

例子：

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

startsWith()和 endsWith() 方法

這兩個方法都接受兩個參數(shù)，一個參數(shù)指定要搜索的文本；第二個參數(shù)指定開始搜索的位置的索引值。其中，startsWith() 方法會從字符串起始位置開始匹配，如果檢測到指定文本則返回true。endsWith() 方法從字符串末尾位置開始匹配，如果檢測到指定文本則返回true。如果指定了第二個參數(shù)，則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

復(fù)制子字符并創(chuàng)建新字符串的方法

concat() 方法

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

例子：

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

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

例子：

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

substring() 方法

這個方法會返回被操作字符串的一個子字符串，接受的兩個參數(shù)分別指定子字符串的開始位置和結(jié)束位置（不包括結(jié)束位置的字符）。如果沒有傳遞第二個參數(shù)，則將字符串的長度作為結(jié)束位置。當傳入的參數(shù)是負值時，substring()方法會把所有負值參數(shù)都轉(zhuǎn)換為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() 方法

這個方法會返回被操作字符串的一個子字符串，接受的兩個參數(shù)分別指定子字符串的開始位置和返回的字符個數(shù)。如果沒有傳遞第二個參數(shù)，則將字符串的長度作為結(jié)束位置。當傳入的參數(shù)是負值時，substr()方法將負的第一個參數(shù)加上字符串的長度，而將負的第二個參數(shù)轉(zhuǎn)換為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() 方法

這個方法會返回被操作字符串的一個子字符串，接受的兩個參數(shù)分別指定子字符串的開始位置和結(jié)束位置（不包括結(jié)束位置的字符）。如果沒有傳遞第二個參數(shù)，則將字符串的長度作為結(jié)束位置。當傳入的參數(shù)是負值時，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類型的參數(shù)，表示該字符串的重復(fù)次數(shù)，返回當前字符串重復(fù)一定次數(shù)后的新字符串。

例子：

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

操作字符串前后內(nèi)容的方法

trim()方法

這個方法刪除字符串前后的所有空格，返回沒有前后空格的新字符串。

例子：

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

padStart()和padEnd() 方法

這兩個方法用于字符串的補全功能，一共接受兩個參數(shù)，第一個參數(shù)是字符串補全生效的最大長度，第二個參數(shù)是用來補全的字符串。如果省略第二個參數(shù)，默認使用空格補全長度。其中，padStart()用于頭部補全，padEnd()用于尾部補全。返回補全之后的新字符串。

例子：

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

字符串大小寫轉(zhuǎn)換方法

toLowerCase()和toUpperCase() 方法

例子：

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

字符串轉(zhuǎn)為數(shù)組的方法

split() 方法

這個方法用于把一個字符串分割成數(shù)組并返回該數(shù)組，接受兩個參數(shù)，第一個參數(shù)可以是字符串或正則表達式，表示從該參數(shù)指定的地方分割；第二個參數(shù)用于指定數(shù)組的最大長度。

例子：

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() 方法

這個方法只接受一個正則表達式作為參數(shù)，可在字符串內(nèi)檢索匹配的文本并返回一個數(shù)組。這個方法的行為在很大程度上依賴于正則表達式是否具有標志 g。如果正則表達式?jīng)]有標志 g，那么 match() 方法就只會在字符串中執(zhí)行一次匹配。

例子：

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

replace() 方法

這個方法用于在字符串中用一些字符替換另一些字符。接受兩個參數(shù)：第一個參數(shù)可以是一個正則表達式或者一個字符串，表示檢索文本，第二個參數(shù)可以是一個字符串或者一個函數(shù)，表示替換文本。如果第一個參數(shù)是字符串，那么只會替換第一個子字符串。要想替換所有子字符串，唯一的辦法就是提供一個正則表達式，而且要指定全局（g）。該方法返回替換后新創(chuàng)建的字符串。

例子：

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

在模板字符串中不需要轉(zhuǎn)義單、雙引號。但如果想在字符串中使用反引號，則要用反斜杠（\）進行轉(zhuǎn)義。

例子：

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之前，創(chuàng)建多行字符串我們通常會在字符串中手動加入換行符（\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

函數(shù)

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 ，由于實際應(yīng)用比較少，所以在此不再敘述

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

作者：為愛心太軟

來源：慕課網(wǎng)

ransform變形

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

CSS3的transform主要包括rotate(旋轉(zhuǎn))、skew(扭曲)、scale(縮放)和translate(移動)以及matrix(矩形變形)。

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

rotate(10deg)

rotate(360deg)

rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。

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

【實例】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圖片轉(zhuǎn)換演示</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軸旋轉(zhuǎn)*/
    transform: rotateY(45deg);/*沿著y軸旋轉(zhuǎn)*/
    transform: rotateZ(45deg);/*沿著z軸旋轉(zhuǎn)*/

    /*正數(shù)順時針*/
    transform: rotate(45deg);/*z軸*/
    /*負數(shù)逆時針*/
    transform: rotate(-45deg);/*z軸*/

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

transform-origin: 設(shè)置旋轉(zhuǎn)元素的基點位置

實例2: 旋轉(zhuǎn)基點

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

    /*我們的旋轉(zhuǎn)基點默認是中心*/
    /*規(guī)定旋轉(zhuǎn)基點的
    * ①方位名詞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軸旋轉(zhuǎn)*/
    transform: rotateY(45deg);/*沿著y軸旋轉(zhuǎn)*/
    transform: rotateZ(45deg);/*沿著z軸旋轉(zhuǎn)*/
    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);*/


    /*現(xiàn)在x斜切基礎(chǔ)之上再進行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>

綜合使用: 旋轉(zhuǎn)、斜切、縮放

<!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新增特性都不會對盒子模型產(chǎn)生影響, 盒子模型大概永遠是由width/height+padding+border+marign組成

在線咨詢

上一篇：JS實現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能示例
下一篇：如何用Vue3和p5.js繪制一個交互式波浪圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

高度可定制JavaScript數(shù)據(jù)網(wǎng)格，無需第三方依

您的項目需求