<!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的更多相关文章

  1. 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框

    EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...

  2. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  3. [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单，用于显示或隐藏列

    为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...

  4. 7、easyui 表单

    这是最后一个小节了,后面将会使用一个小项目来进一步实用讲解: 在之前的什么相关只是点都以及讲过了或者说涉及到过,如datagrid表格,树形菜单,布局面板panel,页签,拖放功能,只是在表格的属性细 ...

  5. EASYUI Dialog的基本使用

    1.基本使用 代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&q ...

  6. Easyui dialog中嵌入iframe

    如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...

  7. jquery.util.easyui.dialog

    (function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...

  8. easyui dialog 中嵌入html页面

    最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...

  9. easyui dialog 中 panel-body 高度太小出现 滚动条 的原因

    easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...

  10. Easyui dialog Y轴滚动条定位

    使用Easyui dialog进行数据新增的时候,如果Y轴方向有滚动条,当关闭之前的时候,将滚动条拉到最下方,再次打开的时候,滚动条还是定位在最下方. 需求: 每次打开的时候dialog Y轴滚动条定 ...

随机推荐

  1. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  2. 我的JQuery复习笔记之①——text(),html(),val()的区别

    text():①可匹配多个元素 ②过滤其中的标签(只显示文字) ③只适用于双标签 html():①只匹配选中元素中的第一个 ②不过滤其中标签 ③只适用于双标签 val():①只匹配选中元素中的第一个 ...

  3. slxna，游戏页面切到后台回来后返回sl页面导致sl页面无响应，解决方法。

    slxna在wp7上表现很好,因为那会xna还是微软的亲儿子.但是到wp8时代,微软丢弃xna,不管不问了.但是丢之前没有把兼容搞的完美,以致有很多隐秘的坑,说不定就踩到了. 我这个游戏的sl页面用了 ...

  4. 基于BrokerPattern服务器框架

    基于BrokerPattern服务器框架 RedRabbit 经典网游服务器架构 该图省略了专门用途的dbserver.guildserver等用于专门功能的server,该架构的优点有: l Log ...

  5. linux netstat 命令详解

    linux netstat 命令详解 1.功能与说明 netstat 用于显示linux中各种网络相关信息.如网络链接 路由表  接口状态链接 多播成员等等. 2.参数含义介绍 -a (all)显示所 ...

  6. 让C#、VB.NET实现复杂的二进制操作

    VB.NET和C#属于高级语言,对二进制位操作的支持不是很好,比如没有了移位运算等,用的时候确实很不方便,所以在闲暇之余我重新封装了一个用于C#.VB.NET的位操作类库,通过该类库可以实现数据移位. ...

  7. 转义字符（\）对JavaScript中JSON.parse的影响

    Email:longsu2010 at yeah dot net 按照ECMA262第五版中的解释,JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合jso ...

  8. 关于ASP.NET WebAPI中HTTP模型的相关思考

    对于.NET的分布式应用开发,可以供我们选择的技术和框架比较多,例如webservice,.net remoting,MSMQ,WCF等等技术.对于这些技术很多人都不会陌生,即时没有深入的了解,但是肯 ...

  9. Java 使用httpclient Post与cxf 发布的Webservice通信

    使用cxf发布的webservice不知道什么情况总会有时管用有时不管用,对于项目来说这肯定不行.又不想改动webservice因为代码太多.人懒! 于是便使用httpclient与webservic ...

  10. .net Mongo Driver 1.0与2.0的对比与2.0的优化

    前言 最近闲的时间有点多,所以还是写博客吧. 有人说Mongo 2.0的写法难以把控,好多地方不知道咋用,所以坚持用1.0(不愿意去尝试2.0),我感觉不可理解.所以写篇博客比较下. Mongo C# ...