一个出色的表格（React实现__ES5语法）
本文主要是《React快速上手开发》一书中，第三章的内容代码整理，因为书中的代码零零散散，所以自己将整理了一下。
排序和编辑功能
<script>
var header = ["Book", "Author", "Language", "Publishd", "Sales"];
var data = [
["The Lord of the Rings", "J. R. R.Tolkien", "English", "1954-1955", "150 million"],
["Le Ptit Prince", "Antonie de Saint-Exupery", "French", "1943", "140 million"],
["Harry Potter and the Philosopher", "J. K. Rowling", "English", "1997", "107 million"],
["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
["Dream of the red chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"],
["The Hobbit", "J. R. R Tolkien", "English", "1937", "100 million"],
["She A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"]
]; var Excel = React.createClass({
displayName :"Excel",
render :function() {
return (
React.DOM.table(null,
React.DOM.thead(
{onClick : this._sort},
React.DOM.tr(
null,
this.state.headers.map(function(title, id){
return React.DOM.th({key: id}, title);
})
)
),
React.DOM.tbody(
{onDoubleClick:this._showEditor},
this.state.data.map(function(row, rowIndex){
return (
React.DOM.tr(
{key:rowIndex},
row.map(function(field, cellIndex){
var content = field;
var edit = this.state.edit;
if (edit && edit.row==rowIndex && edit.cell==cellIndex) {
content = React.DOM.form(
{onSubmit: this._save},
React.DOM.input(
{type : "text", defaultValue : content}
)
);
}
return React.DOM.td(
{key:cellIndex, 'data-row':rowIndex},
content
);
}, this)
)
);
}, this)
)
)
)
}, //点击表头，根据当前列排序
_sort : function(ev){
var column = ev.target.cellIndex;
var data_bk = this.state.data.slice();
data_bk.sort(function(a, b){
return a[column] > b[column] ? 1 : -1;
});
this.setState({
data : data_bk
});
}, getInitialState :function (){
return {
headers : this.props.headers,
data : this.props.initialData,
descending : false,
edit : null
}
}, _showEditor : function(ev){
this.setState({
edit : {
row: parseInt(ev.target.dataset.row, 10),
cell : ev.target.cellIndex
}
});
}, _save : function(ev){
ev.preventDefault();
var input = ev.target.firstChild;
var data = this.state.data.slice();
data[this.state.edit.row][this.state.edit.cell] = input.value;
this.setState({
edit : null,
data : data
});
} }); ReactDOM.render(
React.createElement(Excel, {headers : header, initialData : data}),
document.getElementById("app")
);
</script>
搜索功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First Test React</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script>
var header = ["Book", "Author", "Language", "Publishd", "Sales"];
var data = [
["The Lord of the Rings", "J. R. R.Tolkien", "English", "1954-1955", "150 million"],
["Le Ptit Prince", "Antonie de Saint-Exupery", "French", "1943", "140 million"],
["Harry Potter and the Philosopher", "J. K. Rowling", "English", "1997", "107 million"],
["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
["Dream of the red chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"],
["The Hobbit", "J. R. R Tolkien", "English", "1937", "100 million"],
["She A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"]
]; var Excel = React.createClass({
displayName :"Excel",
_preSearchData : null, render :function() {
return (
React.DOM.div(
null,
this._renderToolbar(), //渲染表头和搜索框
this._renderTable() //渲染表格内容
)
)
}, //点击表头，根据当前列排序
_sort : function(ev){
var column = ev.target.cellIndex;
var data_bk = this.state.data.slice();
data_bk.sort(function(a, b){
return a[column] > b[column] ? 1 : -1;
});
this.setState({
data : data_bk
});
}, getInitialState :function (){
return {
headers : this.props.headers,
data : this.props.initialData,
descending : false,
edit : null,
search : false //初始默认关闭搜索功能
}
}, _showEditor : function(ev){
this.setState({
edit : {
row: parseInt(ev.target.dataset.row, 10),
cell : ev.target.cellIndex
}
});
}, _save : function(ev){
ev.preventDefault();
var input = ev.target.firstChild;
var data = this.state.data.slice();
data[this.state.edit.row][this.state.edit.cell] = input.value;
this.setState({
edit : null,
data : data
});
}, _renderToolbar : function() {
return React.DOM.button(
{
onClick : this._toggleSearch, //开启或者关闭搜索功能
className : "toolbar"
},
"search"
);
}, _renderTable : function() {
return (
React.DOM.table(null,
React.DOM.thead(
{onClick : this._sort},
React.DOM.tr(
null,
this.state.headers.map(function(title, id){
return React.DOM.th({key: id}, title);
})
)
),
React.DOM.tbody(
{onDoubleClick:this._showEditor},
this._renderSearch(),
this.state.data.map(function(row, rowIndex){
return (
React.DOM.tr(
{key:rowIndex},
row.map(function(field, cellIndex){
var content = field;
var edit = this.state.edit;
if (edit && edit.row==rowIndex && edit.cell==cellIndex) {
content = React.DOM.form(
{onSubmit: this._save},
React.DOM.input(
{type : "text", defaultValue : content}
)
);
}
return React.DOM.td(
{key:cellIndex, 'data-row':rowIndex},
content
);
}, this)
)
);
}, this)
)
)
)
}, _renderSearch : function() {
if (!this.state.search) {
return null;
}
return (
React.DOM.tr(
{onChange : this._search},
this.props.headers.map(function(_ignore, idx){
return React.DOM.td(
{key : idx},
React.DOM.input(
{type : "text", "data-idx": idx}
)
)
})
)
);
}, //调整搜索功能，如果是开启状态，则关闭它；否则打开搜索功能，通过设置state中的search
_toggleSearch : function() {
if (this.state.search) {
this.setState({
data : this._preSearchData,
search : false
});
this._preSearchData = null;
} else {
this._preSearchData = this.state.data; //开启搜索时，将data先存入_preSearchData
this.setState({
search : true
})
}
}, _search : function (ev) {
var needle = ev.target.value.toLowerCase();
if (!needle) { //搜索的字符串为空时，恢复原数据
this.setState({data : this._preSearchData});
return;
} var idx = ev.target.dataset.idx; //进行搜索的那一列
var searchData = this._preSearchData.filter(function(row){
return row[idx].toString().toLowerCase().indexOf(needle) > -1;
});
this.setState({
data : searchData
})
} }); ReactDOM.render(
React.createElement(Excel, {headers : header, initialData : data}),
document.getElementById("app")
);
</script>
</html>
回放功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First Test React</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script>
var header = ["Book", "Author", "Language", "Publishd", "Sales"];
var data = [
["The Lord of the Rings", "J. R. R.Tolkien", "English", "1954-1955", "150 million"],
["Le Ptit Prince", "Antonie de Saint-Exupery", "French", "1943", "140 million"],
["Harry Potter and the Philosopher", "J. K. Rowling", "English", "1997", "107 million"],
["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
["Dream of the red chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"],
["The Hobbit", "J. R. R Tolkien", "English", "1937", "100 million"],
["She A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"]
]; var Excel = React.createClass({
displayName :"Excel",
_preSearchData : null,
_log : [], render :function() {
return (
React.DOM.div(
null,
this._renderToolbar(), //渲染表头和搜索框
this._renderTable() //渲染表格内容
)
)
}, //点击表头，根据当前列排序
_sort : function(ev){
var column = ev.target.cellIndex;
var data_bk = this.state.data.slice();
data_bk.sort(function(a, b){
return a[column] > b[column] ? 1 : -1;
});
this.setState({
data : data_bk
});
}, getInitialState :function (){
return {
headers : this.props.headers,
data : this.props.initialData,
descending : false,
edit : null,
search : false //初始默认关闭搜索功能
}
}, _showEditor : function(ev){
this.setState({
edit : {
row: parseInt(ev.target.dataset.row, 10),
cell : ev.target.cellIndex
}
});
}, _save : function(ev){
ev.preventDefault();
var input = ev.target.firstChild;
var data = this.state.data.slice();
data[this.state.edit.row][this.state.edit.cell] = input.value;
this.setState({
edit : null,
data : data
});
}, _renderToolbar : function() {
return React.DOM.button(
{
onClick : this._toggleSearch, //开启或者关闭搜索功能
className : "toolbar"
},
"search"
);
}, _renderTable : function() {
return (
React.DOM.table(null,
React.DOM.thead(
{onClick : this._sort},
React.DOM.tr(
null,
this.state.headers.map(function(title, id){
return React.DOM.th({key: id}, title);
})
)
),
React.DOM.tbody(
{onDoubleClick:this._showEditor},
this._renderSearch(),
this.state.data.map(function(row, rowIndex){
return (
React.DOM.tr(
{key:rowIndex},
row.map(function(field, cellIndex){
var content = field;
var edit = this.state.edit;
if (edit && edit.row==rowIndex && edit.cell==cellIndex) {
content = React.DOM.form(
{onSubmit: this._save},
React.DOM.input(
{type : "text", defaultValue : content}
)
);
}
return React.DOM.td(
{key:cellIndex, 'data-row':rowIndex},
content
);
}, this)
)
);
}, this)
)
)
)
}, _renderSearch : function() {
if (!this.state.search) {
return null;
}
return (
React.DOM.tr(
{onChange : this._search},
this.props.headers.map(function(_ignore, idx){
return React.DOM.td(
{key : idx},
React.DOM.input(
{type : "text", "data-idx": idx}
)
)
})
)
);
}, //调整搜索功能，如果是开启状态，则关闭它；否则打开搜索功能，通过设置state中的search
_toggleSearch : function() {
if (this.state.search) {
this.setState({
data : this._preSearchData,
search : false
});
this._preSearchData = null;
} else {
this._preSearchData = this.state.data; //开启搜索时，将data先存入_preSearchData
this.setState({
search : true
})
}
}, _search : function (ev) {
var needle = ev.target.value.toLowerCase();
if (!needle) { //搜索的字符串为空时，恢复原数据
this.setState({data : this._preSearchData});
return;
} var idx = ev.target.dataset.idx; //进行搜索的那一列
var searchData = this._preSearchData.filter(function(row){
return row[idx].toString().toLowerCase().indexOf(needle) > -1;
});
this.setState({
data : searchData
})
}, _logSetState : function() {
this._log.push(JSON.parse(JSON.stringify(
this._log.length === 0 ? this.state : newState
)));
this.setState(newState)
}, componetDidMount : function() {
document.onkeydown = function() {
if (e.altKey && e.shiftKey && e.keyCode === 82) {
this._replay();
}
}.bind(this);
}, _replay : function() {
if (this._log.length === 0) {
console.log("No state to replay yet");
return;
}
var idx = -1;
var interval = setInterval(function(){
idx++;
if (idx === this._log.length-1){
clearInterval(interval);
}
this.setState(this._log[idx]);
}.bind(this), 1000);
} }); ReactDOM.render(
React.createElement(Excel, {headers : header, initialData : data}),
document.getElementById("app")
);
</script>
</html>
一个出色的表格（React实现__ES5语法）的更多相关文章
- 前端笔记之React（一）初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
- 从一个例子中体会React的基本面
[起初的准备工作] npm init npm install --save react react-dom npm install --save-dev html-webpack-plugin web ...
- fir.im Weekly - 如何做一个出色的程序员
做一个出色的程序员,困难而高尚.本期 fir.im Weekly 精选了一些实用的 iOS,Android 开发工具和源码分享,还有一些关于程序员的成长 Tips 和有意思有质量的线下活动~ How ...
- 我的第一个jQuery插件--表格隔行变色
虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...
- Jhipster 一个Spring Boot + Angular/React 全栈框架
Jhipster 一个Spring Boot + Angular/React 全栈框架: https://www.jhipster.tech/
- 如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置
如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置 <div style="position:relative;"> <img src=&quo ...
- Dart：2.通过一个简单程序来理解Dart基础语法
一 . 一个简单的 Dart 程序 // 这是程序执行的入口. main() { var number = 42; // 定义并初始化一个变量. printNumber(number); // 调用一 ...
- 如何用latex画一个简单的表格
latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...
- 一个动态扩展表格控件列和行的 jQuery 插件
一个动态扩展表格控件列和行的 jQuery 插件 不过这并不影响使用鸭! 看这里:https://github.com/zhuwansu/table-ext.js 一个简单的示范 html <t ...
随机推荐
- Hibernate 5 入门指南-基于JPA
首先创建\META-INF\persistence.xml配置文件并做简单的配置 <persistence xmlns="http://java.sun.com/xml/ns/pers ...
- C# -- 使用Aspose.Cells创建和读取Excel文件
使用Aspose.Cells创建和读取Excel文件 1. 创建Excel Aspose.Cells.License li = new Aspose.Cells.License(); li.SetLi ...
- Java入门（六）：数组
数组是一种数据结构,用于存储同一类型值的集合,也可以看做是数据类型一致的一组数据. 一.语法和声明数组 1.语法:数据类型[ ] array = new 数据类型[长度]: 注意: 使用长度创建数组的 ...
- MySql 中文写入数据库乱码及Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1解决
一.中文写入乱码问题 我输入的中文编码是 urf8 的,建的库是 urf8 的,但是插入MySQL总是乱码,一堆"???????????????????????".可以使用以下的方 ...
- python3编写网络爬虫15-Splash的使用
Splash是一个JavaScript渲染服务 是一个带有HTTP API的轻量级浏览器 同时对接了python的Twisted 和QT库 利用它可以实现对动态渲染页面的抓取 功能介绍 1.异步方式处 ...
- nginx: worker process is shutting down
正常情况下,nginx进程状态如下: 当修改配置文件,reload之后: PID=17114的wroker有正在处理的连接,等处理结束,该worker就会退出(退出之前,该worker不会处理新的连接 ...
- 在win7下python的xlrd和xlwt的安装于应用
1. http://pypi.python.org/pypi/xlwt 和http://pypi.python.org/pypi/xlrd下载xlwt-0.7.4.tar.gz和xlrd-0.7.7. ...
- 详解区块链P2P网络
根据前一篇文章<从微观到宏观理解区块链>我们已经了解到,微观上,区块链本质就是一种不可篡改且可追踪溯源的哈希链条:宏观上,还具备了另外三个基本特征:分布式存储.P2P 网络和共识机制.分布 ...
- CentOS7使用DevStack快速搭建OpenStack实验环境
安装环境:centos7系统下安装devstack 一.下载Ubuntu14或者Centos7安装(实体机或者虚拟机都可以),建议选择最小安装镜像即可. 二.安装devstack 文档地址 http: ...
- 51nod 省选联测 R2
51nod 省选联测 R2 上场的题我到现在一道都没A,等哪天改完了再写题解吧,现在直接写第二场的. 第二场比第一场简单很多(然而这并不妨碍我不会做). A.抽卡大赛:http://www.51nod ...