layui自定義工具欄的方法
給大家分享的功能是layui自定義工具欄
功能效果：開(kāi)啟數(shù)據(jù)表格頭部工具欄區(qū)域
關(guān)鍵參數(shù)：toolbar
參數(shù)類型：String/DOM/Boolean
參數(shù)說(shuō)明：
toolbar: ‘#toolbarDemo' //指向自定義工具欄模板選擇器
toolbar: ‘<div>xxx</div>' //直接傳入工具欄模板字符
toolbar: true //僅開(kāi)啟工具欄，不顯示左側(cè)模板
toolbar: ‘default' //讓工具欄左側(cè)顯示默認(rèn)的內(nèi)置模板
在這里我用的是第一種toolbar:'#toolbarDemo'，就是調(diào)用自己定義的工具欄的模板選擇器
功能效果圖：
已封裝好的自定義工具欄模板選擇器：
<script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getSelect">查詢</button> <button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button> <button class="layui-btn layui-btn-sm" lay-event="getUpdate">修改</button> <button class="layui-btn layui-btn-sm" lay-event="getDelete">刪除</button> <button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button> </div> </script>
調(diào)用方法：
首先得引用jquery和layui的css樣式、js樣式
<link href="~/Contents/assets/layui/css/layui.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Contents/js/jquery-3.3.1.min.js"></script>
<script src="~/Contents/assets/layui/layui.all.js"></script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#table',
url: 'SelectDepartment', //數(shù)據(jù)接口
page: true, //開(kāi)啟分頁(yè)
cols: [[ //表頭
{ type: 'numbers', title: '序號(hào)', align: 'center', width: 100 },
{ field: 'DepartmentNumber', title: '部門(mén)編號(hào)', align: 'center' },
{ field: 'Department', title: '部門(mén)名稱', align: 'center' }
]],
id: 'table',
toolbar: '#toolbarDemo',//開(kāi)啟自定義工具行，指向自定義工具欄模板選擇器
defaultToolbar: ['filter', 'print', 'exports']
});
});
上面的toolbar: '#toolbarDemo'這句代碼是這個(gè)功能的關(guān)鍵代碼
以上這篇layui自定義工具欄的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
一些手寫(xiě)JavaScript常用的函數(shù)匯總
這篇文章主要給大家介紹了一些手寫(xiě)的JavaScript常用的函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼
本篇文章主要介紹了parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
jquery獲取img的src值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取img的src值的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
js事件監(jiān)聽(tīng)機(jī)制(事件捕獲)總結(jié)
添加事件的js方法也很多，有直接加到頁(yè)面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽(tīng)的方法，由于各個(gè)瀏覽器對(duì)事件冒泡事件監(jiān)聽(tīng)的機(jī)制不同2014-08-08
javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)
這篇文章主要介紹了BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JavaScript實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個(gè)帶并發(fā)限制的異步調(diào)度器?Scheduler,保證同時(shí)運(yùn)行的任務(wù)最多有N個(gè),感興趣的小伙伴可以了解下2024-03-03
超詳細(xì)JavaScript深淺拷貝的實(shí)現(xiàn)教程
淺拷貝是指，一個(gè)新的對(duì)象對(duì)原始對(duì)象的屬性值進(jìn)行精確地拷貝；深拷貝是指，對(duì)于簡(jiǎn)單數(shù)據(jù)類型直接拷貝他的值，對(duì)于引用數(shù)據(jù)類型，在堆內(nèi)存中開(kāi)辟一塊內(nèi)存用于存放復(fù)制的對(duì)象，并把原有的對(duì)象類型數(shù)據(jù)拷貝過(guò)來(lái)。本文將實(shí)現(xiàn)JavaScript深淺拷貝，需要的可以參考一下2022-09-09