由于使用datagrid主要是和数据打交道,所以为了方便就用了js的方式创建数据表格
<table id="dg"></table>
<div id="toolbar" style="background-color: #b7d2ff">
<a href="/createArticle" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加文章</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editArticle()">编辑文章</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyArticle()">删除文章</a>
</div>
$(function(){
//获取表格元素
var dataGrid = $('#dg');
//加载datagrid 表格
dataGrid.datagrid({
url:'/articleList',//这是最关键的数据加载地址,接收rows,和total
singleSelect:true,//单行选中
rownumbers:true,//序列号,显示在第一列
pagination:true,//分页条
pageSize:10,//每页显示的数目
pagelist:[10,20,30],//选择每页加载的数目,这个要和pagesize的数目成倍数
fitColumns:true,//自动改变行列比例,把表格撑起来,显得好看点
toolbar: '#toolbar',//这是工具栏
//这是每一列定义的内容,field最重要,一定要和返回的数据名称一致,表格就是靠这个名字自动填充数据的
columns:[[
{field:'articleTitle',title:'文章标题',width:100},
{field:'articleDetails',title:'内容摘要',width:100},
{field:'articleTime',title:'创建时间',width:100}
]]
});
})
function destroyArticle(){
//这里我们就获取到了选中行的数据
var row = $('#dg').datagrid('getSelected');
if (row){
//出现一个确认删除的对话框
$.messager.confirm('Confirm','确认要删除这篇文章',function(r){
if (r){
//用ajax提交数据
$.post('/deleteArticle',{id:row.id},function(result){
if (result){
$.messager.show({ // show success message
title: 'success',
msg:result.msg
});
$('#dg').datagrid('reload'); //删除成功后就重新加载数据表格
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.err
});
}
},'json');
}
});
}
}
在使用datagrid的时候,先获取数据表格元素,然后定义,在一个{}中定义其属性,要使用方法则格式是:datagrid.(‘方法名字’,{执行的参数等等})