Layui前端架構

官網

https://www.layui.com/

datagrid

加序号列

在table.render的cols參數中加序号列

{field: 'rank', title: '序号',width:60, 
   templet: function(d){
      return d.LAY_TABLE_INDEX+1;
}}      

複選框不居中顯示問題

.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}      

擷取所選行指定屬性

擷取datagrid複選框標明行的指定屬性，傳回以逗号分割的字元串屬性。背景可以直接用list或者String[]接收資料.

/**
         * 擷取所選行ids
         * tableidStr dagagridtable的id,例如'dataGridList'
         * idObj 屬性,例如'sysid'
         **/
        function getAllCheck(tableidStr,idObj){
            var ids_arr = [];
            var checkStatus = table.checkStatus(tableidStr);
            var rows = checkStatus.data;
            for(var i in rows){
                ids_arr.push(rows[i][idObj]);  //擷取row[i]資料行的idObj屬性
            }
            var ids_result = ids_arr.join(',');
            return ids_result;
        }      

分頁&條件查詢

先分頁查詢，翻頁後再輸入條件進行查詢，此時查詢條件會把目前頁數給帶過去，一定要把page的目前頁置為1

table.reload('dataGridList', {
                url: "./authrole/getListByPage",
                page:{
                    curr:1
                }
                ,where: {rolename:rolename} 
            });      

form表單

驗證取消必填

需要修改兩個檔案：form.js和layui.all.js

phone:[/(^$)|^1\d{10}$/,'請輸入正确的手機号'],
email:[/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,'郵箱格式不正确'],
url:[/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/,'連結格式不正确'],
number:[/(^$)|^\d+$/,'隻能填寫數字'],
date:[/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,'日期格式不正确'],
identity:[/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/,'請輸入正确的身份證号']

新增部分：(^$)|      

如果該選項為必填：建議使用，lay-verify=“required|number”校驗

button點選頁面重新整理

button在form表單中，點選button會導緻頁面重新整理，需要加上type="button"

<button class="layui-btn ty-btn" type="button" onclick="active()">激活</button>      

下拉框動态資料

html

<select name="type" id="type_up" lay-verify="" lay-verify="">
     <option value="">請選擇</option>
</select>      

js

layui.use('form', function(){
        var form = layui.form;
        $.ax('./setting/selectByExample', {type:'warnconfig_type'}, 'POST', function(data) {
            /*success*/
            var selects='';
            /*周遊資料,生成option選項*/
            for(var i in data){
                var  its='<option value="'+data[i].code+'">'+data[i].value+'</option>';
                selects +=its;
            }
            /*添加到指定的下拉框下面*/
            $("#type_up").append(selects);
            /*渲染*/
            form.render('select')
        }, function(e) {
            /*error*/
        }, false); //同步
    });      

下拉框回顯

/*周遊id為type_up的下拉框,因為隻有一個是以隻執行一次*/
$("#type_up").each(function() {
  /*周遊下拉框下的option子結點*/
    $(this).children("option").each(function() {
      //移除option的selected屬性
        $(this).removeAttr("selected");
        //如果option的value和回顯資料的type值相同
        if (this.value == d.type) {
            //選中下拉框中的值
        $('#type_up').val(d.type);
        }
    });
});

/*渲染下拉框*/
layui.use('form', function(){
    var form = layui.form;
  form.render('select');
});      

下拉框清空

function queryClear(){
            layui.use('form', function(){
                $('#isActiveQuery').val('');  //先設定值
                var form = layui.form;    
                form.render('select'); //重新整理select選擇框渲染
            });
        }      

Radio監控

<div class="layui-form-item">
    <label class="layui-form-label">單選框</label>
    <div class="layui-input-block">
        <input type="radio"  lay-filter="sex" name="sex" value="男" title="男" checked="">
        <input type="radio"  lay-filter="sex" name="sex" value="女" title="女">
        <input type="radio"  lay-filter="sex" name="sex" value="禁" title="禁用" disabled="">
    </div>
</div>      

