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( ...
随机推荐
- 新生代老年代GC组合
新生代通常存活时间较短,因此基于Copying算法来进行回收,所谓Copying算法就是扫描出存活的对象,并复制到一块新的完全未使用的空间中 在执行机制上JVM提供了串行GC(SerialGC).并行 ...
- Jquery_artDialog对话框弹出
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口l 自适应内容artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适 ...
- 可以ping通ip地址，但是访问80，或者8080报错
这个是服务器的防火墙的原因,一般linux防火墙默认是打开的,并且只开放22端口,用于远程连接. 这个时候需要关闭防火墙,或者开放端口.
- elastix php session保存地点
这段时间要做 asterisk 的HA 放啊,需要同步session,所以做了下来研究. 1)elastix中的session 其实是存放在 /tmp/目录中的.可是/etc/php.ini中的[se ...
- Immunity Debugger学习笔记
图1::Immunity主界面 注意事项:最下方的PyCommands窗格既可以执行调试命令也可以执行python脚步文件. 1.PyCommands学习 在 Immunity 中执行 Python ...
- [datatable]借助DataTable的Compute方法
借助DataTable的Compute方法,DataTable中数据不用事先排好序. 下面代码中的dt是跟前面的是一样的 DataTable dtName = dt.DefaultView.ToTab ...
- springBoot----@ConditionalOnxxx相关注解总结
下面来介绍如何使用@Condition public class TestCondition implements Condition { /** * 只有返回true,才会启用配置 */ pub ...
- django-查询按时间排序
Meta类实现 class News(models.Model): title = models.CharField(max_length=35) desc = models.CharField(ma ...
- openStack虚拟机error 错误状态基于差异镜像+基镜像做恢复
- jQuery ajax - serializeArray() 方法
定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. ...