layui自定義工具欄的方法

給大家分享的功能是layui自定義工具欄

創(chuàng)新互聯(lián)建站是一家專業(yè)提供北安企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為北安眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

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

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

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

分享標(biāo)題：layui自定義工具欄的方法
標(biāo)題URL：http://bm7419.com/article30/gihopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、微信小程序、自適應(yīng)網(wǎng)站、定制網(wǎng)站、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)