layui问题总结

1.tabel表格日期格式化

, {field: 'departureDte', title: '开航日期',width: 210, sort: true, align: 'center',templet: function (d) {
                        if (d != null) {
                            return new Date(d.departureDte).format("yyyy-MM-dd hh:mm");
                        }
                        }}

2.单元格显示日期:

 <table id="formTwo" lay-filter="formTwo" class="layui-hide">  </table>
var tbWidth = $("#formTwo").width();
        var dataTableTwo = table.render({
            elem: '#formTwo'
            , size: 'lg'
            , title: '挂岗维护'
            , width: tbWidth
            ,data:[]
            , cols: [[
                {type: 'checkbox'}
                , {field: 'voyageportid',  title: 'voyageportid', hide:'true'}
                , {field: 'portCod', width: 150, align: 'center', title: '港口代码',templet: '#portCod'}
                , {field: 'ePortNam', width: 150, align: 'center', title: '港口英文',edit: 'text'}
                , {field: 'arrivedate', width: 180, align: 'center', title: '抵港时间',event:'date',edit: 'text'}
                , {field: 'recNam',width: 150,align: 'center',title: '操作人', },

            ]]

            , done: function (res, curr, count) {
                formTwoRender()
            }
        });

        //监听单元格编辑 
        table.on('tool(formTwo)', function (obj) {
          //限制单元格输入小写字母转化大写字母
            switch (obj.event) {
                case "upper":
                    $(obj.tr).find(".layui-table-edit").keyup(function () {
                        var $input = $(this), val = $input.val();
                        $input.val(val.toUpperCase());
                    });
                    break;
            }
           //单元格显示日期形式
            var newdata = {};
            if (obj.event === 'date') {
                var field = $(this).data('field');
                laydate.render({
                    elem: this.firstChild
                    , show: true //直接显示
                    , closeStop: this
                    , type: 'datetime'
                    , format: "yyyy-MM-dd HH:mm"
                    , done: function (value, date) {
                        newdata[field] = value;
                        obj.update(newdata);
                    }
                });
            }
        })

//监听行双击事件
            table.on('rowDouble(up1)', function(obj){
                var data = obj.data;
                var carrierCod = data.carrierCod;
                $("#carrier").val(carrierCod);
                layer.close(peop);
                //打开新增页面
                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });

单元格限制格式:

