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( ...
随机推荐
- 小峰servlet/jsp（3）登陆功能实现
一.User模型: User.java: package com.java1234.model; public class User { private int id; private String ...
- JavaScript之图片操作1
在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
- 杂项：Office Visio
ylbtech-杂项:Office Visio Office Visio 是一款便于IT和商务人员就复杂信息.系统和流程进行可视化处理.分析和交流的软件.使用具有专业外观的 Office Visio ...
- appium 3-31626 toast识别
1.toast弹窗,普通方式不能获取 例如使用getPageSource是无法找到toast的信息,uiautomatorViewer加载页面时间较长,也很难采集到toast信息 2.通过curl命令 ...
- js判断是android访问还是ios访问
原文地址:http://blog.csdn.net/wy978651775/article/details/9014039 该博主也是转载的,但是没有标明出处. 判断原理: JavaScript是前端 ...
- MongoDB CPU 利用率高，分析慢请求
Jemeter 压测过程,发现mongodb的CPU均达到100%,需要查看mongodb的执行情况,使用mongo自带的profiling功能. profiling将请求的执行情况记录在DB下的 s ...
- centos自带的dvd中的官方base源，丢失了可以复制下面的内容
/etc/yum.repos.d/CentOS-Base.repo文件中的内容,同样适用于centos6 [base]name=CentOS-$releasever - Basemirrorlist= ...
- 使用Golang进行性能分析(Profiling)
转自:http://www.cppblog.com/sunicdavy/archive/2015/04/11/210308.html 本文介绍游戏服务器的性能分析, web服务器性能分析不在本文分析范 ...
- MapReduce On YARN
MapReduce计算框架 将计算过程分为两个阶段:Map和Reduce Map阶段并行处理输入数据: Reduce阶段对Map结果进行汇总 Shuffle连接Map和Reduce两个阶段 Map T ...
- 并发基础（二） Thread类的API总结
Thread 类是java中的线程类,提供给用户用于创建.操作线程.获取线程的信息的类.是java线程一切的基础,掌握这个类是非常必须的,先来看一下它的API: 1.字段摘要 static int M ...