一个出色的表格（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 ...
随机推荐
- February 25th, 2018 Week 9th Sunday
LIfe is about making an impact, not making an income. 生命在于影响他人,而非赚钱糊口. From Kevin Kruse. You probabl ...
- 在win10 64位系统安装 lxml （Python 3.5）
本想直接用pip install lxml 命令安装完事,但是由于安装过程中跟VS的一些东西冲突怎么都安装不上,搜索到以下方法,问题解决. 步骤: 1.下载跟python匹配的.whl 文件(lxml ...
- html文本格式
- ElasticSearch（一）：CentOS7 安装 ElasticSearch6.4.0
一.安装jre支持 在CentOS中安装ElasticSearch需要Java1.8.0,可执行命令# java -version查看当前系统所安装Java版本是否为1.8.0版本. 若非1.8.0 ...
- 安利一个_Java学习笔记总结
javaIO 字符编码 多线程 线程池 ArrayList遍历方式 LinkedList遍历方式 Vector遍历方式 Vector, ArrayList, LinkedList 的区别是什么? Ha ...
- UVA11491-Erasing ans Winning(贪心)
Problem UVA11491-Erasing ans Winning Accept: 799 Submit: 5753Time Limit: 3000 mSec Problem Descript ...
- 「JOI 2016 Final」断层
嘟嘟嘟 今天我们模拟考这题,出的是T3.实在是没想出来,就搞了个20分暴力(还WA了几发). 这题关键在于逆向思维,就是考虑最后的\(n\)的个点刚开始在哪儿,这样就减少了很多需要维护的东西. 这就让 ...
- 在linux中查看进程占用的端口号
在Linux 上的 /etc/services 文件可以查看到更多关于保留端口的信息. 可以使用以下六种方法查看端口信息. ss:可以用于转储套接字统计信息. netstat:可以显示打开的套接字列表 ...
- jquery append()与html()注意项
项目中,涉及到有一部分js代码是从数据库中读取出来动态加载到一个<script>标签中的情况.使用到了jquery的append()和html()两个函数. 应用场景如下: 页面端,有一个 ...
- djongo：Django和MongoDB连接器
在Django项目中使用MongoDB作为后端数据库,且不改变Django的ORM框架.实现Django用户管理程序对MongoDB数据库中文件的增加和修改. 用法 1.pip install djo ...