java ，用公司框架寫的顯示列表 Table控件

時間 2019-12-12

標籤 java 公司框架寫的顯示列表 table 控件欄目 Java 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" lang="en"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>預算彙總</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../Styles/themes/default/style.css" media="all">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="/Scripts/libs/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"/>
    <script th:src="@{/Scripts/jquery-1.9.0.min.js}" charset="utf-8"></script>
    <script th:src="@{/Scripts/date2format.js}" charset="utf-8"></script>
    <script src="/Scripts/libs/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script src="../../../Scripts/main.js" charset="utf-8"></script>
    <script src="../../../Scripts/module/eui.js" charset="utf-8"></script>
    <script src="../../../Scripts/main.js" charset="utf-8"></script>
    <script th:src="@{/Scripts/plugins/jquery.validate.js}"></script>
    <script th:src="@{/Scripts/pack.ajax.js}" charset="utf-8"></script>
</head>
<body>
<!--導入彈框-->
<div class="eui-form" id="openExcel" align="center" style="display: none;margin-top: 20px;">
    <!--<a onclick="dowloadTemp()" class="eui-btn  eui-btn-primary">下載模版</a>-->
    <div class="eui-col-6" style="padding-left:0px;">
        <form enctype="multipart/form-data" id="batchUpload"  action="" method="post" style="padding-left:0px;">
            <!--<button class="btn btn-success btn-xs" id="uploadEventBtn" style="height:26px;"  type="button" >選擇文件</button>-->
            <button type="button" class="eui-btn eui-btn-normal" id="uploadEventBtn">選擇文件</button>
            <input type="file" name="file"  style="width:0px;height:0px;" id="uploadEventFile">
            <input id="uploadEventPath"  disabled="disabled"  type="text" placeholder="請選擇excel表" style="border: 1px solid #e6e6e6; height: 26px;width: 200px;" >
            <button type="button" class="eui-btn" onclick="uploadBtn()" >開始上傳</button>
        </form>
        <!--<button type="button"   onclick="uploadBtn()" >上傳</button>-->

    </div>
</div>
<div class="eui-bg-lightGray">
    <!--搜索開始-->
    <from id="alloteSearch">
        <blockquote class="eui-elem-quote eui-quote-search eui-form">
            <div class="eui-form-item">
                <label class="eui-form-label">預算年度：</label>
                <div class="eui-input-inline">
                    <input type="text" name="budgetyear" placeholder="請輸入年度" class="eui-input">
                </div>
                <label class="eui-form-label">預算版本：</label>
                <div class="eui-input-inline">
                    <input type="text" name="budgetname" placeholder="請輸入版本" class="eui-input">
                </div>
                <div class="eui-input-inline">
                    <span class="eui-btn"  onclick="doSearch()">查詢</span>
                    <span class="eui-btn eui-btn-primary"  onclick="resetForm()">重置</span>
                </div>
            </div>
        </blockquote>
    </from>
    <!--搜索結束-->

    <!--列表顯示開始-->
    <div class="eui-row eui-padding10 eui-borderB">
        <div class="eui-col-md6 eui-font18">
            <i class='eui-icon eui-font24'>&#xe61d;</i> 固定預算管理
        </div>
        <div class="eui-col-md6 eui-textAlignR">
            <a href="###" class="eui-btn eui-btn-small" onclick="Export()"><i class="eui-icon" >&#xe7fb;</i>模板下載</a>
            <a class="eui-btn eui-btn-small" id="Import2" onclick="openExcel(1)"><i class="eui-icon">&#xe67c;</i>預算導入</a>
            <a class="eui-btn eui-btn-small" id="Import" onclick="openExcel(2)"><i class="eui-icon">&#xe67c;</i>轉結導入</a>
        </div>
    </div>
    <div class="eui-row eui-paddingLR10">
        <div class="eui-col-md12">
            <div class="eui-form">
                <table class="eui-table" id="versionList" e-filter="versionList"></table>
            </div>
        </div>
    </div>
    <!--列表顯示結束-->
</div>
<!--查詢條件結束-->

