給大家分享的功能是layui自定義工具欄
創新互聯建站是一家專業提供北安企業網站建設,專注與網站設計制作、網站制作、成都h5網站建設、小程序制作等業務。10年已為北安眾多企業、政府機構等服務。創新互聯專業網站建設公司優惠進行中。
功能效果:開啟數據表格頭部工具欄區域
關鍵參數: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自定義工具欄的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持創新互聯。
分享標題:layui自定義工具欄的方法
標題URL:http://www.yijiale78.com/article30/gihopo.html
成都網站建設公司_創新互聯,為您提供靜態網站、微信小程序、自適應網站、定制網站、標簽優化、外貿網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