想想刚开始学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>
