Jquery easyui开启行编辑模式增删改操作


Posted in Javascript onJanuary 14, 2016

jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。

easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。

easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。

使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。

HTML 网页的完整框架。

easyui 节省了开发产品的时间和规模。

easyui 非常简单,但是功能非常强大。

先给大家展示效果图:

Jquery easyui开启行编辑模式增删改操作

Jquery easyui开启行编辑模式增删改操作

Html代码:

<table id="dd">
</table>

引入JS文件和CSS样式

<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery.easyui.min.js" type="text/javascript"></script>
<link href="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/default/easyui.css" rel="stylesheet"
type="text/css" />
<link href="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/icon.css" rel="stylesheet"
type="text/css" />
<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var datagrid; //定义全局变量datagrid
var editRow = undefined; //定义全局变量:当前编辑的行
datagrid = $("#dd").datagrid({
url: ‘UserCenter.aspx‘, //请求的数据源
iconCls: ‘icon-save‘, //图标
pagination: true, //显示分页
pageSize: 15, //页大小
pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: false, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: false,
idField: ‘ID‘, //主键
columns: [[//显示的列
{field: ‘ID‘, title: ‘编号‘, width: 100, sortable: true, checkbox: true },
{ field: ‘UserName‘, title: ‘用户名‘, width: 100, sortable: true,
editor: { type: ‘validatebox‘, options: { required: true} }
},
{ field: ‘RealName‘, title: ‘真实名称‘, width: 100,
editor: { type: ‘validatebox‘, options: { required: true} }
},
{ field: ‘Email‘, title: ‘邮箱‘, width: 100,
editor: { type: ‘validatebox‘, options: { required: true} }
}
]],
queryParams: { action: ‘query‘ }, //查询参数
toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () {//添加列表的操作按钮添加,修改,删除等
//添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
}
}
}, ‘-‘,
{ text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
if (r) {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].ID);
}
//将选择到的行存入数组并用,分隔转换成字符串,
//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
alert(ids.join(‘,‘));
}
});
}
else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}, ‘-‘,
{ text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改,否则不操作
if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行,当调用endEdit该方法时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
editRow = index;
//当开启了当前选择行的编辑状态之后,
//应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
}, ‘-‘,
{ text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () {
//保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
}
}, ‘-‘,
{ text: ‘取消编辑‘, iconCls: ‘icon-redo‘, handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, ‘-‘],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
console.info(rowData);
editRow = undefined;
},
onDblClickRow: function (rowIndex, rowData) {
//双击开启编辑行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});
</script>

以上实例代码给大家介绍了Jquery easyui开启行编辑模式增删改操作的相关知识,希望对大家学习有所帮助。

Javascript 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
JavaScript基本语法学习教程
Jan 14 #Javascript
JavaScript对象参数的引用传递
Jan 14 #Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 #Javascript
AngularJS初始化静态模板详解
Jan 14 #Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 #Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 #Javascript
基于javascript实现随机颜色变化效果
Jan 14 #Javascript
You might like
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
聚会通知怎么写
2015/04/23 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers