layui common

最新推荐文章于 2025-07-29 10:11:18 发布

丑心疼

最新推荐文章于 2025-07-29 10:11:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/albert-think/p/10401867.html

一、

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


<!-- 获取绝对路径 -->

<c:set var="ctx" value="${pageContext.request.contextPath}" scope="session"></c:set>
<link rel="stylesheet" href="${ctx}/css/font.css">
<link rel="stylesheet" href="${ctx}/css/xadmin.css">
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script src="${ctx}/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/js/xadmin.js"></script>

<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
<input id="way" type="hidden" value="${sessionScope.way}" />

二、

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page import="java.util.Date" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>待办</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <jsp:include page="common.jsp"/>
</head>
<body>
<!--
<div class="x-body">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
-->
<table class="layui-hide" id="LAY_table_user" lay-filter="list"></table>
<script type="text/html" id="barDemo">
    <div class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" style="display: none">详细</div>
    <div class="layui-btn layui-btn-xs" lay-event="splogs" style="display: none">审批记录</div>
    <div class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="shengpi">审批</div>
</script>
<script src="${ctx}/js/common.js?time=<%=new Date().getTime() %>"></script>
<script src="${ctx}/js/pending-order.js?time=<%=new Date().getTime() %>"></script>
</body>
</html>

三、


layui.use('table', function () {
    var table = layui.table;
    var $ = layui.$;
    //方法级渲染
    table.render({
        elem: '#LAY_table_user'
        , url: $("#PageContext").val() + '/pending?status=W'
       , cols: [[
            {field: 'no', title: '单号', width: 120, fixed: true}
            , {field: 'subject', title: '主题', width: 600}
            , {field: 'inTime', title: '时间', width: 180,templet:'<div>{{ Format(d.inTime,"yyyy-M-d h:m:s")}}</div>'}
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:80}
        ]]
        , id: 'testReload'
       // , page: true
        , height:500
    });
    active = {
        reload: function () {
            var demoReload = $('#demoReload');

            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    key: demoReload.val()
                }
            });
        }
    };

    $('.x-body .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    table.on('tool(list)', function(obj){
        var data = obj.data;
        if(obj.event === 'shengpi'){
            layer.open({
                type: 2,
                title:'审批信息',
                area: ['900px', '540px'],
                fixed: false, //不固定
                zIndex: layer.zIndex,  //重点1
                maxmin: true,
                shade:0 ,
                content: $("#PageContext").val() +'/approveOrder?no='+data.no+"&id="+data.id,
                end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                    //location.reload();　　//layer.open关闭刷新
                } ,success: function(layero){
                    layer.setTop(layero); //重点2
                }
            });
        } else if(obj.event === 'detail'){
            layer.open({
                type: 2
                ,title:'详细信息'
                ,area: ['900px', '550px']
                ,fixed: false //不固定
                ,maxmin: true
                ,content: $("#PageContext").val() +'/orderDetailPage?no='+data.no
            });
        } else if(obj.event === 'splogs'){
            layer.open({
                type: 2
                ,title:'审批记录'
                ,area: ['1000px', '550px']
                ,fixed: false //不固定
                ,maxmin: true
                ,shade:0
                ,content: $("#PageContext").val() +'/logsPage?no='+data.no
            });
        }
    });
});