v-format-table基于 React 的表格组件
还在为管理后台繁杂的表格页面烦恼吗？
不，让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格式较标准化的后台管理系统中，前期积累封装一些标准组件，后面开发基本是现有组件的组合，组件化的应用犹如牛刀杀鸡、游刃有余。
评论