java ，用公司框架写的显示列表 Table控件
<!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'></i> 固定预算管理
</div>
<div class="eui-col-md6 eui-textAlignR">
<a href="###" class="eui-btn eui-btn-small" onclick="Export()"><i class="eui-icon" ></i>模板下载</a>
<a class="eui-btn eui-btn-small" id="Import2" onclick="openExcel(1)"><i class="eui-icon"></i>预算导入</a>
<a class="eui-btn eui-btn-small" id="Import" onclick="openExcel(2)"><i class="eui-icon"></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: ,
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")<){//可判断以.xls和.xlsx结尾的excel
layer.msg("只能上传Excel文件");
}else{
var url;
if(types==""){
url= '/Summary/Transfer';
}else{
url= '/Summary/Budget';
}
var formData = new FormData($('form')[]);
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()",)
} 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: , sort: true}
, {field: 'VERSION_CODE', title: '版本号', width: , sort: true}
, {field: 'BUDGET_YEAR', title: '预算年度', width: }
// , {field: 'BUDGET_NAME', title: '预算名称', width: 200}
// , {field: 'UPDATE_DETAIL', title: '修改记录', width: 200}
, {field: 'IS_LATEST', title: '是否最新', width: }
// , {field: 'IS_FINAL', title: '是否最终', width: 200}
, {field: 'CREATE_TIME', title: '创建时间', width: , sort: true, templet: '<div>{{new Date(d.CREATE_TIME).Format("yyyy-MM-dd hh:mm:ss")}}</div>'}
, {fixed: 'right', title: '操作', width: , toolbar: '#barNotice',right:true}
]]
, response: {
statusName: 'code' //数据状态的字段名称，默认：code
, statusCode: //成功的状态码，默认：0
, msgName: 'message' //状态信息的字段名称，默认：msg
, countName: 'count' //数据总数的字段名称，默认：count
, dataName: 'data' //数据列表的字段名称，默认：data
}
, skin: 'row' //表格风格
, even: true
, loading: true
, page: true //是否显示分页
, limits: [, , ]
, limit: //每页默认显示的数量
, 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>
以上是前端代码：界面效果如下
控制器：
//查询所有预算版本
@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();
}
service层；
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层
//查询预算所有版本
List<Map<String,Object>> findVersionMapList(Map<String, Object> map);
xml
<!--根据条件查询版本-->
<select id="findVersionMapList" parameterType="java.util.Map" resultType="java.util.Map">
SELECT (@rowNO := @rowNo+) num,ID_,VERSION_CODE,BUDGET_YEAR,
(CASE WHEN IS_LATEST= THEN '是' else '否' END) AS IS_LATEST,CREATE_TIME
FROM budget_version a ,(select @rowNO := ) 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>
java ，用公司框架写的显示列表 Table控件的更多相关文章
- 我写的一个 Qt 显示图片的控件
Qt 中没有专门显示图片的控件.通常我们会使用QLabel来显示图片.可是QLabel 显示图片的能力还是有点弱.比方不支持图像的缩放一类的功能.使用起来不是非常方便. 因此我就自己写了个简单的类. ...
- MFC编程入门之二十四（常用控件：列表框控件ListBox）
前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...
- VS2010/MFC编程入门之二十九（常用控件：列表视图控件List Control 下）
上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构体的定义.本节继续讲解下半部分,包括列表视图控件的创建.CListCtrl类的主要成员函数 ...
- VS2010-MFC（常用控件：列表视图控件List Control 下）
转自:http://www.jizhuomi.com/software/197.html 上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构 ...
- 用于后台管理的列表数据控件：DataGrid和Select
常听人说不喜欢javascript.然而我一个一直用C#做后端的人,最喜欢的编程语言就是javascript了,我接收它的优点,也接收它的缺点! 前段时间接触过easyui,用过里面的DataGrid ...
- 自己用js写的两个日历控件
前一阵写了两个日历控件,做了简单的封装,发出来共朋友们参考. 第一个日历控件,条状的日历. (使用方法:调用initBarTime(id,evn),第一个参数是要渲染div的id,第二个参数是点击日期 ...
- VS2010/MFC编程入门之二十四（常用控件：列表框控件ListBox）
前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...
- [Android] 拍照、截图、保存并显示在ImageView控件中
近期在做Android的项目,当中部分涉及到图像处理的内容.这里先讲述怎样调用Camera应用程序进行拍照,并截图和保存显示在ImageView控件中以及遇到的困难和解决方法. PS:作者购买 ...
- MFC常用控件之列表视图控件(List Control)
近期学习了鸡啄米大神的博客,对其中的一些知识点做了一些自己的总结.不过,博客内容大部分来自鸡啄米.因此,这个博客算是转载博客,只是加了一些我自己的理解而已.若想学习鸡啄米大神的博客总结,请点击连接:h ...
随机推荐
- 使用Linq的过程中碰到的问题
1. 在使用linq过程DefaultIfEmpty的过程中如果 O.RS 这个支段的值是null,在取这个数据 就会报错 ,正确的写法 2. 在使用Linq 用where条件判断要好分辨大小写 3. ...
- Swift中的for循环基本使用
OC中的for循环写法: ;i < ;i++) { NSLog(@"i=%zd",i); } Swift中的for循环写法: let a = ; ..< a { pri ...
- 【内容】MVP 三剑客活动
最近微软搞了一个活动,叫做三剑客,主旨就是“Cloud+AI本地化社区活动,为微软产品本地化做出自己的贡献”,虽然已是rMVP,但也同样收到的社区经理的来信,本人也报名参加了这个活动,同时给了我三个小 ...
- c++11の泛型算法
一.泛型算法泛型算法这个概念是针对容器操作的,我们知道,c++11的顺序容器有vector,list,deque等,对于这些容器,c++11并没给出相应的增删改查方法,而是定义了一组泛型算法 一般的泛 ...
- MacOS 10.13.6 下装xcode 流程
1.最好先安装brew https://github.com/Homebrew/brew/releases 自动安装脚本 /usr/bin/ruby -e "$(curl -fsSL htt ...
- mysql查询order by 指定字段排序
当MySQL查询时排序的字段不是数字时而是汉字的时候也可以用when then 来指定排序. 列如yewu_check表的status 字段不是0,1,2而是汉字待办,已办,退回.可以如下写法: S ...
- foreman容器化部署
一.前言 最近公司要求对一批GPU服务器安装操作系统,之前同事一直采用cobbler安装系统,一旦服务器设置为pxe优先启动,会出现重复安装系统的问题,并且如果线上服务器忘记修改第一启动项为硬盘启动, ...
- Net包管理NuGet(2)nuget包的生成方法
1,下载NuGetPackageExplorer,可以下载运行源码,也可以直接下载安装包安装安装之后打开 设置好内容之后点击绿色的打钩保存然后操作右边空白处 然后点击File>Save;保存之后 ...
- [转帖]EXPDP dumpfile和parallel的关系
http://blog.itpub.net/28602568/viewspace-2133375/ 转帖 EXPDP 里面 parallel 与 dumpfile 里面的文件数的关系. 但是我这里有一 ...
- jsonp 实现前端跨域
1.基于ajax 发起jsonp 请求. 前端代码: let url = 'http://localhost:8001/'; $.ajax({ type: 'get', dataType: 'json ...