溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
給大家分享的功能是layui自定義工具欄
功能效果：開啟數據表格頭部工具欄區域
關鍵參數：toolbar
參數類型：String/DOM/Boolean
參數說明：
toolbar: ‘#toolbarDemo' //指向自定義工具欄模板選擇器
toolbar: ‘<div>xxx</div>' //直接傳入工具欄模板字符
toolbar: true //僅開啟工具欄，不顯示左側模板
toolbar: ‘default' //讓工具欄左側顯示默認的內置模板
在這里我用的是第一種toolbar:'#toolbarDemo'，就是調用自己定義的工具欄的模板選擇器
功能效果圖：
已封裝好的自定義工具欄模板選擇器：
<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>
調用方法：
首先得引用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', //數據接口
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'這句代碼是這個功能的關鍵代碼
以上這篇layui自定義工具欄的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
