layui 搭建页面

最新推荐文章于 2024-08-03 20:16:26 发布

羽下佳人

最新推荐文章于 2024-08-03 20:16:26 发布

阅读量7.3k

点赞数 3

分类专栏： js框架 - layUi

本文链接：https://blog.csdn.net/zjl199303/article/details/94594422

版权

实现需求：
1.tab页切换
2.详情：弹出弹层，仅展示内容，不能编辑
3.更新：切换到案件录入数据填入，实现部分内容的编辑
4.案件录入：点击实现新案件的创建

项目目录：https://github.com/zjl9339/web/tree/layui

一.首页搭建

1.index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>案件管理系统</title>
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="header"></div>
        <div class="left"></div>
        <!-- 内容主体区域 -->
        <div class="layui-body layui-body-case-ipt">
            <div class="layui-tab" lay-filter="tab">
                <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">
                        <iframe src="iframe_case.html" id="iframe" name="iframe" frameborder="0"></iframe>
                    </div>
                    <div class="layui-tab-item">
                        <table id="tableUnfinsh" lay-filter="table"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="tableFinsh" lay-filter="table"></table>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <script src="../js/layui/layui.js"></script>
    <script src="../js/common/common.js"></script>
    <script src="../js/common/base.js"></script>
    <script src="../js/index.js"></script>
</body>
</html>

2.index.js

var winH = window.innerHeight;
var table_h = winH - 60 - 15*2  - 51;
var pageSize = parseInt((table_h - 10 - 37 - 41 )/37);


layui.use(['jquery','layer','element','form','table','laydate'], function(exports){
    var $ = layui.jquery,
        layer = layui.layer,
        element = layui.element,
        form = layui.form,
        table = layui.table,
        laydate = layui.laydate,
        base = layui.base;
    base.init($,0,0,element);
    
    init($, form);
    var insUnfish = creatUnfinshTable(table);
    var insFish = creatFinshTable(table);
    pageEvent($,layer,element,form,table,laydate);
});


function init($, form){
    setTimeout(function(){
        var data = $("#data").val();
        data = data ? JSON.parse($("#data").val()) : data;
        form.val("formRole", data);
    },500)