项目需求:使用JQuery EasyUI的DataGrid进行列表展示,在列表的右侧添加操作列,其中包含删除按钮,用户点击删除按钮,弹出一个确认对话框,用户在确认对话框中点击确认后删除(点击取消则不删除),删除完成后,用$.messager.show()在右下角显示提示信息,同时在回调函数中使用页面更新的find方法,获取到页面的pageSize和pageNumber跳回到删除前的页面。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%String path = request.getContextPath();%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>中控室数据查询网格</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/asset/jquery-easyui-1.6.8/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/asset/jquery-easyui-1.6.8/themes/icon.css">
<script type="text/javascript" src="<%=path%>/asset/jquery-easyui-1.6.8/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/asset/jquery-easyui-1.6.8/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/asset/jquery-easyui-1.6.8/locale/easyui-lang-zh_CN.js"></script>
<script>
$(document).ready(function () {
page_init();
});
//todo:加载这个页面的时候到底是
function page_init() {
$("#dataTable").datagrid({
url: "<%=path%>/video/listVideoWithPageForJson.action", //actionName
queryParams: {pageNumber: 1, pageSize: 20},//查询参数
loadMsg: "正在加载数据...",
rownumbers: true,//查询结果在表格中显示行号
fitColumns: true,//列的宽度填满表格,防止下方出现滚动条。
pageNumber: 1, //初始页码,得在这设置才效果,pagination设置没效果。
pagination: true,//分页控件
nowrap: true,//数据长度超出列宽时将会自动截取。
//视频类型,能否自动绑定到video
/*如果后端返回的json的格式直接是data={total:xx,rows:{xx}},不需要设置loadFilter了,
如果有多层封装,比如data.jsonMap = {total:xx,rows:{xx}},则需要在loadFilter处理一下。*/
// loadFilter: function(data){
// if(data.jsonMap) {
// return data.jsonMap;
// }
// }
});
var p = $('#dataTable').datagrid('getPager');
$(p).pagination({
pageSize: 20,//每页显示的记录条数,默认为20
pageList: [20, 35, 50],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '共 {total} 条记录',
//触发分页!
onSelectPage: function (pageNumber, pageSize) {//分页触发
find(pageNumber, pageSize);
}
});
}
function find(pageNumber, pageSize) {
$("#dataTable").datagrid('getPager').pagination({pageSize: pageSize, pageNumber: pageNumber});//重置
$("#dataTable").datagrid("loading"); //加屏蔽
$.ajax({
type: "POST",
dataType: "json",
url: "<%=path%>/video/listVideoWithPageForJson.action",
data: {
pageNumber: pageNumber,
pageSize: pageSize
},
success: function (data) {
$("#dataTable").datagrid('loadData', data);
$("#dataTable").datagrid("loaded"); //移除屏蔽
},
error: function (err) {
$.messager.alert('操作提示', '获取信息失败...请联系管理员!', 'error');
$("#dataTable").datagrid("loaded"); //移除屏蔽
}
});
}
</script>
<script>
String.prototype.format = String.prototype.f = function () {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
}
return s;
};
function delVideo(index) {
var row = $('#dataTable').datagrid('getSelected');
if (row) {
$.messager.confirm('提示框', '你确定这是无效视频并删除吗?', function (r) {
$('#dataTable').datagrid('selectRow', index);
//todo:获取到row的信息后去执行删除,这个url怎么写,同时要返回信息,及时将页面更新!
if (r) {
$.ajax({
url: '${pageContext.request.contextPath}/video/updateVideo.action',
method: "post",
dataType: "json",
data: {
id: row.id,
isIllegal: 1
},
success: function (deleteSuccess) {
if (deleteSuccess) {
$.messager.show({
title : '提示',
msg : '删除成功!'
});
//删除成功后,用find方法再返回到删除前页面
var options = $("#dataTable" ).datagrid("getPager" ).data("pagination" ).options;
var pageNumber = options.pageNumber;
var pageSize = options.pageSize;
find(pageNumber, pageSize);
}
else {
$.messager.show({
title : '提示',
msg : '删除失败!'
});
}
}
});
}
});
}
}
function operate(value, row, index) {
var videoName_ = row.videoName.split(".")[0];
var play = '<button href="javascript:void(0)" onclick="self.parent.addTab(\'{0}\',\'${pageContext.request.contextPath}/video/playVideo.action?videoName={1}\')">播放</button>'.format(
videoName_,
row.videoName
);
//todo:点击的时候,要弹出一个确认框
var del = '<button style="margin-left:20px" href="#" onclick="delVideo({0})">删除</button>'.format(
index
);
return play + del;
}
</script>
</head>
<body class="easyui-layout">
<table id="dataTable" title="中控室监控违规视频" toolbar="#tb"
singleSelect="true" fit="true">
<thead>
<tr align="center">
<th data-options="field:'isNew'" width="50">状态</th>
<th data-options="field:'videoName'" width="60">视频名称</th>
<th data-options="field:'videoDuration'" width="80">时长</th>
<th data-options="field:'createTime'" align="right" width="70">创建时间</th>
<th data-options="field:'videoCategory'" align="right" width="70">违规类型</th>
<th data-options="field:'operation', width:50, formatter:operate">操作</th>
</tr>
</thead>
</table>
<%--todo:查询的时候要怎么写,怎么获取前台传过去的数据,后台要返回什么,需要包装吗??
JQuery EasyUI是靠JSON格式传递数据的!
--%>
<div id="tb" style="padding:2px 5px;">
起始日期: <input class="easyui-datebox" style="width:110px">
结束日期: <input class="easyui-datebox" style="width:110px">
<a href="#" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</div>
</body>
</html>
JSP页面代码如上!
重点
- JQuery EasyUI是用JSON和后台交互的
- 熟悉要用到的JQuery EasyUI的组件的原理,再结合实际需要去复用或改写已有的函数
- 最最最重要的一点:写程序一定要动脑子,要能够快速定位到bug,而不是去做重复的无意义的事情,把自己陷入一种无谓的忙碌中!