layui自定義工具欄的方法
更新時間：2019年09月19日 09:36:41 作者：憐眸
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
給大家分享的功能是layui自定義工具欄
功能效果：開啟數(shù)據(jù)表格頭部工具欄區(qū)域
關(guān)鍵參數(shù)：toolbar
參數(shù)類型：String/DOM/Boolean
參數(shù)說明：
toolbar: ‘#toolbarDemo' //指向自定義工具欄模板選擇器
toolbar: ‘<div>xxx</div>' //直接傳入工具欄模板字符
toolbar: true //僅開啟工具欄，不顯示左側(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, //開啟分頁
cols: [[ //表頭
{ type: 'numbers', title: '序號', align: 'center', width: 100 },
{ field: 'DepartmentNumber', title: '部門編號', align: 'center' },
{ field: 'Department', title: '部門名稱', align: 'center' }
]],
id: 'table',
toolbar: '#toolbarDemo',//開啟自定義工具行，指向自定義工具欄模板選擇器
defaultToolbar: ['filter', 'print', 'exports']
});
});
上面的toolbar: '#toolbarDemo'這句代碼是這個功能的關(guān)鍵代碼
以上這篇layui自定義工具欄的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
原生Js Canvas去除視頻綠幕背景的方法實現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
這篇文章主要給大家介紹了一些手寫的JavaScript常用的函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了parabola.js拋物線與加入購物車效果的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
下面小編就為大家?guī)硪黄猨query獲取img的src值的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Bootstrap開發(fā)實戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開發(fā)實戰(zhàn)之響應(yīng)式輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
js事件監(jiān)聽機(jī)制(事件捕獲)總結(jié)
添加事件的js方法也很多，有直接加到頁面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽的方法，由于各個瀏覽器對事件冒泡事件監(jiān)聽的機(jī)制不同2014-08-08
javascript用正則表達(dá)式過濾空格的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨avascript用正則表達(dá)式過濾空格的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
BootStrap 輪播插件(carousel)支持左右手勢滑動的方法(三種)
這篇文章主要介紹了BootStrap 輪播插件(carousel)支持左右手勢滑動的方法(三種)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
JavaScript實現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實現(xiàn)一個帶并發(fā)限制的異步調(diào)度器?Scheduler,保證同時運(yùn)行的任務(wù)最多有N個,感興趣的小伙伴可以了解下2024-03-03
超詳細(xì)JavaScript深淺拷貝的實現(xiàn)教程
淺拷貝是指，一個新的對象對原始對象的屬性值進(jìn)行精確地拷貝；深拷貝是指，對于簡單數(shù)據(jù)類型直接拷貝他的值，對于引用數(shù)據(jù)類型，在堆內(nèi)存中開辟一塊內(nèi)存用于存放復(fù)制的對象，并把原有的對象類型數(shù)據(jù)拷貝過來。本文將實現(xiàn)JavaScript深淺拷貝，需要的可以參考一下2022-09-09