Question

使用带有babel的节点js服务器构建一个Web应用程序并对js做出反应。

在某些页面中我使用react-bootstrap-table标签来创建一个包含内置数据过滤器的表（如下所示），我有两个主要问题： 1.标题与数据列不对齐 - bootstrap表标记转换为2个html表标记，这是我认为首先导致问题。我已经阅读了一些关于这个问题的帖子，它应该在版本2.0.0中修复，我使用版本2.9.0

即时为一些列使用内置过滤器，它会生成2个输入滚动条，它们应该在列标题中彼此相邻，而是在另一个下面显示一个。再次，我试图环顾四周，但没有找到有用的东西。

即时添加html呈现的源代码和显示表格的屏幕截图（我很抱歉，但图片中的文字主要是希伯来语，但要获得这个想法并不重要）

renderTable: function () {
    return (
        <div >
            <button className="w3-btn w3-theme-d5 w3-margin-top w3-round-xxlarge" onClick={this.onClickAddButton}> + </button>
            <BootstrapTable data={this.state.users} options={options} bordered={false} hover striped search searchPlaceholder={constantStrings.search_string}>
                <TableHeaderColumn
                    dataField = 'personal.id'
                    dataAlign = 'right'
                    dataSort = {true}
                    filter = { {type: 'TextFilter', placeholder:constantStrings.enterID_string} }
                    isKey = {true}>
                    {constantStrings.userID_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'personal.firstName'
                    dataAlign = 'right'
                    dataSort = {true}
                    filter={ { type: 'TextFilter', placeholder:constantStrings.enterFirstName_string} }>
                    {constantStrings.firstName_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'personal.lastName'
                    dataAlign = 'right'
                    filter = { { type: 'TextFilter', placeholder:constantStrings.enterLastName_string} }>
                    {constantStrings.lastName_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'personal.sex'
                    dataAlign = 'right'
                    filterFormatted dataFormat={ helpers.enumFormatter } formatExtraData={ constantStrings.user_gender }
                    filter={ { type: 'SelectFilter', placeholder:constantStrings.selectGender_string, options: constantStrings.user_gender } }>
                {constantStrings.gender_string}
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataField = 'jobDetails.userType'
                    dataAlign = 'right'
                    filterFormatted dataFormat={ helpers.enumFormatter } formatExtraData={ constantStrings.user_role }
                    filter={ { type: 'SelectFilter', placeholder:constantStrings.selectRole_string, options: constantStrings.user_role } }>
                    {constantStrings.role_string}
                </TableHeaderColumn>


                <TableHeaderColumn
                    dataField = 'startDate'
                    dataAlign = 'right'
                    dataFormat={ dateFormatter }
                    filter={ { type: 'DateFilter' ,placeholder:constantStrings.selectStartDate_string} }>
                    {constantStrings.startDate_string}
                </TableHeaderColumn>



                <TableHeaderColumn
                    dataAlign = 'right'
                    dataField = 'button'
                    dataFormat = {this.editButton}>
                    "Edit"
                </TableHeaderColumn>
                <TableHeaderColumn
                    dataAlign = 'right'
                    dataField = 'button'
                    dataFormat = {this.deleteButton}>
                    "Delete"
                </TableHeaderColumn>
            </BootstrapTable>
        </div>
    )
},

Answer 1

我也有这个问题..

这是css问题（文件未加载）。

如果您正在使用

react-bootstrap-table入门

来自here

你应该改变：

public static short GetCharterStatus(this IStudent student, )
{
   return schools.First(school=> school.ID == student.SchoolId).Charter;
}

为：

<link rel="stylesheet" src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">

（在index.html文件中）

react-bootstrap-table过滤器显示错误，标头未与数据

1 个答案: