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轴滚动条定 ...
随机推荐
- Oracal的Lpad函数
lpad函数是Oracle数据库函数,lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是left的简写,pad是填充的意思,所以lpad就是从左边填充的意思. 语法格式如下 ...
- POJ 3348 Cows
题目大意: 给你n棵树,可以用这n棵树围一个圈,然后在圈里面可以养牛,每个牛需要50平方米的空间,问最多可以养多少牛? 其实就是求一个凸包,计算凸包面积,然后除以50,然后就得到答案,直接上模板了. ...
- PHP使用DomDocument抓取HTML内容
有时候会有需要从一个HTML页面来分离出你需要的一些数据来进行处理. 当然自己分析文件肯定可以,但是比较快速且方便的是使用正则表达式或者DOM. 鉴于正则表达式我不熟悉,所以我打算使用DOM来完成. ...
- 主引导记录MBR/硬盘分区表DPT/主分区、扩展分区和逻辑分区/电脑启动过程
主引导扇区主引导扇区位于整个硬盘的0柱面0磁头1扇区{(柱面,磁头,扇区)|(0,0,1)},bios在执行自己固有的程序以后就会jump到MBR中的第一 条指令.将系统的控制权交由mbr来执行.主引 ...
- 如何发布一个自定义Node.js模块到NPM（详细步骤）
咱们闲话不多说,直接开始! 由于我从没有使用过MAC,所以我不保证本文中介绍的操作与MAC一致. 文章开始我先假定各位已经在window全局安装了Node.js,下面开始进行详细步骤介绍: 本文本着, ...
- 基于WCF的RESTFul WebAPI如何对传输内容实现压缩
前言 WCF作为通迅框架可以很容易地实现对消息的压缩,且方法不止一种,主要解决方法主要有以下四种: 1.通过自定义MessageEncoder和MessageEncodingBindingElemen ...
- .Net多线程编程—同步机制
1.简介 新的轻量级同步原语:Barrier,CountdownEvent,ManualResetEventSlim,SemaphoreSlim,SpinLock,SpinWait.轻量级同步原语只能 ...
- 开发团队在TFS中使用Git Repository （一）
在研发团队中,代码版本管理是最为基础的必要工具.个人使用过的版本管理工具有SVN.VSS.ClearCase.TFS.Git,从团队的角度和使用角度来说,个人倾向于与使用TFS作为团队的基础工具.首先 ...
- “System.FormatException”类型的异常在 mscorlib.dll 中发生，但未在用户代码中进行处理 其他信息: 该字符串未被识别为有效的 DateTime。
前台用过jquery ajax将值传递到 后台的一般处理程序 并且报了这个异常 原因是:前台传递过来的时间格式不对 需要把 "/"换成 "-" 例如:20 ...
- 浅谈 Linux
1969年,美国贝尔实验室的肯-汤普森在DEC PDP-7机器上开发出了UNIX系统. 1971年,肯-汤普森的同事丹尼斯-里奇发明了C语言:1973年,UNIX系统的绝大部分源 ...