var tbWidth = $("#formOne").width();
        var dataTableOne = table.render({
            elem: '#formOne'
            , size: 'lg'
            , title: '用箱计划'
            ,width:tbWidth
            ,data:[]
            , cols: [[
                {type:'checkbox'}
                , {field: 'plankey', width: 120, align: 'center',hide:'true', title: 'plankey'}
                , {field: 'seqNo', width: 160,type:'text', align: 'center', title: '序号',edit: 'text',event:'num'}
                , {field: 'ctnMaster', width: 170, align: 'center', title: '箱主代码',templet:'#cntrdb'}
                , {field: 'ctnSize', width: 170, align: 'center', title: '尺码',templet: '#sizeSelTpl'}
                , {field: 'ctnType', width: 170, align: 'center', title: '箱型 ',templet: '#typSelTpl'}
                , {field: 'ctnNum',width: 170,align: 'center',title: '箱量',edit: 'text',event:'num'}
                , {field: 'weightlimit', width: 167, align: 'center', title: '限重',edit: 'text',event:'num'}
            ]]
            , page: false
        });

        //监听行单击事件
        table.on('row(formOne)', function(obj){
            var data = obj.data;
            delId= data.id;
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        //限制单元格输入为数字
        table.on('tool(formOne)', function(d) {
                switch (d.event) {
                    case "num":
                        $(d.tr).find(".layui-table-edit").keyup(function () {
                            var $input = $(this), val = $input.val();
                            if (!val) val = "1";
                            $input.val(val.replace(/[^\d]/g, ''));
                        });
                        break;
                }
            });

 

增删改查demo:

 

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/base.jsp" %>
<%@ page import="net.huadong.util.HdUtil" %>
<!DOCTYPE html>
<html>
<head>
    <base href="${ctx}">
    <title>航次维护</title>
    <script src="${ctx}/js/jquery.min.js"></script>
    <script src="${ctx}/js/jquery.form.min.js"></script>
    <script src="${ctx}/js/HdUtil.js"></script>
    <script src="${ctx}/layui/layui.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/layui/css/admin.css" media="all">

</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchDiv">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 125px" >按开航时间搜索：</label>
                    <div class="layui-inline" style="width: 95px">
                        <input class="layui-input" type="text" name="id" id="beginDate" lay-verify="date">
                    </div>
                    --
                    <div class="layui-inline" style="width: 95px">
                        <input class="layui-input" type="text" name="id" id="endDate" lay-verify="date">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit id="searchBtn"
                            onclick="search()" lay-filter="LAY-app-contlist-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>

                </div>

                <div class="layui-inline">
                    <shiro:hasPermission name="VoyageMaintain:add">
                        <button  class="layui-btn" id="addBtn" type="button">增加</button>
                    </shiro:hasPermission>
                </div>
                <div class="layui-inline">
                    <shiro:hasPermission name="VoyageMaintain:delete">
                        <button id="delete" class="layui-btn" type="button">删除</button>
                    </shiro:hasPermission>
                </div>
                <div class="layui-inline">
                    <shiro:hasPermission name="VoyageMaintain:edit">
                        <button class="layui-btn" id="edit">
                            <i class="layui-icon"></i>编辑
                        </button>
                    </shiro:hasPermission>

                </div>
                <div class="layui-inline">
                        <button id="voyage" class="layui-btn"  type="button">下载航次</button>
                </div>
                <%--<div class="layui-inline">--%>
                    <%--<button id="1" class="layui-btn"  type="button">下载运抵信息</button>--%>
                <%--</div>--%>
                <div class="layui-inline">
                    <shiro:hasPermission name="VoyageMaintain:export">
                        <button id="release_info" class="layui-btn"  type="button">下载放行信息</button>
                    </shiro:hasPermission>
                </div>
                <div class="layui-inline">
                    <shiro:hasPermission name="VoyageMaintain:export">
                    <button id="box_plan" class="layui-btn"  type="button">配箱计划通知单</button>
                    </shiro:hasPermission>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="tallyCargoTable" lay-filter="power" class="layui-hide" lay-data="{id: 'tallyCargoTable'}">
            </table>
        </div>

    </div>
</div>
<%--新增--%>
<div id="add" style="display: none">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="bg" lay-filter="test" id="test">
                <form class="layui-form" lay-filter="basicForm" id="basicForm" action="">
                    <input type="hidden" name="id" id="id" value="">
                    <input name="voyageNo" id="voyageNo" value="" type="hidden"/>
                    <input name="platformCod" value="" type="hidden"/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:75px;color: red">码头代码</label>
                            <div class="layui-input-block" style="width: 140px">
                                <select name="termCod" id="termCod1" lay-search lay-filter="termCod1" lay-verify="required">
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" >英文船名</label>
                            <div class="layui-input-block" style="width: 140px">
                                <select name="vesselnameEn" id="vesselnameEn" lay-filter="vesselnameEn" onchange="sele(this)">
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" >中文船名</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input type="text" name="vesselnameCn" id="vesselnameCn" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" >IMO</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input type="text" name="imo" id="imo" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"style="width:75px;" >进口航次</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input type="text" name="iVoyage" id="ivoyage" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:75px;" >出口航次</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input type="text" name="eVoyage" id="evoyage" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <label class="layui-form-label" style="color: red">开航日期</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input class="layui-input" type="text" name="departureDte" id="departureDte" style="width: 142px"
                                       autocomplete="off"     placeholder="yyyy-MM-dd HH:mm"   >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="color: red;">装船时间</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input class="layui-input" type="text" name="loadingDte" id="loadingDte"style="width: 142px"
                                       autocomplete="off"        placeholder="yyyy-MM-dd HH:mm" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">载货重量</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input type="number" name="weighttonnage" id="weighttonnage" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">TEU总数</label>
                            <div class="layui-input-block" style="width: 140px">
                                <input type="number"