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轴滚动条定 ...
随机推荐
- 利用pdf2swf将PDF转换成SWF
将PDF转换成SWF可以使用SWFTools工具中的pdf2swf(http://www.swftools.org/),CSDN快速免积分下载地址http://download.csdn.net/de ...
- 基于 WebSocket 构建跨浏览器的实时应用
Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用 Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多 ...
- struts整合spring整合hibernate
1, web.xml中配置spring监听类 <listener> <listener-class>org.springframework.web.context.Contex ...
- HDU 3127 WHUgirls dp背包问题
WHUgirls Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total ...
- grub 的安装与使用
安装与使用grub 要开始探究 GRUB 的精妙之处,首先需要下载.编译和安装它.但不要害怕 -- 根本不会修改您的引导记录 -- 我们只是要编译和安装 GRUB,就像其它程序一样,在此过程中我们可以 ...
- 通用高性能 Windows Socket 组件 HP-Socket v2.2.2 更新发布
HP-Socket 是一套通用的高性能 Windows Socket 组件包,包含服务端组件(IOCP 模型)和客户端组件(Event Select 模型),广泛适用于 Windows 平台的 TCP ...
- Python学习入门基础教程(learning Python)--2.3.3Python函数型参详解
本节讨论Python下函数型参的预设值问题. Python在设计函数时,可以给型参预设缺省值,当用户调用函数时可以不输入实参.如果用户不想使用缺省预设值则需要给型参一一赋值,可以给某些型参赋值或不按型 ...
- Cocos2d-x--Box2D使用GLES-Render.h渲染查看刚体
分为两部分:文件拷贝和代码实现 1.文件拷贝: 在TestCpp下找到GLES-Render.h和GLES-Render.cpp两个文件 复制到G:\cocos2d-2.1rc0-x-2.1.3\co ...
- 方法控件[置顶] Asp.net总结（一）
本文朋友在青岛逛街的时候突然想到的...这两天就有想写几篇关于方法控件的博客,所以回家到之后就奋笔疾书的写出来发表了 纵观 Asp.net的学习只会之路,可以发现 Asp.net可以分为以下几大块 控 ...
- 开源中文分词工具探析（三）：Ansj
Ansj是由孙健(ansjsun)开源的一个中文分词器,为ICTLAS的Java版本,也采用了Bigram + HMM分词模型(可参考我之前写的文章):在Bigram分词的基础上,识别未登录词,以提高 ...