<script type="text/html" id="barNotice">
    <a class="eui-btn eui-btn-mini" e-event="detail">查看詳情</a>
</script>

<script>
    $("#uploadEventBtn").unbind("click").bind("click",function(){
        $("#uploadEventFile").click();
    });
    $("#uploadEventFile").bind("change",function(){
        $("#uploadEventPath").attr("value",$("#uploadEventFile").val());
    });
    //打開上傳模態框
    var types;
    function openExcel(type) {
        types=type;
        eui.use(['layer', 'form'], function () {
            var form = eui.form, layer = eui.layer;
            layer.open({
                title: '選擇處置類型',
                type: 1,
                content: $('#openExcel'),
                move: false,//禁止拖拽
                shade: [0.3, '#f8f8f8'],//遮罩
                area: ['560px', '240px'],
                btnAlign: 'c',
                 btn: [ '取消'],
                btn2: function (index, layero) {
                    layer.closeAll();
                }
            });
        });
    }




    //導出數據
    function  Export() {
        window.open("/Summary/excelExport");

    }


    //點擊上傳按鈕事件
    function uploadBtn() {
        var uploadEventFile = $("#uploadEventFile").val();
        if(uploadEventFile == ''){
            layer.msg("請選擇excel,再上傳");
        }else if(uploadEventFile.lastIndexOf(".xls")<0){//可判斷以.xls和.xlsx結尾的excel
            layer.msg("只能上傳Excel文件");
        }else{
            var url;
            if(types=="2"){
                url=  '/Summary/Transfer';
            }else{
                url=  '/Summary/Budget';
            }
            var formData = new FormData($('form')[0]);
            sendAjaxRequest(url,'POST',formData);
        }
    }

    function sendAjaxRequest(url,type,data) {
        eui.use(["layer"],function () {
            var layer = eui.layer;
            $.ajax({
                url : url,
                type : type,
                dataType:"json",
                data : data,
                success : function(result) {
                    if(result.errorMsg==""){
                        layer.msg("上傳成功!");
                       setTimeout("layer.closeAll()",1000)
                    }

                    doSearch();
                },
                error : function() {
                    layer.msg( "excel上傳失敗");
                },
                cache : false,
                contentType : false,
                processData : false
            });
        });
    }

    // ****************************************************************************

    $(function () {
        doSearch();
    });

    function doSearch() {
        var params = $('#alloteSearch').serializeObject();
        params.budgetyear = $('[name="budgetyear"]').val();
        params.budgetname = $('[name="budgetname"]').val();
        //表單
        eui.use(['form', 'layedit', 'laydate', 'table', 'element'], function () {
            var form = eui.form
                , layer = eui.layer
                , layedit = eui.layedit
                , laydate = eui.laydate
                , element = eui.element
                ,table = eui.table;

            table.render({
                id: 'versionId',
                elem: '#versionList'
                // , height: 475
                , url: '/Summary/AllVersion?budgetyear' //數據接口
                , method: 'post'
                ,where:{params:JSON.stringify(params)}
                , cols: [[ //表頭
                    {checkbox: true, fixed: 'left'}
                   , {field: 'num', title: '序號', width: 80, sort: true}
                    , {field: 'VERSION_CODE', title: '版本號', width: 200, sort: true}
                    , {field: 'BUDGET_YEAR', title: '預算年度', width: 200}
                    // , {field: 'BUDGET_NAME', title: '預算名稱', width: 200}
                    // , {field: 'UPDATE_DETAIL', title: '修改記錄', width: 200}
                    , {field: 'IS_LATEST', title: '是否最新', width: 200}
                    // , {field: 'IS_FINAL', title: '是否最終', width: 200}
                    , {field: 'CREATE_TIME', title: '建立時間', width: 200, sort: true, templet: '<div>{{new Date(d.CREATE_TIME).Format("yyyy-MM-dd hh:mm:ss")}}</div>'}
                    , {fixed: 'right', title: '操做', width: 125, toolbar: '#barNotice',right:true}
                ]]
                , response: {
                    statusName: 'code' //數據狀態的字段名稱，默認：code
                    , statusCode: 200 //成功的狀態碼，默認：0
                    , msgName: 'message' //狀態信息的字段名稱，默認：msg
                    , countName: 'count' //數據總數的字段名稱，默認：count
                    , dataName: 'data' //數據列表的字段名稱，默認：data
                }
                , skin: 'row' //表格風格
                 , even: true
                , loading: true
                , page: true //是否顯示分頁
                , limits: [10, 20, 30]
                , limit: 10 //每頁默認顯示的數量
                , done: function (res, curr, count) {

                }
            });

            //監聽工具條
            table.on('tool(versionId)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
                var data = obj.data; //得到當前行數據
                var layEvent = obj.event; //得到 lay-event 對應的值（也能夠是表頭的 event 參數對應的值）
                var tr = obj.tr; //得到當前行 tr 的DOM對象

                if (layEvent === 'detail') { //查看
                    window.open('/Summary/Details?VersionID='+data.ID_);
                }
            });
        });
    }

        // function versionDetail(VersionID) {
        //     layer.open({
        //         type: 2 //此處以iframe舉例
        //         ,title: '版本明細'
        //         ,area: ['100%', '100%']
        //         ,shade: 0
        //         ,maxmin: true
        //         ,content: '/Summary/Details?VersionID='+VersionID
        //         //,data:{VersionID:VersionID}
        //         //,btn: ['確認', '關閉'] //只是爲了演示
        //         ,yes: function(){
        //             layer.msg("這裏是確認操做!");
        //         }
        //         ,btn2: function(){
        //             layer.closeAll();
        //         }
        //
        //         ,zIndex: layer.zIndex //重點1
        //         ,success: function(layero){
        //             layer.setTop(layero); //重點2
        //         }
        //     });
        // }

