<!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. ngx-push-stream模块源码学习（一）——序言

    一.概述     与传统的request-response的web应用模式不同,comet是一种长连接(long-held)的应用模式,从而允许服务端主动向客户端推送数据.     主流的comet技 ...

  2. 迷你MVVM框架 avalonjs 0.85发布

    迷你MVVM框架 avalonjs 0.85发布 本版本对循环绑定做了巨大改进,感谢@soom, @limodou, @ztz, @Gaubee 提供的大量测试文件. fix scanNodes, 在 ...

  3. 发布Activex全过程

    C#制作.打包.签名.发布Activex全过程 一.前言 最近有这样一个需求,需要在网页上面启动客户端的软件,软件之间的通信.调用,单单依靠HTML是无法实现了,因此必须借用Activex来实现.由于 ...

  4. 10169 - Urn-ball Probabilities !

    描述:有两个罐子,一个罐子里有一个红球,另一个罐子里有一个红球和一个白球,每次从两个罐子里各取一个球,然后在向每个罐子里各加一个白球,一次取到两个红球时就结束取球,求n次取球中至少一次为取球为红球的概 ...

  5. 分享下mac安装xamarin跨平台开发环境的坑

    之前在vs2015上安装好了xamarin环境,考虑到调试IOS仍然需要mac机,昨天决定直接在mac上安装xamarin. 安装完所有的效果如上图,此时已经可以创建安卓和IOS环境. 我安装过程中, ...

  6. 浅谈linux读写同步机制RCU

    RCU是linux系统的一种读写同步机制,说到底他也是一种内核同步的手段,本问就RCU概率和实现机制,给出笔者的理解. [RCU概率] 我们先看下内核文档中对RCU的定义: RCU is a sync ...

  7. Windows卸载软件出现蓝屏SYSTEM SERVICE EXCEPTION（VrvProtect_x64_2.sys）

    今天给大家介绍一个卸载Windows上软件的工具Windows Installer Clean Up,可以卸载电脑上的很多控制面板里面卸载不掉的软件,或者卸载过程中出现问题的软件. (1)出现的现象: ...

  8. 首页导航点击A连接跳转并添加上背景色，

    <style> ul li { float: left; height: 50px; width: 120px; color: white; text-align: center; mar ...

  9. action = "#" 是什么意思 在HTML语言中

    action = "#" 是form标签的属性,代表提交数据到本页,如:// 提交数据到a.aspx页面<form action="a.aspx"> ...

  10. AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...