一个出色的表格（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 ...
随机推荐
- March 01st, 2018 Week 9th Thursday
Let bygones be bygones. 过去的就让它过去吧. What happened has happened, it cannot be undone, so just leave it ...
- Unity Shader 基础（1）： RenderType & ReplacementShader
很多Shader中都会定义RenderType这个类型,但是一直搞不明白到底是干嘛的,官方文档是这样结解释的:Rendering with Replaced Shaders Rendering wit ...
- IntelliJ IDEA 创建Spring+SpringMVC+hibernate+maven项目
第一步: 新建maven管理的web项目, 具体步骤参考:http://www.cnblogs.com/gczmn/p/8693734.html 第二步: 创建项目结构, 完整项目结构如下: 第三步: ...
- JavaScript对象原型写法详解
体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...
- 附2 rabbitmq用户管理、角色管理与权限管理
本文摘自:http://my.oschina.net/hncscwc/blog/262246 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个 ...
- springboot RestTemplate请求
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 1.定义 RestTemplateConfig 配置类 @Configuratio ...
- 第11章 AOF持久化
AOF持久化在硬盘上保存的是对Redis进行的逻辑操作,类似InnoDB中的bin log.说白了就是你对一个Redis输入了哪些语句,AOF文件都会原封不动的保存起来,等到需要回复Redis的时候再 ...
- Linux中的cat、more、less、head、tail命令
cat [OPTION]... [FILE]... -E:显示行结束符$ -n:对显示出的每一行进行编号 cat后面可以加多个文件,也就是说可以把多个文件连接起来,然后dump到标准输出. 另外cat ...
- Home Assistant-自动化设备
触发器(trigger) 条件(condition) 动作(action) 自动化中的模板(template) 触发器(trigger) 时间(time)触发器时间触发器在指定的时间触发规则,可以是某 ...
- Memcache分布式锁 转发 https://www.cnblogs.com/li150dan/p/9529090.html
在分布式缓存的应用中,会遇到多个客户端同时争用的问题.这个时候,需要用到分布式锁,得到锁的客户端才有操作权限 下面通过一个简单例子介绍: 这里引用的是Memcached.ClientLibrary.d ...