<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Main CSS-->
<link type="text/css"
href="http://www.likecs.com/static/system/css/main.css">
<!-- Font-icon css-->
<link type="text/css"
href="http://www.likecs.com/static/system/css/font-awesome.min.css">
<!-- 引入girdmanager的css -->
<link href="http://www.likecs.com/static/system/gridmanager/css/gm.css">
<!-- 引入gridmanager的js -->
<script type="text/javascript" src="http://www.likecs.com/static/system/gridmanager/js/gm.js"></script>
引入增删改查操作的js
document.querySelector('#table-demo-ajaxPageCode').GM({
gridManagerName: 'demo-ajaxPageCode', //gridManager的名称
ajaxData: '/system/article/list', //请求路径 -自动发送的ajax请求
ajaxType: 'POST',
//请求方法
supportAjaxPage: true,
//是否支持分页
currentPageKey: "localPage", //当前页
pageSizeKey: "pageSize", //每页显示的条数
supportDrag: false,
//禁止列的拖曳
sizeData: [5,10,15,20], //分页的选项
pageSize: 5,
//默认每页显示多少条
height: '100%',
//显示全部高度
columnData: [
//列的数据 -- 返回的json数据对应
{
key: 'title',
text: '文章标题',
align: 'center'
},{
key: 'type',
text: '文章类型',
align: 'center',
template: function(cell, row, index, key){
return cell.name;
}
},{
key: 'clickCount',
text: '点击次数',
align: 'center'
},{
key: 'createDate',
text: '创建时间',
align: 'center'
},{
key: 'enable',
text: '是否启用',
align: 'center',
//cell:当前key对应的值 ，row：当前行对象 ，index，当前对象的下标 ，key就是当前值
template: function(cell, row, index, key){
return cell?"<span>启用</span>":"<span>禁用</span>";
}
},{
key: 'id',
text: '操作  <a href="javascript:;">添加</a>',
align: 'center',
template: function(cell, row, index, key){
//将json对象转成json的字符串
var jsonStr = JSON.stringify(row);
//data-obj这个定义属性的方式，获取的使用data()就可以自动转换，有个要求，字符串必须是标准格式
return "<a href='javascript:;' data-obj='"+jsonStr+"'>修改</a> "
+'<a href="javascript:;" data-id="'+cell+'">删除</a>';
}
}
]
});
$(function(){//页面加载事件
//高级查询
$('#queryButton').on('click',function(){
//通过GridManager的setQuery将表单的数据传递到后台【会将分页的数据传递过去】
//这个方法发送的请求就是指定的GridManager的请求：/system/article/list
//手动：不方便维护
//var title = $("#title").val();
//自动：先导入jquery.jdirk.js ，然后引入【在jquery下引入】，然后调用方法
var jsonForm = $("#queryForm").serializeObject();
GridManager.setQuery('demo-ajaxPageCode',jsonForm);
});
//删除功能 -- 事件委托
$("#table-demo-ajaxPageCode").on('click','a[data-id]',function(){
//获取被删对象的id值
var id = $(this).data('id');
//弹出删除模态框 -- 复制模态框
$("#delModal").modal("show");
//清除所有的事件
$("#delModalButton").off();
//绑定单击事件
$("#delModelButton").on('click',function(){
$.ajax({
type: "POST", //请求方式
url: "/system/article/del", //请求地址
data: "id=" + id, //请求参数
dataType: "json", //指定服务器返回的数据类型，如果是字符串就不用写，如果是对象和集合就必须写，它会自动转成json对象，方便使用
success: function(msg){ //回调函数
if(msg.success){//删除成功
//1.关闭模态框
$("#delModal").modal("hide");
//2.刷新页面,参数是GridManager的 名称
GridManager.refreshGrid('demo-ajaxPageCode');
}else{//删除失败
//1.关闭模态框
$("#delModal").modal("hide");
//2.提示
alert(msg.msg);
}
}
});
});
});
//点击添加按钮弹出模态框
$("#table-demo-ajaxPageCode").on('click','#add',function(){
//操作：清空表单，因为添加和修改使用的是同一个模态框，添加数据之后点击取消，再点击添加或修改还是以前的数据，所有需要清空
$("#saveForm").get(0).reset();
//操作：清空表单时不会清除隐藏域id，这样在添加和修改时要出问题
$("#saveForm #id").val("");
/*添加清空富文本*/
var ue = UE.getEditor('container');
ue.ready(function() {
ue.setContent('');
});
//显示模态框
$("#saveModel").modal("show");
$("#saveButton").off();
$("#saveButton").on('click',function(){
//将表单中的数据【表单项必须有name属性值】以ajax异步的方式进行提交 //请求就是表单中action的属性值
$("#saveForm").ajaxSubmit({
success:function(msg){
//1.关闭模态框
$("#saveModel").modal("hide");
if(msg.success){
//2.刷新页面,参数是GridManager的 名称
GridManager.refreshGrid('demo-ajaxPageCode');
}else{//操作失败
alert(msg.msg);
}
}
});
});
});