easyUI -datagrid

最新推荐文章于 2024-10-12 22:35:37 发布

past2009

最新推荐文章于 2024-10-12 22:35:37 发布

阅读量122

点赞数

分类专栏： easyui 文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/past2009/article/details/84419083

版权

easyui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>学生管理系统</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="js/jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" charset="UTF-8">
$(function(){
$('#cc').calendar({
width:200,
height:200,
current:new Date()
});
$('#datagrid').datagrid({
url:'/easy/stu/showAll!findAll',
//title:'哈哈',
iconCls:'icon-save',
loadMsg: '数据载入中,请稍等！',//刷新页面时，显示的提示
onLoadError: function () {
$.messager.alert('查询反馈:', '查询失败，未找到相关数据！', 'error');
},
// onLoadSuccess:function () {
// $.messager.alert('查询反馈:', '查询成功！', 'success');
//},
pagination:true,//添加datagrid内部自带的分页工具条
rownumbers:true,//设置为true将显示行数
pageNumber:1,
pageSize:3,//当设置分页属性时，初始化每页记录数。
pageList:[3,4,5,10],//数组的最小公倍数是pageSize
singleSelect:false,//可设置多选
sortName:"id",//数据表格初始化时以哪一列来排序
fit:true,//datagrid宽高与外层宽高自适应
fitColumns:false,//默认为true即无滚动条,此处设置为横向有滚动条（列多的时候设置）
//（设置fitColumns:true,无横向滚动条,适用于列不是很多的时候）
checkbox:true,
columns:[[
{
field:'id',title:'编号',width:85,align:'center',sortable:true,
},
{
field:'name',title:'名字',width:55,align:'left',//resizable:true,//该列被缩放
},
{
field:'pw',title:'密码',width:40,align:'left',
}
]],
//[[]]实现多级表头，多个列合并colspan cellspan等，实际上是二维数组，两个中括号可以实现
// striped:true,
nowrap:false,//不换行属性设置为true就是不换行，设置为false就换行
border:false,//设置title下面不显示线
// border:true,
idField:'id',//不设置也会自动生成，但是设置了会多一个功能记住选择的多个选项（即实现跨页删除）
toolbar:[
{
text:'增加',
iconCls:'icon-add',
handler:function(){
addRow('inVariables');
}
},'-',
{
text:'修改',
iconCls:'icon-edit',
handler:function(){

}
},'-',
{
text:'删除',
iconCls:'icon-remove',
handler:function(){
deleteRows('inVariables');
}
},'-',
{
text:'搜索',
iconCls:'icon-search',
handler:function(){
deleteRows('inVariables');
}
},'-',
],
AllowPaging:true,
});
});
</script>
</head>

<body style="overflow-y: auto;">
123
<div class="easyui-layout" fit="true" border="false">
<div region="north" border="false" title="学生管理" style="height:110px;overflow:hidden;">
<table class="datagrid-toolbar" style="width:100%;height: 100%;">
<tr>
<th>学生姓名</th>
<td><input name="name" style="width: 315px;"> </td>
</tr>
<tr>
<th>创建时间</th>
<td> <input name="createdatetimeStart" class="easyui-datetimebox" editable="false" style="width: 155px;">至
<input name="createdatetimeEnd" class="easyui-datetimebox" editable="false" style="width: 155px;">
</td>
</tr>
<tr>
<th>最后修改时间</th>
<td><input name="modifydatetimeStart" class="easyui-datetimebox" editable="false" style="width: 155px;"/>至
<input name="modifydatetimeEnd" class="easyui-datetimebox" editable="false" style="width: 155px;">
<a href="javascript:void(0);" class="easyui-linkbutton" οnclick="">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" οnclick="">清空条件</a>
</td>
</tr>
</table>
</div>
<div title="学生信息" border="false" region="center" >
<table id="datagrid" pageSize=3></table>
</div>
</div>
</body>
</html>