layui自定義工具欄的方法
給大家分享的功能是layui自定義工具欄
功能效果:開(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: '部門(mén)編號(hào)', align: 'center' }, { field: 'Department', title: '部門(mén)名稱', align: 'center' } ]], id: 'table', toolbar: '#toolbarDemo',//開(kāi)啟自定義工具行,指向自定義工具欄模板選擇器 defaultToolbar: ['filter', 'print', 'exports'] }); });
上面的toolbar: '#toolbarDemo'這句代碼是這個(gè)功能的關(guān)鍵代碼
以上這篇layui自定義工具欄的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09一些手寫(xiě)JavaScript常用的函數(shù)匯總
這篇文章主要給大家介紹了一些手寫(xiě)的JavaScript常用的函數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼
本篇文章主要介紹了parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10jquery獲取img的src值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取img的src值的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06js事件監(jiān)聽(tīng)機(jī)制(事件捕獲)總結(jié)
添加事件的js方法也很多,有直接加到頁(yè)面結(jié)構(gòu)上的,有使用一些js事件監(jiān)聽(tīng)的方法,由于各個(gè)瀏覽器對(duì)事件冒泡事件監(jiān)聽(tīng)的機(jī)制不同2014-08-08javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)
這篇文章主要介紹了BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07JavaScript實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個(gè)帶并發(fā)限制的異步調(diào)度器?Scheduler,保證同時(shí)運(yùn)行的任務(wù)最多有N個(gè),感興趣的小伙伴可以了解下2024-03-03超詳細(xì)JavaScript深淺拷貝的實(shí)現(xiàn)教程
淺拷貝是指,一個(gè)新的對(duì)象對(duì)原始對(duì)象的屬性值進(jìn)行精確地拷貝;深拷貝是指,對(duì)于簡(jiǎn)單數(shù)據(jù)類型直接拷貝他的值,對(duì)于引用數(shù)據(jù)類型,在堆內(nèi)存中開(kāi)辟一塊內(nèi)存用于存放復(fù)制的對(duì)象,并把原有的對(duì)象類型數(shù)據(jù)拷貝過(guò)來(lái)。本文將實(shí)現(xiàn)JavaScript深淺拷貝,需要的可以參考一下2022-09-09