<table id="dg" class="DataGrid - VirtualScrollView with Detail Rows" >
</table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
title: '信息列表',
width: 800,
height: 500,
nowrap: true,
striped: true,
collapsible:false,
border: true,
showFooter:true,
pagination:true,
rownumbers:true,
fitColumns:true,
singleSelect:true,
sortName:'flightCode',
columns:[[
{field:'name',title:'视频名称',width:150,align:'center'},
{field:'TThumbnail1',title:'视频',width:250,align:'center'},
{field:'uploadDate',title:'上传时间',width:150,align:'center'
,sortable:true},
{field:'feedback',title:'反馈信息',width:180,align:'center'},
]]
});
var p = $('#dg').datagrid('getPager');
$(p).pagination({
pageSize: 2,//每页显示的记录条数,默认为10
pageList: [2,4,8],//可以设置每页记录条数的列表
showPageList: true,
showRefresh: true,
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
$(p).pagination({
onSelectPage: function (pageNumber, pageSize) { //每一个按钮选择是都会默认执行这个
// alert("onSelectPage");
var startTime2 = $('#start2').datetimebox('getValue');//获得开始时间和结束时间
var endTime2 = $('#end2').datetimebox('getValue');
getData(pageNumber, pageSize,startTime2,endTime2);
},
// onChangePageSize:function (pageNumber, pageSize) {
// alert("onChangePageSize");
// getData(pageNumber, pageSize);
// },
// onRefresh:function (pageNumber, pageSize) {
// alert("onRefresh");
// getData(pageNumber, pageSize);
// }
});
});
var getData = function (pageNumber,pageSize,startTime2,endTime2) {
$.ajax({
type: 'POST',
url: 'dataGrid.do', //用户请求数据的URL
data : {
pageNumber:pageNumber,
pageSize:pageSize,
start:startTime2,
end:endTime2
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
success: function (data) {
// alert(data);
test = eval("(" + data + ")"); ////转换为json对象
// alert(test);
$('#dg').datagrid('loadData',test);
}
});
};
//页面初始化时调用函数加载数据
$(function(){
var startTime2 = $('#start2').datetimebox('getValue');//获得开始时间和结束时间
var endTime2 = $('#end2').datetimebox('getValue');
getData(1,2,startTime2,endTime2);
});
// function refreshPage(){
// getData(1, 2);
// };
</script>
后台:
import java.sql.Timestamp;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.japdplat.common.utils.DateUtils;
import com.japdplat.modules.sites.entity.TVideo;
import com.japdplat.modules.sites.service.video.TVideoService;
import com.japdplat.modules.sites.share.StaticVariable;
/**
* @author LzwGlory
* @version 2013-12-19
* */
@Controller("VideoController")
@RequestMapping(value = "${adminPath}/sites/videoLzw")
public class VideoController{
@Resource
private TVideoService tVideoService;
@RequestMapping()
public String list(ModelMap modelMap) {
return "modules/sites/video";
}
@RequestMapping(value="/dataGrid.do")
public @ResponseBody String dataGrid(ModelMap modelMap
,@RequestParam int pageNumber,@RequestParam int pageSize
,@RequestParam String start,@RequestParam String end) {
Timestamp startTime = new Timestamp(System.currentTimeMillis());
Timestamp endTime = new Timestamp(System.currentTimeMillis());
try {
if(!start.isEmpty()){
startTime = Timestamp.valueOf(start);
}else{
startTime=null;
}
if(!end.isEmpty()){
endTime = Timestamp.valueOf(end);
}else{
endTime=null;
}
} catch (Exception e) {
// e.printStackTrace();
}
List<TVideo> listTVideos=tVideoService.getVideoPaging(pageNumber,pageSize, startTime, endTime);
long size=tVideoService.count(startTime,endTime);
//start 拼json字符串
StringBuffer sb = new StringBuffer();
sb.append("{\"total\":"+size+",\"rows\":[");
for(TVideo tVideo:listTVideos){
sb.append("{\"name\":").append("\"")
.append(tVideo.getName()).append("\"").append(",")
.append("\"TThumbnail1\":").append("\"")
.append("<img src=").append("\'")
.append(StaticVariable.imgCcwz)
.append(DateUtils.formatDate(tVideo.getUploadDate(), "yyyy-MM-dd"))
.append("/")
.append(tVideo.getTThumbnail1())
.append("\'")
.append(">")
.append("\"").append(",")
.append("\"uploadDate\":").append("\"")
.append(tVideo.getUploadDate()).append("\"").append(",")
.append("\"feedback\":").append("\"")
.append(tVideo.getFeedback()).append("\"").append("},");
}
String jsonStr=null;
if(startTime==null||endTime==null){
jsonStr=sb.substring(0,sb.length()-1)+"]}" ;
}else{
jsonStr=sb.substring(0,sb.length())+"]}" ;
}
//end 拼json字符串
return jsonStr;
}
}
分享到:
相关推荐
在本项目中,"Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统",我们看到一个基于Java技术栈的Web应用开发实例。这个系统利用了多个核心技术来构建一个功能完备的员工管理...
### EasyUI入门视频知识点概述 #### 一、EasyUI简介 EasyUI是一个基于jQuery的用户界面插件集合,...通过以上内容的学习,相信您可以对EasyUI有一个全面而深入的了解,并能够在实际项目中熟练运用这些组件和技术点。
SSM(Spring、SpringMVC、MyBatis)框架是一个常用的Java Web开发组合,而EasyUI则是一款基于jQuery的UI库,主要用于构建美观的前端界面。这个项目将这两个技术结合,实现了基本的数据管理功能,包括增、删、改、查...
SSM+EasyUI小案例是基于...综上所述,"ssm+easyui小案例"涵盖了后端开发的主流框架与前端组件的综合运用,通过学习这个案例,开发者可以深入理解SSM框架的工作原理和EasyUI的使用方式,同时提升Web应用开发的实战技能。
总的来说,这个示例项目综合运用了SSM框架的核心组件,结合了MySQL数据库、PageHelper分页插件和通用Mapper,实现了高效的数据操作。同时,前端利用EasyUI提供了友好的用户界面,使得整个系统具备了完整的功能性和...
例如,使用EasyUI的表格组件,可以轻松实现数据的分页、排序和过滤功能;使用对话框组件,可以实现弹窗提示和确认操作,提升用户体验。此外,EasyUI与后台SSM框架的整合也非常顺畅,通过Ajax技术,前后端可以进行...
小七的技能涵盖Java后端开发、JavaScript、jQuery、CSS、SpringMVC、Hibernate、Bootstrap、EasyUI、HTML5、ECharts以及EL表达式等。他的项目经验包括: 1. **二手车交易平台**:2017年2月至6月,小七在此项目中...
求职者在项目中负责用户注册登录、二手车展示、分页、出售模块和估价模块的开发和设计,这体现了他们对Web开发全栈的理解和实践能力,特别是SpringMVC和Hibernate在企业级应用中的运用。 - **记事本APP**:此项目...
1. **果蔬预订系统**:这个项目采用了Spring + SpringMVC + Mybatis + Mysql + zTree + PageHelper + EasyUI + CKeditor + Nginx + Redis的技术栈。工程师负责了商品信息和商品管理模块,完成了用户需求分析和文档...
9. **前端技术**:具备HTML、JavaScript、EasyUI或LayUI的基础,理解AJAX异步交互和jQuery的jsonp跨域请求技术。 在实际工作中,该工程师在深圳市百欣办公用品连锁有限公司和深圳市优乐众惠科技有限公司的工作经历...
3. 掌握JavaScript、JQuery、CSS、HTML、JSP、EasyUI和AJAX等Web技术,熟悉KindEditor富文本编辑器。 4. 熟练使用MySQL数据库,对Oracle有一定了解。 5. 熟悉NoSQL数据库Redis,理解SOA(面向服务架构)理念,了解...