layui.use(['form', 'layer', 'jquery' ], function () {
            $ = layui.jquery;
            var layer = layui.layer,
                form = layui.form;
                //監聽多選框點選事件  主要是通過 lay-filter="sex"  來監聽
            form.on('radio(sex)', function (data) {
                console.log(data);　　//列印目前選擇的資訊
                if( data.elem.checked){　　　　　　//判斷目前多選框是選中還是取消選中
                    alert('目前選中');
                }else{
                    alert('取消選中')
                }
                var value = data.value;   //  目前選中的value值
            });
        });      

Radio渲染不上去

<div class="layui-input-block">
                    <input type="radio" name="sex_up" value="1" title="男" checked>
                    <input type="radio" name="sex_up" value="0" title="女">
                </div>

                layui.use('form', function(){
                    if(d.sex == 0){
                        $("input[name=sex_up][value='0']").prop("checked", d.sex == 0 ? true : false);
                    }else{
                        $("input[name=sex_up][value='1']").prop("checked", d.sex == 1 ? true : false);
                    }
                    var form = layui.form;
                    form.render("radio"); //更新全部
                });      

CheckBox布局混亂

Checkbox框高度過高

.layui-form-checkbox[lay-skin=primary],.layui-form-checkbox[lay-skin=primary] span{
     max-height: 20px;
}      

Checkbox監控選擇框

在選擇第六個時彈出來最多隻能選擇五個

<input name="roleids[]" lay-filter="checkbox_role-filter" lay-skin="primary" type="checkbox" value="admin1" title="管理者">      

/*lay-filter='checkbox_role-filter'的複選框*/
          form.on('checkbox(checkbox_role-filter)',function(data){
            console.log(data);
            if ($("input[lay-filter='checkbox_role-filter']:checked").length>5){
                //将選中的全部取消
                //$("input[lay-filter='checkbox_role-filter']:checked").removeAttr("checked");
                //$(this).checked = false;
                $(this).prop("checked", false); 
                form.render('checkbox'); 
                layer.msg("最多隻能選擇5個标簽", {
                    time : 3000,
                    icon : 10 
                });
            }
          });      

Checkbox擷取值

