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è)顯示默認的內(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)文章
JavaScript循環(huán)遍歷的24個方法,你都知道嗎
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)遍歷的24個方法,文中對每種方法都給出了詳細的實例代碼,方便大家理解學(xué)習(xí),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
兼容IE6與IE7的DIV高度的js代碼，2010-05-05
JavaScript 實現(xiàn)類似Express的中間件系統(tǒng)(實例詳解)
在 Express 中可以給一個請求設(shè)置若干個中間件，在處理響應(yīng)時會按順序執(zhí)行這些中間件，正在執(zhí)行的中間件可以控制是否執(zhí)行下一個中間件，這篇文章主要介紹了JavaScript 實現(xiàn)類似Express的中間件系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了JavaScript WeakMap使用的詳細介紹，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細介紹了一些你不知道的JavaScript閉包相關(guān)知識，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-11-11
給一個Flash加一個超鏈接,原想直接在object外直接套一個超鏈接即可，試了之后卻發(fā)現(xiàn)不是這么回事2013-06-06
這篇文章主要介紹了js 獲取掃碼槍輸入數(shù)據(jù)的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
JavaScript中三種for循環(huán)語句的使用總結(jié)（for、for...in、for...of）
這篇文章主要給大家介紹了關(guān)于JavaScript中三種for循環(huán)語句的使用的相關(guān)資料,For循環(huán)用在需要重復(fù)執(zhí)行的某些代碼,本文介紹的三種for循環(huán)分別包括for、for...in、for...of,需要的朋友可以參考下2021-06-06
javascript用正則表達式過濾空格的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨avascript用正則表達式過濾空格的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript+Canvas實現(xiàn)酷炫的粒子和流星效果
這篇文章主要為大家詳細介紹了如何利用JavaScript和Canvas實現(xiàn)酷炫的粒子和流星動畫效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-01-01