赵走x博客
网站访问量:151957
首页
书籍
软件
工具
古诗词
搜索
登录
49、Flux:理念、回顾Whinepad
48、lint、Flow、测试与复验:测试
47、lint、Flow、测试与复验:Flow
46、lint、Flow、测试与复验:ESLint
45、lint、Flow、测试与复验:package.json
44、构建实例应用:<Whinepad>
43、构建实例应用:应用配置
43、构建实例应用:<Excel>:改进的新版本
42、构建实例应用:组件:对话框
41、构建实例应用:组件:Actions
39、构建实例应用:表单:Form
38、构建实例应用:表单:<FormInput>“工厂组件”
37、构建实例应用:表单:Rating组件
36、构建实例应用:表单:Suggest
35、构建实例应用:Button组件
34、构建实例应用:组件
33、构建实例应用:Whinepad v.0.0.1
32、发布
31、开始构建
30、安装必备工具
29、为应用开发做准备:一个模板应用
28、JSX 和表单
27、JSX 和HTML 的区别
26、在JSX 中返回多个节点
25、展开属性
24、HTML 实体
23、JSX入门
22、Excel:一个出色的表格组件:下载表格数据
21、Excel:一个出色的表格组件:即时回放
20、Excel:一个出色的表格组件:搜索
19、Excel:一个出色的表格组件:编辑数据
18、Excel:一个出色的表格组件:排序
17、Excel:一个出色的表格组件
16、 PureRenderMixin
15、 性能优化:避免组件更新
14、 生命周期示例:使用子组件
13、组件生命周期示例:使用mixin
12、组件:生命周期方法
11、中途改变属性
10、从外部访问组件
9、在初始化state 时使用props:一种反模式
8、 props 与state
7、关于DOM 事件的说明
6、组件:带状态的文本框组件
5、组件的state
4、组件的propTypes
3、组件的属性
2、组件的基础
1、Hello World
50、Flux:Store
18、Excel:一个出色的表格组件:排序
资源编号:76068
书籍
React快速上手开发
热度:89
当你看见网页中的表格时,是否想对其进行各种各样的排序呢?幸运的是,这个需求可以用React 轻松完成。事实上,这个例子恰恰体现了React 的闪光之处,因为你要做的仅仅是对数据数组进行排序,而React 将帮你完成界面的更新。
当你看见网页中的表格时,是否想对其进行各种各样的排序呢?幸运的是,这个需求可以用React 轻松完成。事实上,这个例子恰恰体现了React 的闪光之处,因为你要做的仅仅是对数据数组进行排序,而React 将帮你完成界面的更新。 首先,在表头处添加一个点击事件处理器: ``` React.DOM.table(null, React.DOM.thead({onClick: this._sort}, React.DOM.tr(null, // ... ``` 现在,让我们实现_sort 函数。首先你要知道根据哪一列进行排序。这可以通过触发事件的对象(在这里是表头
标签)的cellIndex 属性取得: ``` var column = e.target.cellIndex; ``` 你可能很少见到有人在应用开发中使用cellIndex 属性。这是一个早在DOMLevel 1 就被定义的属性,其定义为" 这个单元格在该行中的索引值"。它随后在DOM Level 2 中被定义为只读属性。 你还需要一份要排序的数据副本。如果你直接使用数据的sort() 方法,会直接修改原数组,也就意味着this.state.data.sort() 会修改this.state。你已经知道this.state 是不应该被直接修改的,只能通过setState() 修改: ``` // 复制数据 var data = this.state.data.slice(); // 或者使用ES6中的Array.from(this.state.data) ``` 接下来,排序功能可以通过sort() 方法中传入的回调函数完成: ``` data.sort(function(a, b) { return a[column] > b[column] ? 1 : -1; }); ``` 最后,通过setState() 设置排序后的新数据: ``` this.setState({ data: data, }); ``` 现在,当你点击表头时,内容会按照字母顺序排序(如图3-4 所示)。  图3-4:按照书名排序 就是这么简单,你完全不需要关心视图渲染。在render() 方法中,你已经一次性为组件定义了在给定某些数据时如何进行展现。当数据发生改变时,视图也会对应更新;但你不再需要关心它是如何变化的了。 ### 如何改进该组件 这里用到的排序逻辑相当简单,仅仅满足了关于React 话题的讨论。你可以让它变得更加出色:比如对内容进行解析;当其值是数字时,可以选择带或不带单位等。 # 排序的视觉提示 现在表格已经排好序了,但用户不能清晰地看到表格是根据哪一列进行排序的。让我们更新一下界面,在进行排序的那一列显示一个箭头符号。与此同时,我们还将实现降序排列的功能。 为了跟踪新的状态,你需要添加以下两个新属性。 * this.state.sortby:当前被选择的列索引值 * this.state.descending:一个布尔类型的标记,决定按照升序还是降序排列 ``` getInitialState:function(){ return { data:this.props.initialData, sortby:null, descending:false, } }, ``` 在_sort() 函数中,你可以指定采用其中哪种方法进行排序。默认为升序排列;在当前选中的列索引和之前一样并且当前还不是降序排列时,则进行降序排列: ``` var descending = this.state.sortby === column && !this.state.descending; ``` 你还需要对排序的回调函数进行一点调整: ``` data.sort(function(a, b) { return descending ? (a[column] < b[column] ? 1 : -1) : (a[column] > b[column] ? 1 : -1); }); ``` 最后,你需要设置新的state: ``` this.setState({ data: data, sortby: column, descending: descending, }); ``` 还剩一件事情需要完成,那就是修改render() 函数,指出当前的排序方向。对于当前已排好序的那一列,让我们在标题上添加一个箭头符号: ``` this.props.headers.map(function (title,idx) { console.log(this) if(this.state.sortby===idx){ title+=this.state.descending?'\u2191':'\u2193' } return React.DOM.th({key:idx},title); },this) ``` 现在我们完成了排序功能。用户可以对任意列进行排序:首次点击时对该列进行升序排列,再点击一次可以进行降序排列;而视图会给出对应的视觉提示(如图3-5 所示)。  图3-5:升序/ 降序排列