想想刚开始学jsp, 用application做一个简单的数据库, 简单的注册页面, 跟这个相比就是过家家

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>数据表格</title>

<%

String pid = request.getParameter("parentid");

if(pid==null||pid.trim().length()==0) {

    pid = "0";

}

%>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"></link>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"></link>

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

<script>

$(function() {

    $("#tab1").datagrid({

        title:"地区列表",

        // pid如果写在""里面的话就不能再加上"+"了, 相当进行了一个替换

        url:"MembersList?parentid=<%=pid %>",

        idField:"id",

        //指明哪个字段是标识字段, 另外在选择多项的时候, 支持翻页依然被选中,

        //也会影响编辑的功能, 会选择选中的第一个

        //就是在第一页的时候选中两条数据, 翻到第二页再返回第一页, 原先的内容还是在被选中的状态

        singleSelect:false,      //指定是否只可以单选

        frozenColumns:[[{field:"",title:"",checkbox:true},{field:"id",width:80,title:"ID"}]],         //冻结某一列不随滚动条滚动

        columns:[[

                  {field:"parentId",width:80,title:"parentId"},

                  {field:"name",width:80,title:"name",

                        formatter:function(value,row,index){      //列属性, 格式化器

                            //alert(value+row+index);

                            //点击显示下级链接, pid的使用和传输就是在这个地方

                            return "<a href='EasyUI_datagrid.jsp?parentid="+row.id+"'>"+value+"</a>";

                        }

                  },

                  {field:"postCode",width:80,title:"postCode"}

        ]],

        toolbar: [{

            //编辑工具

            text:'编辑',

            iconCls: 'icon-edit',

            handler: function(){

                var s = $("#tab1").datagrid("getSelected");//获得所选择的那行的数据

                if(s!=null) {

                    $("#addfm").form('reset');

                    $("#add").dialog({

                        title:"编辑地区"

                    });

                    //绑定数据, 这里比较难以理解

                    $("#addfm").form('load',s);

                    $("#add").dialog("open");

                }

                else {

                    alert("未选中任何数据");

                }

            }

        },'-',{

            //帮助工具

            text:'帮助',

            iconCls: 'icon-help',

            handler: function(){alert('帮助按钮')}

        },'-',{

            //添加工具

            text:'增加',

            iconCls:'icon-add',

            handler: function(){

                $("#addfm").form("reset");

                //清理id, 默认还是有id的

                $("#id").val(null);     //或者$("#id").val("");

                $("#add").dialog({

                    title:"添加地区"

                })

                $("#add").dialog("open");

            }

        },'-',{

            //删除工具

            text:'删除',

            iconCls:'icon-remove',

            handler:function() {

                var s = $("#tab1").datagrid("getSelections");

                if(s.length>0) {

                    $.messager.confirm("确定删除","确实要删除吗?此操作不可恢复, 且影响子级地区",function(r) {

                        if(r) {

                            var ids = "";

                            for(var i = 0; i<s.length; i++) {

                                //这个地方分了两次来加这个","  第一次先是加上id, 然后判断, 只要不是最后一个, 就在后面加上一个","

                                ids += s[i].id;//这里添加逗号的算法要好好酌量一下, 逻辑思维跟不上是不行的

                                if(i!=s.length-1) {

                                    ids += ",";

                                }

                            }

                            //alert(ids);

                            $.get("Delete?ids="+ids,function(data,status) {

                                alert("data:"+data+"status:"+status);

                                $("#tab1").datagrid("reload");//重新加载当前页面

                            })

                            $("#tab1").datagrid("clearSelections");

                        }

                    });

                }

                else {

                    alert("未选择任何一条数据");

                }

            },

        }],

        collapsible:true,      //是否折叠

        width:800,        //整个表宽

        fitColumns:true,       //是否适应表的宽度

        striped:true,     //斑马线

        rownumbers:true,     //每一列的序列号

        pagination:true,     //是否出现分页工具栏

        pageNumber:1,       //打开页面首先显示哪一页

        pageSize:6,      //页面打开时显示的每页显示的数据条数

        pageList:[3,6,9,12],        //分页列表选项, 按每页显示多少内容

        sortName:"id",      //按哪一列进行排序

        sortOrder:"desc",    //定义是顺序排列还是倒序

        remoteSort:false,    //取消从服务器排序, 如果要让数据这这里排序这个属性必须设置为false

        loadMsg:"正在加载啊......"

    });

    //提交表单

    $("#addfm").form({

        novaliddate:false,

        url:"EasyUI_test",

        onSubmit:function() {

            //validate方法;做表单字段验证，当所有字段都有效的时候返回true。

            var isValid = $(this).form("validate");

            //alert("表单测试, "+isValid);

            if(!isValid) {

                $.messager.show({

                    title:"表单验证",msg:"验证未通过"

                });

            }

            return isValid;

        },

        success:function(data) {

            //alert(data);弹出窗口提示信息

            var mes = eval("("+data+")");

                $.messager.show({title:"提交信息",msg:mes.message});

                if(mes.success) {

                    $("#add").dialog("close");

                    //这里的这种情况要加载当前页

                    $("#tab1").datagrid("reload");

                }

        }

    })

    $("#subbutton").click(function() {

        $("#addfm").form("submit");

    })

});