//擷取checkbox[lay-filter='checkbox_role-filter']的值,ssm可以直接用String[]接收
            var arr = new Array();
            $("input[lay-filter='checkbox_role-filter']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            var roleids = arr.join(',');      

動态添加Checkbox

//所有角色複選框
            $.ajax({
                url: "./authrole/selectByExample"
                    , data: {}
                    , type: "post"
                    , dataType: "json"
                    , success: function (data) {
                        var str = '';
                        $.each(data, function (index, role) {
                            str +='<input name="roleids[]" lay-filter="checkbox_role-filter" lay-skin="primary" type="checkbox" value="'+role.id+'" title="'+role.rolename+'">';
                        });
                        //放入html中
                        $('#rolesCheckboxDiv').html(str);
                        //渲染表單
                        layui.use('form', function(){
                            var form = layui.form;
                            form.render("checkbox"); //渲染checkbox
                        });
                    }
                    ,error:function(e){
                        layer.alert("請求失敗",{title:'提示',icon: 2});
                    }
            });      

switch控件

datagrid中switch控件

//動态添加switch
    templet: function(d){
         if(d.isActive == 0)
               return '<input type="checkbox" value="'+d.groupid+'" lay-text="啟用|停用" lay-filter="switchFilter" name="switch" lay-skin="switch">';
         if(d.isActive == 1)
            return '<input type="checkbox" value="'+d.groupid+'" checked="" lay-text="啟用|停用" lay-filter="switchFilter" name="switch" lay-skin="switch">';
    }

        //switch事件監控
        layui.use(['form'], function(){
            var form = layui.form
                ,layer = layui.layer
            //監聽switchFilter開關
            form.on('switch(switchFilter)', function(data){  //data為switch控件,用控件的value屬性傳值;
                var groupid = data.value;
                var isActive = '';
                console.info();
                if(this.checked){
                    isActive = '1';
                    //layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), {offset: '6px'});
                    //layer.tips('溫馨提示：開關狀态的文字可以随意定義，而不僅僅是ON|OFF', data.othis)
                }else{
                    isActive = '0';
                    //layer.msg('開關： 關掉了', {offset: '6px'});
                }

                //do some ajax opeartiopns;
                $.ax('./group/switchAcitve', {groupid:groupid,isActive:isActive}, 'POST', function(data) {
                    if (data.code == "success") {
                        layer.msg(data.msg, {offset: '6px'});
                    }else {
                        layer.alert(data.msg,{title:'提示',icon: 2});
                    }
                }, function(e) {
                    layer.alert('出問題啦~請稍後再試~',{title:'提示',icon: 2});
                }, false);

            });
        });      

ajax送出switch控件

if($('#ispub_add').is(':checked')) {
   ispub_add = "1";
}else{
   ispub_add = "0";
}      

表單送出擷取不到字段

<c:choose>
     <c:when test="${order.repstate == 1}">
         <form class="layui-form" id="repForm1">
               <div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formRepFilter">立即送出</button></div>
         </form>
     </c:when>
     <c:when test="${order.repstate <= 2}">
         <form class="layui-form" id="repForm2">
         </form>
     </c:when>
     <c:otherwise></c:otherwise>
</c:choose>      

多個form表單寫在jstl标簽裡面，保證伺服器渲染後在浏覽器端隻有一個form标簽。這種情況下可以用

layui.use('form', function(){
    var form = layui.form;
    form.on('submit(formRepFilter)', function(data){
        console.info(data.field);
    });
});      

如果一個界面必須同時出現多個form标簽，那就隻能用單擊事件觸發serialize();

$('#form').serialize();      

頁籤

<script>
        //注意：頁籤 依賴 element 子產品，否則無法進行功能性操作
        layui.use('element', function () {
            var element = layui.element;
            element.on('tab(tab_box)', function (data) {
                console.log(data);
                if(data.index == 0 || data.index == 1 || data.index == 2){
                    //index表示頁籤下标
                    $(document).resize()
                }
            });
        });
</script>

<div class="layui-tab layui-tab-brief" lay-filter="tab_box">
  <ul class="layui-tab-title">
    <li class="layui-this">網站設定</li>
    <li>使用者管理</li>
    <li>權限配置設定</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
  </div>
</div>        

關閉目前tab頁面

//跳轉到其他界面
        window.location.href = "${liveurl}";
        //關閉目前視窗
        var lay_id = $(".layui-tab-title .layui-this",parent.document).find('.layui-tab-close').click();      

點選左側菜單中間出現對應頁面

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">-->
      <ul class="layui-nav layui-nav-tree site-demo-nav main_left" lay-filter="side">
                        <li class="layui-nav-item">
                            <a class="javascript:;" href="javascript:;">
                                <i class="layui-icon" style="top: 3px;">&#xe614;</i><cite>系統管理</cite>
                            </a>
                            <dl class="layui-nav-child">
                                <dd class="">
                                    <a _href="./userinfo/i">
                                        <cite>系統使用者</cite>
                                    </a>
                                </dd>
                                <dd class="">
                                    <a href="javascript:;" _href="./system/pingtai.html">
                                        <cite>平台配置</cite>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a class="javascript:;" href="javascript:;" _href="./audit.html">
                                <i class="layui-icon" style="top: 3px;">&#xe63c;</i><cite>審計管理</cite>
                            </a>
                        </li>
       </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主體區域 -->
    <iframe frameborder="0" scrolling="yes" style="width:100%;height:100%" src="" id="lay-content"></iframe>
  </div>      

$(function(){
   $(".main_left li a").on("click",function(){
      var address =$(this).attr("_href");
      $("#lay-content").attr("src",address);
   });
});      

也可以用開源架構x-admin

Layui樹

一定要用layui2.5.5+，否則顯示不出來

//初始化
    layui.use('tree', function(){
        tree = layui.tree;
        getTreeData();
    });
    /*擷取樹*/
    function getTreeData() {
        $.ajax({
            url: "./permission/selectPermissionTree"
            , data: {}
            , type: "post"
            , dataType: "json"
            , success: function (data) {
                tree.render({
                    elem: '#permissiontree'
                    ,data: data
                    ,edit: ['add', 'update', 'del'] //操作節點的圖示
                    ,click: function(obj){
                        var data = obj.data;
                        $('#moduleid').val(data.id);
                        $('#modulename').val(data.title);
                        $('#path').val(data.href);
                        $('#ordernumber').val(data.ordernumber);

                        layui.use('form', function() {
                            var form = layui.form;
                            //監聽修改送出
                            form.on('submit(formEdit)', function(data){
                                $.ajax({
                                    url: "./permission/updateByPrimaryKeySelective"
                                    , data: data.field
                                    , type: "post"
                                    , dataType: "json"
                                    , success: function (data) {
                                        if (data.code == "success") {
                                            layer.alert(data.msg,{title:'提示',icon: 1},function(index){
                                                layer.close(index);
                                                getTreeData();
                                            });
                                        }else {
                                            layer.alert(data.msg,{title:'提示',icon: 2});
                                        }
                                    }
                                });
                                return false;
                            });
                        });
                    }
                    ,operate: function(obj){
                        var type = obj.type; //得到操作類型：add、edit、del
                        var data = obj.data; //得到目前節點的資料
                        var elem = obj.elem; //得到目前節點元素

                        if(type === 'add'){ //增加節點
                            add(data);
                        } else if(type === 'update'){ //修改節點
                            rename(data);
                        } else if(type === 'del'){ //删除節點
                            del(data.id);
                        }
                    }
                });
            }

        });
    }      

樹複選框回顯

在添加時一定隻添加葉子結點，回顯時才不會因為把父節點設定選中導緻整個子樹都選中。

添加時值添加子結點toListDF方法是關鍵。

/**
     * 配置權限
     */
    function allotPermission() {
        var checkData = tree.getChecked('permissiontreeID');
        var modultlist = treeToList(checkData);
        var roleid = $('#roleid_permission').val();

        var data = {moduleids:modultlist.join(','),roleId:roleid};
        $.ax('./permission/addmodulejoinrole', data, 'POST', function(data) {
            if (data.code == "success") {
                layer.alert(data.msg,{title:'提示',icon: 1},function(index){
                    layer.close(index);
                    layer.close(allotLayer);
                    //getTreeData();  //重新整理樹
                });
            }else {
                layer.alert(data.msg,{title:'提示',icon: 2});
                getTreeData();  //重新整理樹
            }
        }, function(e) {
            layer.alert('出問題啦~請稍後再試~',{title:'提示',icon: 2});
            getTreeData();  //重新整理樹
        }, false);
    }

    /**
     * 樹轉list
     */
    function treeToList(tree){
        for(var i in tree){  //周遊樹的第一層,隻有一個根結點
            var node = tree[i];
            list = [];  //結果lsit
            if (node.children.length !== 0) { //第一層加入到list中,因為根結點子產品設定為虛拟結點,是以不用加入
                /*list.push(node.id);*/
                toListDF(node.children, list, node.id);  //周遊子樹,并加入到list中.
            }
        }
        return list;
    }

    /**
     * 深度優先周遊樹
     * 一個遞歸方法
     * @params tree:要轉換的樹結構資料
     * @params list:儲存結果的清單結構資料，初始傳list = []
     * @params parentId:目前周遊節點的父級節點id，初始為null(因為根節點無parentId)
     **/
    function toListDF (tree, list, parentId) {
        for (var i in tree) { //周遊最上層
            //将目前樹放入list中
            var node = tree[i];
            //如果有子結點,再周遊子結點
            if (node.children.length !== 0) {
                toListDF(node.children, list, node.id)  //遞歸
            }else {
                list.push(node.id);
            }
        }
    }      

富文本框

https://www.layui.com/doc/modules/layedit.html

<textarea id="layedit" style="display: none;"></textarea>      

/*建構富文本編輯器*/
            layui.use('layedit', function(){
                var layedit = layui.layedit;

                //建構一個預設的編輯器
                layedit_up_index = layedit.build('content_up',
                    {tool:['strong' //加粗
                        , 'italic' //斜體
                        , 'underline' //下劃線
                        , 'del' //删除線
                        , '|' //分割線
                        , 'left' //左對齊
                        , 'center' //居中對齊
                        , 'right' //右對齊
                        , 'link' //超連結
                        , 'unlink' //清除連結
                    ]
                    });
            });      

在彈框中建構富文本編輯器時，要先彈出再建構。

自動填充插件

autocomplete

HTML代碼

<input type="text" name="type" id="typeQuery" autocomplete="off" class="layui-input" placeholder="請輸入類型,格式:表名_字段名">      

JS代碼

/*引入樣式*/
layui.link('./asset/layui2.5.5/extra/autocomplete.css');

/*配置第三方庫*/
layui.config({
    version: false,
    debug: false,
    base: './asset/layui2.5.5/extra/'
});

/*使用autocomplete*/
layui.use(['jquery', 'autocomplete'], function () {
    var $ = layui.jquery,
        autocomplete = layui.autocomplete;
    autocomplete.render({
        elem: $('#typeQuery')[0],
        url: './setting/getSettingType',
        template_val: '{{d.type}}',
        template_txt: '{{d.type}} <span class=\'layui-badge layui-bg-gray\'>{{d.remark}}</span>',
        onselect: function (resp) {

        }
    });
});      

資料格式

資料清單要放在data中,code要為0

成果

插件

excel.js

自動把excel檔案讀取到記憶體中，存儲為對象數組。需要轉換為json格式的字元串以application/json傳輸到背景。

引入layui_exts/excel.js

Html代碼

<input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple">      

$(function() {
        // 監聽上傳檔案的事件
        $('#LAY-excel-import-excel').change(function (e) {
            var files = e.target.files;
            try {
                // 方式一：先讀取資料，後梳理資料
                LAY_EXCEL.importExcel(files, {}, function (data) {
                    data = LAY_EXCEL.filterImportData(data,{
                        'name': 'A'
                        /*,'date': function (v, item, data, rowIndex, newFieldName) {
                            if (rowIndex == 0) {
                                // 直接調用輔助方法格式化，也可以轉換為 Date 對象後自行處理
                                return LAY_EXCEL.dateCodeFormat(item['B'], 'YYYY-MM-DD HH:ii:ss')
                            } else {
                                return item['B'];
                            }
                        }*/
                        , 'phone': 'B'
                        , 'facultyName': 'C'
                        , 'className': 'D'
                    })
                    var teacherData = data[0].Sheet1;
                    if(teacherData[0].name.indexOf('教師') != -1 && teacherData[1].name == '教師姓名'){
                        teacherData.splice(0,2);   //删除前兩項
                    }else{
                        layer.alert("模闆不符合要求,請重新下載下傳模闆!");
                    }
                    var teacherjsonData = JSON.stringify(teacherData);
                    $('#teacherjsonData').val(teacherjsonData);
                    //console.log($('#teacherjsonData').val());
                });
            } catch (e) {
                layer.alert(e.message);
            }
        });
    });      

用application/json格式上傳資料

layui.use('form', function(){
        var form = layui.form;
        //監聽修改送出
        form.on('submit(formUpload)', function(data){

            layer.confirm('确認導入教師資訊嗎?', {icon: 3, title:'提示'}, function(index){
                var teachers = $('#teacherjsonData').val();

                if(teachers==null||teachers==''){
                    layer.alert('上傳内容為空!',{title:'提示',icon: 2});
                }

                $.ajax({
                    url: "../../back/teacherManager/addBatch"
                    , data: teachers
                    , contentType: "application/json;charset=UTF-8"
                    , type: "post"
                    , dataType: "json"
                    , success: function (data) {
                        if (data.code == "success") {
                            layer.alert(data.msg,{title:'提示',icon: 1},function(index){
                                layer.close(editLayer);
                                layer.close(index);
                                layui.form.render();
                                table.reload('teacherInfoList', {
                                    url: "../../back/teacherManager/getAllTeacher"
                                    //,where: {} //設定異步資料接口的額外參數
                                });
                            });
                            $("#form_upload")[0].reset();
                        }else {
                            layer.alert(data.msg,{title:'提示',icon: 2});
                        }
                    }
                });
            });
            return false;
        });
    });      

發送資料内容如下：

X-admin

重新整理後tab頁依然存在的問題。x-admin把tab的清單放入localstorage中，重新整理時把localstorage清除即可。

$(function () {
            /*清除localstorage的内容*/
            var storage=window.localStorage;
            storage.clear();
        });      

iframe頁打開新的tab頁

首先檢視iframe外部打開新的tab頁的js代碼。

window.parent.xadmin.add_tab(rowdata.projectName+"收款合同",'./cont_receive/redirect?projectid='+rowdata.id,true);