datagrid数据表格的维护

想想刚开始学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数据表格的维护的更多相关文章

EasyUI datagrid数据表格的函数getData返回来的是什么
EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...
JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
DataGrid( 数据表格) 组件[9]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
DataGrid( 数据表格) 组件[8]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
DataGrid( 数据表格) 组件[7]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
DataGrid( 数据表格) 组件[6]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
DataGrid( 数据表格) 组件[4]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
DataGrid( 数据表格) 组件[3]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

随机推荐

SpringBoot中实现依赖注入功能
本文转载自:https://blog.csdn.net/linzhiqiang0316/article/details/52639888 今天给大家介绍一下SpringBoot中是如何实现依赖注入的功 ...
Java 浅析 Thread.join()
概要本文分为三部分对 Thread.join() 进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() ...
linux中uptime命令查看linux系统负载
阅读目录 uptime cat /proc/loadavg 何为系统负载呢? 进阶参考 uptime 另外还有一个参数 -V(大写),是用来查询版本的 [appdeploy@CNSZ22PL0088: ...
jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器下载地址:jquery生成二维码.rar
DeepFM模型理论及代码实现
论文地址:DeepFM: A Factorization-Machine based Neural Network for CTR Prediction
django路由初识
静态文件配置 1.项目下面新建一个文件夹static settings.py中最后添加 STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static ...
storm项目优化
实现监控脚本监控topology运行状态
RHEL6.x查看网卡槽位对应设备文件及路径
先查看网卡mac地址,由于我的服务器做了mac地址绑定,所以会有相同的hwaddr地址,请忽略. [root@node-0a0a05d3- net]# ifconfig eth0 | grep HWa ...
Java反射机制 —— 简单了解
一.概述 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为jav ...
linux7系统开机报错failed to start login service
1.开机报错failed to start login service 参考网站:https://unix.stackexchange.com/questions/264994/kali-sudden ...

datagrid数据表格的维护

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

随机推荐

热门专题