还在为管理后台繁杂的表格页面烦恼吗？
不，让v-format-table来拯救你吧！
基于reactjs的表格组件，统一只要传入一个表头数组和一个内容数组，即可生成一个表格； 并支持format回调函数，可格式化每个表格单元的显示或自定义操作； 支持单选、多选、分页、删除功能。
项目截图：
代码示例：
getInitialState:function(){ var data = []; var tds = [{format:this.formatCheckCol}, {col:"id"}, {col:"name"}, {col:"src", format:this.formatSrc}, {col:"date"}, {format:this.formatOperations, has_td:true}]; var ths = [{format:this.formatCheckTH}, {colName:"ID"}, {colName:"名字"}, {colName:"来源"}, {colName:"注册日期"}, {colName:"操作"}]; var ops = [{opid:1,name:"编辑",callback:this.handleClick},{opid:2,name:"删除",callback:this.handleClick}]; return { start:0, data:data, ths:ths, tds:tds, ops:ops}; },//render(){}如下<FormatTable ths={this.state.ths} data={this.state.data} tds={this.state.tds}/>格式化表格单元的示例(项目中代码table2.js)：
formatCheckTH:function(index){//全选return (<label><input type="checkbox" name={index} onChange={this.handleTHCheckStatusChange} checked={this.state.checkAll}/></label>);},formatCheckCol:function(data,checkIndex){//单选return (<label><input type="checkbox" name={checkIndex} onChange={this.handleCheckStatusChange} checked={this.state.data[checkIndex]['checked']} value={this.state.data[checkIndex]['checked']}/></label>);},formatSrc:function(data, index){var srcs = ["未知","自注册","推荐注册"];return srcs[data.src];},formatOperations:function(data, index){var ops = this.state.ops;return (<CommonTDOperations key="-2" ops={ops} data={index}/>);},另，附加实现了一个TAB组件和一个选项表格组件，可支持表格式展示选择地区、选择文件等操作。
截图如下：
使用方法如下(项目中代码table3.js)：
var tagOptions = [ [{label:"标签1", value:1}, {label:"标签2", value:2}, {label:"标签3", value:3}], [{label:"标签4", value:4},{label:"标签5", value:5}], [{label:"标签6", value:6}, {label:"标签7", value:7}], [{label:"标签8", value:8},{label:"标签9", value:9},{label:"标签10", value:10}], [{label:"标签11", value:11}, {label:"标签12", value:12}, {label:"标签13", value:13}], [{label:"标签14", value:14}] ]; this.setState({tagOptions:tagOptions});//render(){}<OptionTable options={this.state.tagOptions} isRadio={false} callback={this.tagSelected}/>本项目是一个react的简单应用demo，仅做前后端分离的前端部分，采用前端渲染的方式，可以接入node服务端，也支持接入PHP、Java等其它任何语言的服务端。
reactjs，强烈赞！在UI格式较标准化的后台管理系统中，前期积累封装一些标准组件，后面开发基本是现有组件的组合，组件化的应用犹如牛刀杀鸡、游刃有余。
评论