react-admin-lte/lib/DataTable.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';


export default class DataTable extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.edit = this.edit.bind(this);
    this.del = this.del.bind(this);
    this.moreHanle = this.moreHanle.bind(this);
  }

  edit(_id) {
    if (this.props.onItemEdit) {
      this.props.onItemEdit(_id);
    }
  }

  del(_id) {
    if (!confirm('是否确认删除？')) {
      return;
    }
    if (this.props.onItemDel) {
      this.props.onItemDel(_id);
    }
  }

  moreHanle(_id, tag) {
    if (this.props.onMoreActionHandle) {
      this.props.onMoreActionHandle(_id, tag)
    }
  }

  render() {
    let cols = this.props.cols;
    let list = this.props.list;

    if (!cols) {
      throw new Error('DataTable 必须指定 cols 参数')
    }
    let hCols = [];
    let aKeys = [];
    for (var c in cols) {
      var cValue = cols[c];
      var label = '';
      if (typeof cValue == 'string') {
        label = cValue
      } else {
        label = cValue.label
      }
      hCols.push(<th key={c}>
        {label}
      </th>);
      aKeys.push(c)
    }
    hCols.push(<th style={this.props.actionColStyle}>
      管理
    </th>);

    let _this = this;

    return (
      <table className="table table-bordered table-hover data-table">
        <thead>
          <tr>
            {hCols}
          </tr>
        </thead>
        <tbody>
          {
            list?
            list.map(function (ele, trIndex) {
              return (
                <tr key={trIndex}>
                  {aKeys.map(function (col) {
                    var colDef = cols[col];
                    var mValue = ele[col];
                    if (colDef.fullData) {
                      mValue = ele;
                    }
                    if (colDef.hasOwnProperty('format')) {
                      return (<td key={"td" + col}>
                        {colDef['format'](mValue) }
                      </td>);
                    } else {
                      return (<td key={"td" + col}>
                        {mValue}
                      </td>);
                    }
                  }) }
                  <td className="text-center">
                    <div className="btn-group">
                      {_this.props.noEdit ? null :
                        <button className="btn btn-sm btn-info btn-flat" title="修改"
                          onClick={_this.edit.bind(null, ele._id || ele.id) }>
                          <i className="fa fa-pencil-square-o"/>
                        </button>}
                      {_this.props.noDel ? null :
                        <button className="btn btn-sm btn-info btn-flat" title="删除"
                          onClick={_this.del.bind(null, ele._id || ele.id) }>
                          <i className="fa fa-trash-o"/>
                        </button>}
                      {_this.props.moreActions && _this.props.moreActions.map(function (act, index) {
                        var shown = true;
                        if (act.visible && typeof act.visible == 'function') {
                          shown = act.visible(ele);
                        } else if (!act.hasOwnProperty('visible')) {
                        } else {
                          shown = act.visible;
                        }
                        return (
                          shown ?
                            <button
                              key={index}
                              className="btn btn-sm btn-info btn-flat"
                              title={act.label}
                              onClick={_this.moreHanle.bind(null, ele._id || ele.id, act.tag) }>
                              <i className={act.iconClass}/>
                            </button> : null);
                      }) }
                    </div>
                  </td>
                </tr>
              )
            }): <tr><td colSpan={20}>没有记录</td></tr>
          }
        </tbody>
        <tfoot>
          { !this.props.noFooter ? (
            <tr>
              {hCols}
            </tr>) : null
          }
          {this.props.footerRows}
        </tfoot>
      </table>
    )
  }
}