<%@ 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" onclick="">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="">清空条件</a>
</td>
</tr>
</table>
</div>
<div title="学生信息" border="false" region="center" >
<table id="datagrid" pageSize=3></table>
</div>
</div>
</body>
</html>
分享到:
相关推荐
easyui-datagrid之间拖拽效果demo
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
easyui-datagrid2-demo.zip
Spring Boot 系列教程 EasyUI-datagrid
easyui-datagrid导出至Excel插件,中文没有乱码问题。
easyui-datagrid21-demo.zip
用于myeclipse软件下ssm框架 easyUIdatagrid增删改查
easyui-datagrid官方demo,包含datagrid中combobox的使用方法,以及选择行,删除行,编辑行等实现方法。浏览器直接打开html可能无法访问他的data/datagrid_data.json里的数据,可以将datagrid_data.json里的数据放到...
个人收藏的插件,jquery-easyui-datagrid,分享给大家。
easyui-datagrid、edtabledatagrid ,行内编辑
项目工具代码,中间包含了service和controller两层,model可以自己定义
easyui的datagrid中editor和combogrid的结合使用,datagrid中编辑项是下拉表的实现方式
详细讲解Easyui中datagrid控件,编辑模式。扩展编辑器以及扩展验证规则。
最近在用jquery做页面,当datagrid放置数字文本框时输入小数会自动四舍五入,然后加了小数位数限制时不能输入小数点了。 最后发现是easyui1.4的bug,把这个补丁引入进去就好了
我自己将EASYUI官网里datagrid中的编辑表格和过滤表格两个demo合成的一个demo,供大家参考使用,下载解压后直接打开html即可,版本是easyui1.5
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
6.Jquery Easy-UI DataGrid的使用 7.jquery 的ajax 示例数据库表和存储过程在MyMVC.WebUI\App_Data文件夹里。数据库自己创建,创建完修改web.config文件里的数据库连接字符串。 自己写的,很简单,但是需要去好好...
JS EasyUI DataGrid动态加载数据
ibatis+easyui+etmv,实现了用户管理,权限管理数据在ACCES.条码打印 自动分页 .打印数据来源于oracle数据库使用ETMV访问,需要自建
easyUI,datagrid小样例