easyui---修改删除查询
修改：在toolsbar 修改工具中
{
text:"编辑用户",
iconCls:"icon-edit",
handler:function(){
var selectdata=$("#tableid").datagrid("getSelections");
if(selectdata.length!=1){ //判断一下长度是否为1
$.messager.show({ //多选不选提示用户
title:"用户提示",
msg:"请选择一条记录进行修改"
});
}else{
$("#dd").dialog({
title:"用户修改"
});
flag="update";
$("#userform").form("clear");
$("#dd").dialog("open");
$("#userform").form("load",{
id:selectdata[0].id,
username:selectdata[0].username,
age:selectdata[0].age,
city:selectdata[0].city,
password:selectdata[0].password,
starttime:selectdata[0].startTime,
endtime:selectdata[0].endTime,
description:selectdata[0].description,
salary:selectdata[0].salary,
birthday:selectdata[0].birthday,
sex:selectdata[0].sex
});
}
}
}
html:
<div id="dd" title="用户新增" class="easyui-dialog" style="width:400px;height:400px;" closed=true>
<form id="userform" method="post">
<input type="hidden" name="id" >
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"
required="true" class="easyui-validatebox" validType="namerules"
missingMessage="用户名不能为空"
></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间"
></td>
</tr>
<tr>
<td>性别</td>
<td>男：<input type="radio" name="sex" value="1"> 女：<input
type="radio" name="sex" value="0"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet1?method=getcity" valueField="id" textField="name"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary" id="salary" validType="salrules[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td>
</tr>
<tr>
<td>起始时间</td>
<td><input type="text" name="starttime" id="starttime"></td>
</tr>
<tr>
<td>结束时间</td>
<td><input type="text" name="endtime" id="endtime"></td>
</tr>
</table>
<tr colspan="2" align="center">
<td colspan="2"><a class="easyui-linkbutton" id="btn">点击</a></td>
<td colspan="2"><a class="easyui-linkbutton" id="btn1">关闭</a></td>
</tr>
</form>
</div>
第一步:调用datagrid 的getSelection方法，确定复选框选中情况，该方法返回数组，没有选中就会返回null,控制修改只有一个，判断一下长度是否为1，防止多选不选,给用户一个提示，
修改之前清空一下form表单，因为第一次修改之后，关闭第二次再点修改，仍有第一次修改数据，所以在弹出修改表单之前，清空一下数据，这里的清空可以form的clear，也可以reset，radio和checkbox没有影响，因为接下来就是回显所有数据，easyui不需要在后台通过id查询一次，因为datagrid就是数据表格，保存了所有行记录，直接加载记录填充表单，调用form的load方法，
|
load |
data |
加载记录来填充表单。 |
参数是个data对象，里面是要加载的记录，这记录是直接从datagrid中取，不用再次到后台查
$("#userform").form("load",{
id:selectdata[].id,
username:selectdata[].username,
age:selectdata[].age,
city:selectdata[].city,
password:selectdata[].password,
starttime:selectdata[].startTime,
endtime:selectdata[].endTime,
description:selectdata[].description,
salary:selectdata[].salary,
birthday:selectdata[].birthday,
sex:selectdata[].sex
});
修改完之后，提交确定按钮，因为增加和修改调用的是同一个dialog,修改时候titile要变成修改
并且点击 点击按钮，分别是新增和修改，必须做一个全局变量flag标记。在新增的toolsbar中标记新增，在修改标记修改，然后再点击同一个按钮时，
判断来确定url，来执行不同的方法
$("#btn").click(function() {
$("#userform").form("submit", {
url : "${pageContext.request.contextPath}/servlet1/userServlet1?"+(flag=="add"?"method=save":"method=update"),
onSubmit : function() {
if (!$("#userform").form("validate")) {
$.messager.show({
type : "post",
title : "提示信息",
msg : "验证没有通过，请重新提交表单"
})
return false
}
},
success : function(data) {
var data = $.parseJSON(data);
$("#dd").dialog("close");
$("#tableid").datagrid("reload");
$.messager.show({
title : data.status,
msg : data.message
})
},
error : function(data) {
var data = $.parseJSON(data);
$.messager.show({
title : data.status,
msg : data.message
})
}
})
})
var flag;
$("#tableid").datagrid({
url:"servlet1/userServlet1?method=getList",
height:,
// width:1000,
fit:true,
fitColumns:true,
toolbar:[
{text:"新增用户",
iconCls:"icon-add",
handler:function(){
$("#dd").dialog({
title:"用户新增"
});
$("#userform").get().reset();
$("#dd").dialog("open");
flag="add";
}
},
{
text:"编辑用户",
iconCls:"icon-edit",
handler:function(){
var selectdata=$("#tableid").datagrid("getSelections");
if(selectdata.length!=){
$.messager.show({
title:"用户提示",
msg:"请选择一条记录进行修改"
});
}else{
$("#dd").dialog({
title:"用户修改"
});
flag="update";
$("#userform").form("clear");
$("#dd").dialog("open");
$("#userform").form("load",{
id:selectdata[].id,
username:selectdata[].username,
age:selectdata[].age,
city:selectdata[].city,
password:selectdata[].password,
starttime:selectdata[].startTime,
endtime:selectdata[].endTime,
description:selectdata[].description,
salary:selectdata[].salary,
birthday:selectdata[].birthday,
sex:selectdata[].sex
});
}
}
}, {text:"查询用户",
iconCls:"icon-search",
handler:function(){
$("#mylayout").layout("expand","north");
}
}, {text:"删除用户",
iconCls:"icon-remove",
handler:function(){
var selectdata=$("#tableid").datagrid("getSelections"); //选择的复选框个数
if(selectdata<=){
$.messager.show({ //至少有一个选上
title:"友好提示",
msg:"请至少选择一条记录"
})
}else{
$.messager.confirm("提示信息","确认删除",function(t){
if(t){
var ids=""; //封装成id字符串发送到后台，像这种"1,2,3,4",这种方式表单提交相同name值，浏览器就是这么封装的，后台只要将这个字符串通过request.getparameter获得，split转化维数组，然后
在数组遍历中一个个删除
for(var i=;i<selectdata.length;i++){
ids=ids+selectdata[i].id+",";
}
ids=ids.substring(,ids.length-);
$.post("servlet1/userServlet1?method=delete",{
ids:ids
},function(data){
data= $.parseJSON(data);
$("#tableid").datagrid("reload");
$.messager.show({
title:data.status,
msg:data.message
})
});
}else{
return false;
}
});
}
}
}
],
columns:[[ {title:"复选框",
checkbox:true
},
{
field:"age",
title:"年龄",
width:,
sortable:true
},
{field:"username",
title:"姓名",
width:
},
{
field:"city",
title:"城市",
width:,
formatter:function(value,rdata,rowindex){
cityarray.forEach(function(dom,index){
for(var key in dom){
if(key==value){
name=dom[key];
}
}
})
return name;
}
},
{field:"password",
title:"密码",
width:
},
{field:"sex",
title:"性别",
width:
},
{field:"birthday",
title:"生日",
width:
},
{field:"salary",
title:"薪水",
width:,
sortable:true
},{field:"startTime",
title:"起始时间",
width:
},{field:"endTime",
title:"结束时间",
width:
}
,{field:"description",
title:"描述",
width:
}
]],
striped:true,
loadMsg:"正在加载...",
rownumbers:true,
//singleSelect:true ,
//sortName:"age",
// sortOrder:"desc",
//remoteSort:false,
rowStyler:function(rowIndex,rowData){
// console.info(rowIndex);
// console.info(rowData);
if(rowData.age===){
return "background:red";
}
},
pagination:true,
pageSize:,
pageList:[,,,,,],
//
//fitColumns:false
})
查询：
当我点击查询用户，上面就会展开用户查询，
一开始是这样的
这时要用到easyui layout布局，分两大块，上面是north,下面是center,center一定要有，因为center是其他分区计算得到的
有个layout有个特性collapsed=true，默认就是折叠起来的
<div class="easyui-layout" style="width:100%;height:100%;" id="mylayout">
<div region="north" title="用户查询" style="width:100%;height:100px" collapsed=true>
<form id="searchUser" method="post" >
用户名：<input type="text" class="easyui-validatebox" validType="namerules" name="username">
起始时间：<input type="text" class="easyui-datetimebox" editable=false name="starttime">
结束时间：<input type="text" class="easyui-datetimebox" editable=false name="endtime">
<a class="easyui-linkbutton" id="searchbtn">查询</a>
<a class="easyui-linkbutton" id="clearbtn">清除</a>
</form>
</div>
<div region="center" title="用户列表">
<table id="tableid"></table>
</div>
</div>
在查询的toolbar中
{text:"查询用户",
iconCls:"icon-search",
handler:function(){
$("#mylayout").layout("expand","north"); //回调函数，点击查询用户工具时，就会将layout的region=north展开，调用layout的expand方法
}
}
接着就是点击查询按钮，按多条件查询，easyui做了简化，
直接调用datagrid的load方法
|
load |
param |
加载并显示第一页的行，如果指定 param 参数，它将替换 queryParams 特性。 |
可以携带参数再次向后端发送请求加载，
注意这里的param就是json对象{key:value,key:value} formData,不是queryString形式，过去在序列化随笔中已经详细说明
$("#searchbtn").click(function(){
$("#tableid").datagrid("load",serializeForm($("#searchUser")));
})
});
//js方法：序列化表单
function serializeForm(form){
var obj = {};
console.log(form.serializeArray());
$.each(form.serializeArray(),function(index){
if(obj[this['name']]){
obj[this['name']] = obj[this['name']] + ','+this['value'];
} else {
obj[this['name']] =this['value'];
}
});
console.log(obj);
return obj;
}
这种按条件查询的，后台可以map接收，因为条件是变化的， 以后可以再map中put，可扩展
这里查询的时间实体类和数据库都是字符串类型，数据库中可以进行>= <=判断日期来查询数据
排序：（可不是仅仅只有一列排序，其他列不动，要查询数据库，是整个数据表按照某个字段排序）
可以点击标题栏进行升序降序
需要关闭本地排序，本地排序是初始化不按照服务端返回的数据顺序排序而是按照指定的字段排序
//sortName:"age",
// sortOrder:"desc",
//remoteSort:false,
注释掉本地排序， 然后自定义排序，在columns特性中，columns是哪些字段展示数据
在需要自定义排序字段中加上sorttable：true，这是columns特性，不是datagrid特性
columns:[[ {title:"复选框",
checkbox:true
},
{
field:"age",
title:"年龄",
width:,
sortable:true
},
{field:"username",
title:"姓名",
width:
},
{
field:"city",
title:"城市",
width:,
formatter:function(value,rdata,rowindex){
cityarray.forEach(function(dom,index){
for(var key in dom){
if(key==value){
name=dom[key];
}
}
})
return name;
}
},
{field:"password",
title:"密码",
width:
},
{field:"sex",
title:"性别",
width:
},
{field:"birthday",
title:"生日",
width:
},
{field:"salary",
title:"薪水",
width:,
sortable:true
},{field:"startTime",
title:"起始时间",
width:
},{field:"endTime",
title:"结束时间",
width:
}
,{field:"description",
title:"描述",
width:
}
然后就可以看到箭头，点击箭头就会发现它会发送请求到后端，并携带sort ,order排序字段和排序规则asc desc，在后端需要获取这些字段然后拼接sql查询数据库即可，这里就可以发现map好处，可以put到map中，然后再dao层从数据库取map中的数据，拼接
easyui---修改删除查询的更多相关文章
- Hibernate 插入,修改,删除,查询语句
/* *具体操作hibernate的类 *增加,删除,修改,按ID查询,模糊查询,查询全部 **/ public class PersonOperate { //在hibernate中所有操作都是由S ...
- ado.net c#基本的增加,修改,删除,查询
自己初次学习用的,各种不规范,注释没写 class AdoDemo { static string strConn = @"Data Source=server1;Initial Catal ...
- spring-data-jpa 新增 修改 删除 查询 分页
1.查询所有数据 findAll() 2.分页查询 findAll(new PageRequest(0, 2)) 3.根据id查询 findOne() 4.根据实体类属性查询: findByPro ...
- Xamarin.Android 入门实例（4）之实现对 SQLLite 进行添加/修改/删除/查询操作
1.Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...
- mysql 数据库 添加查询 修改 删除
cmd 命令行模式操作数据库 添加查询 修改 删除 ( 表 字段 数据) 一 查看数据库.表.数据字段.数据 1 首先配置环境变量 进入mysql 或者通过一键集成工具 打开mysql命令行 ...
- JavaWeb_day03_员工信息添加修改删除
day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...
- 9_13学习完整修改和查询&&实体类，数据访问类
完整修改和查询:中间变量运用. 1.先查 2.执行操作 ---------------------------------------------------- namespace ADO.NET_小 ...
- ADO.NET(完整修改和查询、实体类，数据访问类)
一.完整修改和查询 在编写c#语句时需考虑到用户体验,例如在编写修改语句时,需要考虑到输入的内容在数据库中是否能够找到. 中间变量运用. 1.先查 2.执行操作 完整修改语句: bool has = ...
- Web 1三级联动 下拉框 2添加修改删除 弹框
Web 三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- Linux创建修改删除用户和组
Linux 创建修改删除用户和组 介绍 在日常的维护过程中创建用户操作用的相对会多一些,但是在这个过程中涉及到的知识点就不单单就是useradd了,接下来就来详细了解账号管理的相关信息. 用户信息 先 ...
随机推荐
- 预防 app crash 之 unrecognized selector
处理unrecognized selector异常原因 假如封装一个方法,在其他模块调用该方法时,传入参数不匹配则crash.比如下面的方法:本应该传入的参数类型为NSMutableArray,如果传 ...
- 基于Centos搭建 Mono 开发环境
系统要求: CentOS 7.2 64 位操作系统 安装 Mono 安装前的准备 yum install yum-utils 执行命令添加安装包仓库 rpm --import "http:/ ...
- 【C语言】数组名传递给函数，数组的sizeof变为4的原因
C语言中,数组名作为参数传递给函数时,退化为指针,sizeof对指针操作结果应该是4.例子如下: #include<iostream> using namespace std; void ...
- input框触发回车事件
window.event只能在IE下运行,不能在firefox下运行,这是因为firefox的event只能在事件发生的现场使用. 在firefox里直接调用event对象会报undefined. ...
- 第三部分：Android 应用程序接口指南---第二节：UI---第九章 搜索
第9章 搜索 在android平台上搜索是一个核心的用户功能.无论内容位于设备或网络上,用户应该能够搜索任何对它们可用的数据.为了创建一个一致的用户搜索体验,Android平台提供了一个搜索框架帮助你 ...
- 物联网架构成长之路(18)-接阿里云OSS服务
1.申请/购买OSS服务 在阿里云上申请/购买OSS服务, 然后在会得AccessKeyID,AccessKeySecret,bucketName 这三个东西 2.增删改查 在pom.xml文件上增加 ...
- ⑥NuPlayer播放源码分析之DecoderBase分析
NuPlayer播放源码分析之DecoderBase分析 [时间:2017-02] [状态:Open] [关键词:android,nuplayer,开源播放器,播放框架,DecoderBase,Med ...
- Nginx 1.9+PHP5.6 环境搭建
PHP5. 下载安装包 #wget http://mirrors.sohu.com/php/php-5.6.2.tar.gz #tar -zxf php- 安装php依赖的包 #yum inst ...
- (原)关于获取ffmpeg解析rtsp流sdp中带有sps,pps的情况
转载请注明出处:http://www.cnblogs.com/lihaiping/p/6612511.html 今天同事准备在android下使用ffmpeg来获取rtsp流,问我如何获取获取sps ...
- xml 转map dom4j
http://ziyu-1.iteye.com/blog/469003 传过来一个xml文件,需要转换成Map,能够应对不用结构的xml,而不是只针对固定格式的xml. 转换规则: 1.主要是Map与 ...