datagrid、easyui-dialog

时间：2023-03-09 16:09:45
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>

相关文章