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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>数据表格</title>
  8. <%
  9. String pid = request.getParameter("parentid");
  10. if(pid==null||pid.trim().length()==0) {
  11.     pid = "0";
  12. }
  13. %>
  14. <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  15. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"></link>
  16. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"></link>
  17. <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
  18. <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
  19. <script>
  20. $(function() {
  21.     $("#tab1").datagrid({
  22.         title:"地区列表",
  23.         // pid如果写在""里面的话就不能再加上"+"了, 相当进行了一个替换
  24.         url:"MembersList?parentid=<%=pid %>",
  25.         idField:"id",
  26.         //指明哪个字段是标识字段, 另外在选择多项的时候, 支持翻页依然被选中,
  27.         //也会影响编辑的功能, 会选择选中的第一个
  28.         //就是在第一页的时候选中两条数据, 翻到第二页再返回第一页, 原先的内容还是在被选中的状态
  29.         singleSelect:false,      //指定是否只可以单选
  30.         frozenColumns:[[{field:"",title:"",checkbox:true},{field:"id",width:80,title:"ID"}]],         //冻结某一列不随滚动条滚动
  31.         columns:[[
  32.                   {field:"parentId",width:80,title:"parentId"},
  33.                   {field:"name",width:80,title:"name",
  34.                         formatter:function(value,row,index){      //列属性, 格式化器
  35.                             //alert(value+row+index);
  36.                             //点击显示下级链接, pid的使用和传输就是在这个地方
  37.                             return "<a href='EasyUI_datagrid.jsp?parentid="+row.id+"'>"+value+"</a>";
  38.                         }
  39.                   },
  40.                   {field:"postCode",width:80,title:"postCode"}
  41.         ]],
  42.         toolbar: [{
  43.  
  44.             //编辑工具
  45.             text:'编辑',
  46.             iconCls: 'icon-edit',
  47.             handler: function(){
  48.                 var s = $("#tab1").datagrid("getSelected");//获得所选择的那行的数据
  49.                 if(s!=null) {
  50.                     $("#addfm").form('reset');
  51.                     $("#add").dialog({
  52.                         title:"编辑地区"
  53.                     });
  54.                     //绑定数据, 这里比较难以理解
  55.                     $("#addfm").form('load',s);
  56.                     $("#add").dialog("open");
  57.                 }
  58.                 else {
  59.                     alert("未选中任何数据");
  60.                 }
  61.             }
  62.         },'-',{
  63.  
  64.             //帮助工具
  65.             text:'帮助',
  66.             iconCls: 'icon-help',
  67.             handler: function(){alert('帮助按钮')}
  68.         },'-',{
  69.  
  70.             //添加工具
  71.             text:'增加',
  72.             iconCls:'icon-add',
  73.             handler: function(){
  74.                 $("#addfm").form("reset");
  75.                 //清理id, 默认还是有id的
  76.                 $("#id").val(null);     //或者$("#id").val("");
  77.                 $("#add").dialog({
  78.                     title:"添加地区"
  79.                 })
  80.                 $("#add").dialog("open");
  81.             }
  82.         },'-',{
  83.  
  84.             //删除工具
  85.             text:'删除',
  86.             iconCls:'icon-remove',
  87.             handler:function() {
  88.                 var s = $("#tab1").datagrid("getSelections");
  89.                 if(s.length>0) {
  90.                     $.messager.confirm("确定删除","确实要删除吗?此操作不可恢复, 且影响子级地区",function(r) {
  91.                         if(r) {
  92.                             var ids = "";
  93.                             for(var i = 0; i<s.length; i++) {
  94.                                 //这个地方分了两次来加这个","  第一次先是加上id, 然后判断, 只要不是最后一个, 就在后面加上一个","
  95.                                 ids += s[i].id;//这里添加逗号的算法要好好酌量一下, 逻辑思维跟不上是不行的
  96.                                 if(i!=s.length-1) {
  97.                                     ids += ",";
  98.                                 }
  99.                             }
  100.                             //alert(ids);
  101.                             $.get("Delete?ids="+ids,function(data,status) {
  102.                                 alert("data:"+data+"status:"+status);
  103.                                 $("#tab1").datagrid("reload");//重新加载当前页面
  104.                             })
  105.                             $("#tab1").datagrid("clearSelections");
  106.                         }
  107.                     });
  108.                 }
  109.                 else {
  110.                     alert("未选择任何一条数据");
  111.                 }
  112.             },
  113.         }],
  114.         collapsible:true,      //是否折叠
  115.         width:800,        //整个表宽
  116.         fitColumns:true,       //是否适应表的宽度
  117.         striped:true,     //斑马线
  118.         rownumbers:true,     //每一列的序列号
  119.         pagination:true,     //是否出现分页工具栏
  120.         pageNumber:1,       //打开页面首先显示哪一页
  121.         pageSize:6,      //页面打开时显示的每页显示的数据条数
  122.         pageList:[3,6,9,12],        //分页列表选项, 按每页显示多少内容
  123.         sortName:"id",      //按哪一列进行排序
  124.         sortOrder:"desc",    //定义是顺序排列还是倒序
  125.         remoteSort:false,    //取消从服务器排序, 如果要让数据这这里排序这个属性必须设置为false
  126.         loadMsg:"正在加载啊......"
  127.     });
  128.  
  129.     //提交表单
  130.     $("#addfm").form({
  131.         novaliddate:false,
  132.         url:"EasyUI_test",
  133.         onSubmit:function() {
  134.             //validate方法;做表单字段验证，当所有字段都有效的时候返回true。
  135.             var isValid = $(this).form("validate");
  136.             //alert("表单测试, "+isValid);
  137.             if(!isValid) {
  138.                 $.messager.show({
  139.                     title:"表单验证",msg:"验证未通过"
  140.                 });
  141.             }
  142.             return isValid;
  143.         },
  144.         success:function(data) {
  145.             //alert(data);弹出窗口提示信息
  146.             var mes = eval("("+data+")");
  147.                 $.messager.show({title:"提交信息",msg:mes.message});
  148.                 if(mes.success) {
  149.                     $("#add").dialog("close");
  150.                     //这里的这种情况要加载当前页
  151.                     $("#tab1").datagrid("reload");
  152.                 }
  153.         }
  154.     })
  155.     $("#subbutton").click(function() {
  156.         $("#addfm").form("submit");
  157.     })
  158. });
  159. </script>
  160.  
  161. </head>
  162. <body>
  163. <br>
  164.  
  165. <table id="tab1"></table>
  166.  
  167. <div id="add" class="easyui-dialog" style="width:300px" data-options="closed:true">
  168.     <form id="addfm" method="post">
  169.         <table>
  170.             <tr>
  171.                 <td>地区名称: </td>
  172.                 <td><input id="name" name="name" class="easyui-textbox"
  173.                 data-options="required:true,
  174.                                     validType:'length[2,10]',
  175.                                     missingMessage:'地区名称为必填项'"></td>
  176.             </tr>
  177.             <tr>
  178.                 <td>邮政编码: </td>
  179.                 <td><input id="postcode" name="postCode" class="easyui-numberbox"
  180.                 data-options="required:false,validType:'length[6,6]'">
  181.                 <input name="parentid" type="hidden" value="<%=pid %>" />
  182.                 <!-- 这个地方id是有值的, 因为前面做了一次绑定, 也会把id的值绑定上 -->
  183.                 <input name="id" type="hidden" value=""></td>
  184.             </tr>
  185.             <tr>
  186.                 <td colspan="2" align="center">
  187.                     <a id="subbutton" class="easyui-linkbutton" style="width:80px">提交</a>
  188.                 </td>
  189.             </tr>
  190.         </table>
  191.     </form>
  192. </div>
  193. </body>
  194. </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. BASIC-11_蓝桥杯_十六进制转十进制

    注意事项: 1.长数据注意选择long long类型,用%ldd输出,防止数据溢出; 示例代码: #include <stdio.h>#include <string.h>#i ...

  2. bzoj3503 和谐矩阵

    Description 我们称一个由0和1组成的矩阵是和谐的,当且仅当每个元素都有偶数个相邻的1.一个元素相邻的元素包括它本身,及他上下左右的4个元素(如果存在).给定矩阵的行数和列数,请计算并输出一 ...

  3. java并发编程 Executor,Executors,ExecutorService,CompletionService,Future,C

    使用CompletionService获取多线程返回值 CompletionService和ExecutorCompletionService详解 Java并发编程系列之十五:Executor框架

  4. 试讲DOCKER专用

    内容概要: DOCKER简介 为什么要用DOCKER DOCKER的应用场景 DOCKER基础 一 DOCKER简介 Docker是Docker.Inc公司开源的一个基于轻量级虚拟化技术的容器引擎项目 ...

  5. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  6. PHP流程控制 - if 语句

    PHP - if 语句 if 语句用于仅当指定条件成立时执行代码. 语法 if (条件) { 条件成立时要执行的代码; } 如果当前时间小于 20,下面的实例将输出 "Have a good ...

  7. Python XML解析

    什么是XML? XML 指可扩展标记语言(eXtensible Markup Language). 你可以通过本站学习XML教程 XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这 ...

  8. 在配置静态IP的时候遇到 ：bringing up interface eth0 : error unknown connection

    首先这是动态ip配置成功的结果 接下来切换到root用户来配置静态的 按照静态ip的配置方法配置好文件后(具体过程这里就不多加说明) 然后保存退出 当我们重启网卡的时候问题来了(因为本人有点强迫症,多 ...

  9. smfony设置量表之间的关系

    设置量表之间的关系 验证是否ok 查看我们定义是否有问题 数据库操作 http://www.2cto.com/database/201504/387197.html  设置时间段数据库自动插入时间 不 ...

  10. 65. sqlserver执行存储过程实例

    declare @param varchar(500)exec sp_PUB_GetFlowStatus @ret output,10011,88,1,12print @ret