</script>

</head>

<body>

<br>

<table id="tab1"></table>

<div id="add" class="easyui-dialog" style="width:300px" data-options="closed:true">

    <form id="addfm" method="post">

        <table>

            <tr>

                <td>地区名称: </td>

                <td><input id="name" name="name" class="easyui-textbox"

                data-options="required:true,

                                    validType:'length[2,10]',

                                    missingMessage:'地区名称为必填项'"></td>

            </tr>

            <tr>

                <td>邮政编码: </td>

                <td><input id="postcode" name="postCode" class="easyui-numberbox"

                data-options="required:false,validType:'length[6,6]'">

                <input name="parentid" type="hidden" value="<%=pid %>" />

                <!-- 这个地方id是有值的, 因为前面做了一次绑定, 也会把id的值绑定上 -->

                <input name="id" type="hidden" value=""></td>

            </tr>

            <tr>

                <td colspan="2" align="center">

                    <a id="subbutton" class="easyui-linkbutton" style="width:80px">提交</a>

                </td>

            </tr>

        </table>

    </form>

</div>

</body>

</html>

datagrid数据表格的维护的更多相关文章

  1. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  2. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  3. DataGrid( 数据表格) 组件[9]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  4. DataGrid( 数据表格) 组件[8]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  5. DataGrid( 数据表格) 组件[7]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  6. DataGrid( 数据表格) 组件[6]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  7. DataGrid( 数据表格) 组件[5]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. DataGrid( 数据表格) 组件[4]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  9. DataGrid( 数据表格) 组件[3]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

随机推荐

  1. 胡乱摸的NOIP2017游记和总结

    来自YZK的总结 本篇总结主要分成两部分:NOI Professional游记和平日的刷题训练. 今年的NOI Professional TG的难度在洛谷上标记为:二黄一绿三紫.恭喜NOIP今年全面脱 ...

  2. Apache JMeter配置、安装

    一. 工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用,后来又扩充了其它的功能.j ...

  3. MySQL 日期类型及默认设置 （除timestamp类型外，系统不支持其它时间类型字段设置默认值）

    MySQL 日期类型及默认设置 之前在用 MySQL 新建 table,创建日期类型列时遇到了一些问题,现在整理下来以供参考. MySQL 的日期类型如何设置当前时间为其默认值? 答:请使用 time ...

  4. 浅析HttpCient

    HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java.net 包中已经提供了 ...

  5. BCGcontrolBar(一) MFC界面库简介

    原帖地址:http://blog.csdn.net/zw514159799/article/details/9148385 英文原文:http://www.bcgsoft.com/bcgcontrol ...

  6. iOS Xcode 调试技巧

    一 NSLog调试 官方文档:Logs an error message to the Apple System Log facility. 即NSLog不是作为普通的debug log的,而是err ...

  7. 【Linux_Unix系统编程】Chapter8 用户和组

    chapter8 用户和组 8.1 密码文件 /etc/passwd 每行都包含7个字段,之间用冒号分割,如下所示: mtk:x:1000:100:Michael:/home/mtk:/bin/bas ...

  8. Spark分析之Dependency

    在Spark中,每一个RDD是对于数据集在某一状态下的表现形式,比如说:map.filter.group by等都算一次操作,这个状态有可能是从前一状态转换而来的: 因此换句话说一个RDD可能与之前的 ...

  9. 给iOS开发新手送点福利,简述UIPikerView的属性和用法

    1.   numberOfComponents:返回UIPickerView当前的列数 NSInteger num = _pickerView.numberOfComponents; NSLog( @ ...

  10. 初学 python 之 用户登录实现过程

    要求编写登录接口 : 1. 输入用户名和密码 2.认证成功后显示欢迎信息 3.用户名输错,提示用户不存在,重新输入(5次错误,提示尝试次数过多,退出程序) 4.用户名正确,密码错误,提示密码错误,重新 ...