基于 React 的表格组件 v-format-table

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://gitee.com/iflegend/v-format-table
• 软件文档: https://gitee.com/iflegend/v-format-table/wikis/Home

软件介绍

还在为管理后台繁杂的表格页面烦恼吗？ 

不，让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格式较标准化的后台管理系统中，前期积累封装一些标准组件，后面开发基本是现有组件的组合，组件化的应用犹如牛刀杀鸡、游刃有余。

本文地址：https://codercto.com/soft/d/12670.html