2

（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>

4

2 回答 2

2

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

.gridjs-search {
  float: right;
}

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

于 2021-01-07T23:59:40.600 回答
1

我和你有同样的问题，我就是这样做的↓</p> 

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，按钮都会消失，所以你需要insertButtonToTableHeader()在forceRender()执行时调用。

于 2021-01-11T05:04:50.840 回答