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轴滚动条定 ...
随机推荐
- 使用 NPC，NPCManager 在 XNA 中创建 NPC
使用 NPC,NPCManager 在 XNA 中创建 NPC 平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐 ...
- MongoDB的一些用法(转藏)
MongoDB是目前工作中经常使用到的NoSQL数据库. 本博客只记录相关理论知识和技巧,涉及到实践的部分都会单开Blog来记录实践过程. ------------------------------ ...
- 实战 ASP.NET MVC Web API
实战 ASP.NET MVC Web API Web API 框架基于 ASP.NET MVC 框架开发,是一个面向 Http 协议的通信框架.相对于 WCF 而言,Web API 只面向于 Http ...
- Erlang Resources 资讯小站
Erlang Resources 资讯小站 好久没有写博客,是懒了吗?不是;前面两个月在紧张地推进一个项目,中间积累了一些RabbitMQ和Erlang的东西;本打算在项目结束之后赶紧总结一下,结果 ...
- HDU--杭电--3415--Max Sum of Max-K-sub-sequence--队列--双向队列
Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- MFC控件(8):command button与syslink control
在VS 2008里MFC多了4种控件,分别是 split buttons ,command button , syslink controls和 network address controls. s ...
- 趋势：Chrome为打包应用提供强大新特性
Chrome 7月9日刚为Chrome打包的应用提供了强大的访问Google服务例如Google统计.GoogleAPI和Google 钱包的能力,除此之外,还能够使用系统层面的服务包括蓝牙和原生应用 ...
- 遭遇ORA-01078，LRM-00109，ORA-27046 SPFILE文件损坏
今天在启动数据库时遭遇到 $ sqlplus / as sysdba SQL*Plus: Release 10.2.0.4.0 - Production on Tue Jul 16 21:28:03 ...
- 解决gsoap中文乱码的问题
解决方法一: 在main函数里初始化soap结构体后加入 soap_set_mode(&soap,SOAP_C_UTFSTRING); 这样所有的C都是utf-8的格式,只要你的win ...
- JS 脚本应该放在页面哪个位置 head body foot
我们平时在页面上写JS 是放在头部<head>中呢 还是放到body 最下面 能更优化? 查了一番资料,推荐 放在页面底部如: <html> <head> < ...