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( ...
随机推荐
- 【Spring学习笔记-MVC-1.0】Spring MVC架构介绍
作者:ssslinppp 1. 核心架构图 2. 核心架构的具体流程步骤 3. 具体的核心开发步骤 4. 常用注解 5. <mvc:annotation-driven>配置 6 ...
- bzoj1830 Y形项链
Description 小可可得到了一个可爱的Y型项链.小可可现在的项链是这个样子的:项链的最中间有一颗大珍珠作为结合点,从大珍珠上连出来3条由各种宝石串起来的链子.小可可希望让这3个链子完全一样,她 ...
- 杂项-Java：jar 包与 war 包介绍与区别
ylbtech-杂项-Java:jar 包与 war 包介绍与区别 1.返回顶部 1. 做Java开发,jar包和war包接触的挺多的,有必要对它们做一个深入的了解,特总结整理如下: 1.jar包的介 ...
- Apache JMeter配置、安装
一. 工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用,后来又扩充了其它的功能.j ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- Tcprstat测试mysql响应时间
Tcprstat测试mysql响应时间 一.tcprstat工具安装与使用 tcprstat 是一个基于 pcap 提取 TCP 应答时间信息的工具,通过监控网络传输来统计分析请求的响应时间. 使用方 ...
- word2vec 的理解
1.CBOW 模型 CBOW模型包括输入层.投影层.输出层.模型是根据上下文来预测当前词,由输入层到投影层的示意图如下: 这里是对输入层的4个上下文词向量求和得到的当前词向量,实际应用中,上下文窗口大 ...
- Windows 应用程序交互过程
应用程序 Windows的应用程序一般包含窗口(Window),它主要为用户提供一种可视化的交互方式(窗口是由线程(Thread)创建的).Windows 系统通过消息机制来让系统和用户进行交互 ...
- C# implement java like CountDownLatch
CountDownLatch是在java1.5被引入的,跟它一起被引入的并发工具类还有CyclicBarrier.Semaphore.ConcurrentHashMap和BlockingQueue,它 ...
- CentOS7 安装supervisor守护进程管理器
supervisor没有发布在标准的CentOS源在,需要安装epel源.这种方式安装的可能不是最新版本,但比较方便,安装完成之后,配置文件会自动帮你生成. 默认配置文件:/etc/superviso ...