(Grid js) 我希望搜索按钮在右侧，添加按钮在左侧，我该怎么办？答案

【问题标题】：(Grid js) I want the search button to be on the right side and the add button on the left, what do I do?(Grid js) 我希望搜索按钮在右侧，添加按钮在左侧，我该怎么办？
【发布时间】：2020-12-23 06:36:09
【问题描述】：

(Grid js) 我希望搜索按钮在右侧，添加按钮在左侧，我该怎么办？

new gridjs.Grid({
        columns: ['Name', 'Email', 'Phone Number'],
        search: true,
        data: [
            ['John', 'john@example.com', '(353) 01 222 3333'],
            ['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
            ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'],
            ['Nisen', 'nis900@gmail.com', '313 333 1923']
        ]
    }).render(document.getElementById("user-table"));

<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.production.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
    

 <div id="user-table"></div>

【问题讨论】：

我想要一个添加按钮。位于左侧，与搜索按钮一致，有没有方法？

标签： javascript gridjs

【解决方案1】：

您可以自定义搜索框的CSS类：

.gridjs-search {
  float: right;
}

演示：https://codesandbox.io/s/gridjs-custom-search-box-j0q9l?file=/index.html

【讨论】：

【解决方案2】：

我和你有同样的问题，我就是这样做的↓

function insertButtonToTableHeader() {
    // create a button-wrapper
    const button_wrapper = document.createElement('div')
    button_wrapper.className = 'float-left'

    // Insert buttons to button-wrapper
    function insertButtonToButtonWrapper(buttonName) {
        let button = document.createElement('a')
        button.innerText = buttonName
        button.className = 'btn btn-primary'
        button_wrapper.appendChild(button)
    }
    insertButtonToButtonWrapper('Insert')
    insertButtonToButtonWrapper('Import')

    // add button-wrapper to table header
    const grid_js_head = document.querySelector('.gridjs-head')
    const gridjs_search = document.querySelector('.gridjs-search')
    grid_js_head.insertBefore(button_wrapper, gridjs_search)
}
insertButtonToTableHeader()

仅供参考，每次forceRender()gridjs，按钮都会消失，所以forceRender()执行时需要调用insertButtonToTableHeader()。

【讨论】：