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写的一个DIV 弹出网页对话框
Aug 14 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
javascript每日必学之运算符
Feb 16 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
node.js基础知识汇总
Aug 25 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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/08/28 PHP
php Session存储到Redis的方法
2013/11/04 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
javascript 写类方式之五
2009/07/05 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
python rsa 加密解密
2017/03/20 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
办公室助理岗位职责
2013/12/25 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
分享python函数常见关键字
2022/04/26 Python