</script>
</body>
</html>

以上是前端代碼：界面效果以下javascript

控制器：css

    //查詢全部預算版本
    @RequestMapping(value = "/AllVersion",method =RequestMethod.POST)
    @ResponseBody
    public Result AllVersion(Integer page,Integer limit,String params)
    {
        Map<String,Object> map=JSON.parseObject(params,Map.class);
        List<Map<String,Object>> VersionList=budgetVersionService.findVersionMapList(map,page,limit);
        PageInfo pageInfo=new PageInfo(VersionList);
        return ResultGenerator.genSuccessResult(pageInfo.getList()).setCount(pageInfo.getTotal()).setCode(0);
    }

service層；html

  List<Map<String,Object>> findVersionMapList(Map<String, Object> map, Integer page, Integer limit);Mapper

impl層前端

    @Override
    public List<Map<String, Object>> findVersionMapList(Map<String, Object> map, Integer page, Integer limit) {
        try {
            PageHelper.startPage(page, limit);
            List<Map<String, Object>> list = budgetVersionMapper.findVersionMapList(map);
            return list;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

Mapper層java

    //查詢預算全部版本
    List<Map<String,Object>> findVersionMapList(Map<String, Object> map);

xmljquery

    <!--根據條件查詢版本-->
    <select id="findVersionMapList" parameterType="java.util.Map" resultType="java.util.Map">
        SELECT (@rowNO := @rowNo+1) num,ID_,VERSION_CODE,BUDGET_YEAR,
        (CASE WHEN IS_LATEST=1 THEN '是' else '否' END) AS IS_LATEST,CREATE_TIME
        FROM budget_version a ,(select @rowNO := 0) b
        <if test="(budgetyear != null and budgetyear != '') and (budgetname != null and budgetname != '')">
            where BUDGET_YEAR LIKE "%"#{budgetyear}"%"
            and BUDGET_NAME LIKE "%"#{budgetname}"%"
        </if>
        <if test="(budgetyear != null and budgetyear != '') and (budgetname == null or budgetname == '')">
            where BUDGET_YEAR LIKE "%"#{budgetyear}"%"
        </if>
        <if test="(budgetyear == null or budgetyear == '') and (budgetname != null and budgetname != '')">
            where VERSION_CODE LIKE "%"#{budgetname}"%"
        </if>
        order by CONVERT(VERSION_CODE,SIGNED) desc
    </select>