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( ...
随机推荐
- winform 控件没有Cursor属性时的处理办法
开发程序时,有时我们需要鼠标滑过空件时鼠标变成手型,这样触发动作更为贴近实际.但是有的控件不存在Cursor这个属性,就需要我们自己实现. 具体方法: /// <summary> /// ...
- BASIC-25_蓝桥杯_回形取数
示例代码: #include <stdio.h>#define N 200 int main(void){ int num[N][N]; int i= 0, j = 0 , k = 0 , ...
- shelve的简单使用
shelve类似于一个key-value数据库,可以很方便的用来保存Python的内存对象,其内部使用pickle来序列化数据,简单来说,使用者可以将一个列表.字典.或者用户自定义的类实例保存到she ...
- selenium进阶
一.切换 1.window窗口切换 @Test public void test3(){ System.out.println(driver.getWindowHandle()); String ol ...
- 关于Linux服务器磁盘空间占满问题的解决方法
下面给大家分享一篇关于Linux服务器磁盘占满问题解决方法(/dev/sda3 满了),需要的的朋友参考下吧 下面我们一起来看一篇关于Linux服务器磁盘占满问题解决(/dev/sda3 满了), ...
- 企业常用的RPC框架比较
RPC框架比较 语言 协议 服务治理 社区 机构 Hessian 多语言 hessian(二进制) – 不活跃 Caucho Thrift 多语言 thrift – 活跃 Apache Fin ...
- 2018ICPC网络赛(焦作站)K题题解
一.题目链接 https://nanti.jisuanke.com/t/31720 二.题意 给$N$种船只,第$i$种船的载重量是$V_i$,数量是$2^{C_i}-1$.接下来有$Q$次询问,每次 ...
- mysql5.6修改字符编码，ERR：Illegal mix of collations for operation 'concat'
mysql5.6修改字符编码,ERR:Illegal mix of collations for operation 'concat' 1.问题起因:搭建环境初始化mysql的时候看到mysql配置文 ...
- 20180129周一之学习PYTHON笔记【PYTHON2写个自动点击学习功能】
pyautogui.click(pyautogui.center(pyautogui.locateOnScreen('sy.png'))) #点击该截图一次 --------------------- ...
- CentOS 6.6下Cacti安装部署
Cacti简介 本章结构 常见平台 常见的服务器监控软件 cacti,流量与性能监测为主----http://www.cacti.net/ nagios,服务与性能监测为主---http://www. ...