datagrid、easyui-dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生表</title>
<!-- 1jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5本地语言包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head>
<body> <script type="text/javascript">
$(function(){ //创建DataGrid
$("#dg").datagrid({
url:'StudentServlet', //数据来源
//冻结列
frozenColumns:[[{field:'id',checkbox:true},
{field:'sno',title:'学生编号',width:}]], //列的定义
columns:[[
{field:'sname',title:'学生名',width:},
{field:'ssex',title:'性别',width:},
{field:'sclass',title:'班级',width:,align:'right'},
{field:'sbirthday',title:'生日',width:,align:'center',
formatter: function(value,row,index){
var valuee = new Date(value).toLocaleString();
if(valuee == 'Invalid Date')
{
return '无' ;
}
else
{
return valuee;
}
}
} ]], fitColumns:false,//列自适应宽度 ，不能和冻结列同时设置为true
striped:true,//斑马线效果
idField:'sno',//主键列
rownumbers:true,//显示行号
singleSelect:false,//是否单选
pagination:true,//显示分页栏
pageList:[,,,],//每页行数选择列表
pageSize:,//初始每页行数
remoteSort:false,//是否服务器端排序 multiSort:true,//是否允许多列排序 toolbar:[{iconCls:'icon-search',text:'查询',
handler:function(){$("#dg").datagrid('load');}
},{iconCls:'icon-add',text:'添加',
handler:function(){
//清除表单旧数据
$("#form1").form("reset");
$("#saveStu").dialog('open');}
},{iconCls:'icon-remove',text:'删除',
handler:function(){alert('删除按钮被点击');}
},{iconCls:'icon-remove',text:'删除',
handler:function(){alert('删除按钮被点击');} }]
}); }) </script> <table id="dg" >
</table> <div class="easyui-dialog" id="saveStu" style="width:400px;height:300px"
title="添加学生" data-options="{closed:true,modal:true,
buttons:[{text:'保存',iconCls:'icon-save',handler:function(){ $('#form1').form('submit',{
url:'SaveStudentServlet',
onSubmit:function(){ var isValid =$(this).form('validate');
if(!isValid){
$.messager.show({
title:'消息',
msg:'数据验证未通过'
});
}
return isValid;
},
success:function(data){
var msg=eval('('+data+')');
if(!msg.success)
{
alert(msg.message);
}
else
{
//
$('#dg').datagrid('reload');
$.messager.show({title:'提示',msg:msg.message});
$('#saveStu').dialog('close');
}
}
}); }},
{text:'取消',iconCls:'icon-cancel',handler:function(){
$('#saveStu').dialog('close');
}}]}"> <form action="" id="form1" method="post">
<br><br>
<table>
<tr>
<td align="right" width=%>学号：</td>
<td><input class="easyui-textbox" id="sno" name="sno" data-options=
"{required:true,validType:'length[3,5]'}"></td>
</tr>
<tr>
<td align="right" width=%>名称：</td>
<td><input class="easyui-textbox" name="sname" data-options=
"{required:true,validType:'length[2,4]'}"></td>
</tr>
<tr>
<td align="right" width=%>性别：</td>
<td><input type="radio" name="ssex" checked
value="男">男
<input type="radio" name="ssex"
value="女">女</td>
</tr>
<tr>
<td align="right" width=%>班级：</td>
<td><input class="easyui-textbox" name="sclass" data-options=
"{required:true,validType:'length[2,4]'}"></td>
</tr>
<tr>
<td align="right" width=%>生日：</td>
<td><input class="easyui-datebox" name="sbirthday" ></td>
</tr> </table> </form>
</div> </body>
</html>
datagrid、easyui-dialog的更多相关文章
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单，用于显示或隐藏列
为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...
- 7、easyui 表单
这是最后一个小节了,后面将会使用一个小项目来进一步实用讲解: 在之前的什么相关只是点都以及讲过了或者说涉及到过,如datagrid表格,树形菜单,布局面板panel,页签,拖放功能,只是在表格的属性细 ...
- EASYUI Dialog的基本使用
1.基本使用 代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&q ...
- Easyui dialog中嵌入iframe
如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...
- jquery.util.easyui.dialog
(function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...
- easyui dialog 中嵌入html页面
最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...
- easyui dialog 中 panel-body 高度太小出现 滚动条 的原因
easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...
- Easyui dialog Y轴滚动条定位
使用Easyui dialog进行数据新增的时候,如果Y轴方向有滚动条,当关闭之前的时候,将滚动条拉到最下方,再次打开的时候,滚动条还是定位在最下方. 需求: 每次打开的时候dialog Y轴滚动条定 ...
随机推荐
- java读取properties 文件信息
src下config/tank.properties文件 initTankCount=10 ReinitTankCount=8 Etmspeed=15 Mtmspeed=15 MTankCount ...
- 依赖注入DI
说AOP不得不提依赖注入,先来看看一个实例.通过实例来解释依赖注入和它的用途. 我们现在要设计一个关于衣服的上架功能,有时候需要进行促销,我们现在知道的促销方式有打1折,和打2折. 最初的方案: pu ...
- Easyui + asp.net mvc + sqlite 开发教程（录屏）适合入门
Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 第一节: 前言(技术简介) EasyUI 是一套 js的前端框架 利用它可以快速的开发出好看的 前端系统 web ...
- 一步一步深入spring(1)--搭建和测试spring的开发环境
1.引用jar包 到spring的网站上下载spring的jar包(本文是2.5.6),解压缩后找到 使用spring必须引用的jar包 spring.jar commons-logging.jar ...
- 了解OData（一）
了解OData(一) 最近做了一个小项目,其中用到了 WCF Data Service,之前是叫 ADO.NET Data Service 的.关于WCF Data Service,博客园里的介绍并不 ...
- java动态加载配置文件
最近项目中需要做定时任务,即定时数据库的备份.定时时间用户可以在界面中配置,要求配置修改好立即生效. 想不到什么好办法.下面是一种实现思路 把用户配置的时间存到properties配置文件中,定时任务 ...
- Android RecyclerView完全解析
RecyclerView完全解析 (一) 前言 话说RecyclerView已经面市很久,也在很多应用中得到广泛的使用,在整个开发者圈子里面也拥有很不错的口碑,那说明RecyclerView拥有比Li ...
- DOM节点删除之empty和remove
DOM节点删除之empty和remove 刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove ...
- C语言总结2
12).预处理指令 1. 什么叫做预处理代码. 以#开头的代码就是预处理代码 #warning #import 2. 手写1个C程序的步骤.(面试题) 1>编写代码 2>编译 1)执行. ...
- ROC与AUC
一.ROC曲线 1.ROC曲线:接收者操作特征(receiveroperating characteristic),ROC曲线上每个点反映着对同一信号刺激的感受性. 横轴:负正类率(false pos ...