溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

layui自定義工具欄的方法

發(fā)布時(shí)間：2020-09-27 09:44:41 來源：腳本之家 閱讀：334 作者：憐眸 欄目：web開發(fā)

給大家分享的功能是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)用自己定義的工具欄的模板選擇器

功能效果圖：

layui自定義工具欄的方法

已封裝好的自定義工具欄模板選擇器：

<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: '序號(hào)', align: 'center', width: 100 },
  { field: 'DepartmentNumber', title: '部門編號(hào)', align: 'center' },
  { field: 'Department', title: '部門名稱', align: 'center' }
 ]],
 id: 'table',
 toolbar: '#toolbarDemo',//開啟自定義工具行，指向自定義工具欄模板選擇器
 defaultToolbar: ['filter', 'print', 'exports']
 });
});

上面的toolbar: '#toolbarDemo'這句代碼是這個(gè)功能的關(guān)鍵代碼

以上這篇layui自定義工具欄的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手