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菜鸟学习笔记--面向对象篇(十六):Object类方法
Object类 什么是Object类? Object类是所有Java类的祖先,每个类都使用 Object 作为超类,所有对象(包括数组)都实现这个类的方法Object类是类层次结构的根,Object类 ...
- Sublime中开发Ruby
Ruby:Sublime中开发Ruby需要注意的Encoding事项 目录 背景Sublime相关默认的文件存储编码:UTF8默认的输出控制台编码:UTF8修改默认的输出控制台编码Ruby相关默认的代 ...
- 依赖注入DI
说AOP不得不提依赖注入,先来看看一个实例.通过实例来解释依赖注入和它的用途. 我们现在要设计一个关于衣服的上架功能,有时候需要进行促销,我们现在知道的促销方式有打1折,和打2折. 最初的方案: pu ...
- WP自定义字体
IOS7的数字真的很好看啊,于是想放在自己的应用中.在网上找了下,发现这个字体叫HelveticaNeueLTPro-UltLt,于是随便在某个字体网站下了这个字体.拖到项目里换字体,但是,悲剧开始了 ...
- Web缓存解决方案
缓存是构建于HTTP统一接口之上的最有用功能之一.可以利用缓存减少终端用户感知到的延时,增加可靠性,减少带宽使用和成本,降低服务器负载.缓存无处不在,可以在服务器网络里,内容分发网络(Content ...
- 自己动手写spring容器(2)
上篇我们自己写了一个很简单的spring容器,该容器只是做了简单的bean的实例化,并没有spring的核心之一的IOC(依赖注入),也叫做控制反转,这里我就不讲这个的具体含义,不知道的园友可以自行百 ...
- c# 数据库更新操作-文本更新和数值更新小差别
1.文本更新 string strName; sql = "update 模式表 a SET 模式名称 ='"+ strName +"'where a.模式ID =&qu ...
- 设计模式（二）-- 外观模式(Facade)
设计模式(二) 外观模式(Facade) 为了解决子系统外部的客户端在使用子系统的时候,既能简单地使用这些子系统内部的模块功能,而又不用客户端去与子系统内部的多个模块交互的问题. 为子系统中的一组接口 ...
- android jni——helloworld
看了网上好多牛人写的学习系列都是用HelloWorld作为开始,我们这里也用HelloWorld来开始我们的学习,首先我们来介绍下JNI吧. JNI作为java代码和C/C++的桥梁而存在的,为了让j ...
- ok6410 u-boot-2012.04.01移植二修改源码支持单板
继ok6410 u-boot-2012.04.01移植一后修改代码,对ok6410单板初始化,主要包括时钟.串口.NAND.DDR等初始化.这些工作在以前的裸板程序都写了,直接拿来用.我觉得先写裸板程 ...