ReactJS基金會模式彈出刪除確認和數據表的Reactjs和基礎與排序/尋呼支持

Question

任何人都可以建議我良好的模態彈出reactjs和？我希望它用於刪除確認。我嘗試了react-foundation-apps的模式，但由於文檔較少，我無法將它用於表格數據中的刪除功能。

var React = require('react'); 

var EmployeeList = React.createClass({ 
    render: function() { 
     var employees = this.props.employees.map(function(e, i){ 
      return (
       <tr key={i}> 
        <td>{e.employeeName}</td> 
        <td><a title="edit" href="#"><i className="fi-pencil"></i></a></td> 
        <td> 
         <a title="delete" href="#"><i className="fi-trash"></i></a> 
        </td> 
       </tr> 
       ) 
     }, this); 

     return (
      <div> 
       <table id="users"> 
        <thead> 
         <tr> 
          <th>Employee</th> 
          <th>Edit</th> 
          <th>Delete</th> 
         </tr> 
        </thead> 
        <tbody> 
         {employees} 
        </tbody> 
       </table> 
      </div> 
     ); 
    } 
}); 

module.exports = EmployeeList; 

加

建議我與基礎reactjs良好的數據表/數據網格。

Answer 1

模型是一個可以自己構建的簡單模式。主要屬性是絕對定位，顯示/隱藏和高zIndex。這是一個例子。

import React from 'react'; 
 

 
import Actions from '../../flux/Actions'; 
 
import TreeViewB from './../common/jTreeViewB'; 
 

 
let JumpListSty = { 
 
    backgroundColor: '#e1ded5', 
 
    left: '20px', 
 
    maxHeight: '80%', 
 
    overflow: 'auto', 
 
    position: 'absolute', 
 
    top: '30px', 
 
    width: '350px', 
 
    zIndex: '100' 
 
}; 
 

 
export default class JumpList extends React.Component { 
 
    clickHandler = (node) => { Actions.selectJumpNode(node); Actions.appActions('jump'); } 
 
    render() { 
 
    if (this.props.hide) return null; 
 
    let options = { 
 
     icon: {sun: 1, leaf: 2, snow: 3}, 
 
     typeName: ['node', 'nodeLevel'] 
 
    }; 
 
    let isMobile = (this.props.appState.deviceType == 'mobile'); 
 
    return (
 
     <div id='JumpListSty' style={JumpListSty}> 
 
     <TreeViewB data={this.props.data} options={options} titleClick={this.clickHandler} mobile={isMobile} /> 
 
     </div> 
 
    ); 
 
    } 
 
}

<JumpList data={jumpData} appState={this.props.appState} hide={hideJump} />

Answer 2

數據網格是一個簡單的圖案也。它是包含在行圖中的列的排列。您可以使用或不使用HTML表格。

function dataMap(item, index) { 
 
    return (
 
    <tr key={item._id + index}> 
 
     <td ></td> 
 
     <td style={columnSty}>{item.userinclude}</td> 
 
     <td style={columnSty}>{item.domaininclude}</td> 
 
     <td style={columnSty}>{item.userexclude}</td> 
 
     <td style={columnSty}>{item.domainexclude}</td> 
 
     <td style={columnSty}>{item.userskip}</td> 
 
     <td style={columnSty}>{item.domainskip}</td> 
 
     <td style={lastColumnSty}>{item._id}</td> 
 
    </tr> 
 
) 
 
} 
 

 
export default class AggregateList extends React.Component { 
 
    render() { 
 
    let list = this.props.data.map(dataMap); 
 
    return (
 
     <div id='AggregateListSty' style={AggregateListSty}> 
 
     <table > 
 
      <thead> 
 
      <tr> 
 
       <th ></th> 
 
       <th style={columnHeaderSty}></th> 
 
       <th style={columnHeaderSty}>Protested</th> 
 
       <th style={columnHeaderSty}></th> 
 
       <th style={columnHeaderSty}>Excluded</th> 
 
       <th style={columnHeaderSty}></th> 
 
       <th style={columnHeaderSty}>Skipped</th> 
 
       <th style={lastColumnSty}></th> 
 
      </tr> 
 
      <tr> 
 
       <th ></th> 
 
       <th style={columnHeaderSty}>User</th> 
 
       <th style={columnHeaderSty}>All</th> 
 
       <th style={columnHeaderSty}>User</th> 
 
       <th style={columnHeaderSty}>All</th> 
 
       <th style={columnHeaderSty}>User</th> 
 
       <th style={columnHeaderSty}>All</th> 
 
       <th style={lastColumnSty}></th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      {list} 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    ); 
 
    } 
 
}