欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui自定義工具欄的方法

 更新時(shí)間:2019年09月19日 09:36:41   作者:憐眸  
今天小編就為大家分享一篇layui自定義工具欄的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

給大家分享的功能是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)

    本文主要介紹了原生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ù)匯總

    這篇文章主要給大家介紹了一些手寫(xiě)的JavaScript常用的函數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼

    parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼

    本篇文章主要介紹了parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • jquery獲取img的src值的簡(jiǎn)單實(shí)例

    jquery獲取img的src值的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇jquery獲取img的src值的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖

    Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖

    這篇文章主要為大家詳細(xì)介紹了Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-06-06
  • js事件監(jiān)聽(tīng)機(jī)制(事件捕獲)總結(jié)

    js事件監(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-08
  • javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼

    javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼

    下面小編就為大家?guī)?lái)一篇javascript用正則表達(dá)式過(guò)濾空格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06
  • BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)

    BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)

    這篇文章主要介紹了BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-07-07
  • JavaScript實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器

    JavaScript實(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)教程

    超詳細(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

最新評(píng)論