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 流畅动画实现原理
Sep 08 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue中render函数的使用详解
Oct 12 Javascript
浅谈JS的二进制家族
May 09 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP微信API接口类
2016/08/22 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python实现视频下载功能
2017/03/14 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
培训讲师岗位职责
2014/04/13 职场文书
阳光体育活动总结
2014/04/30 职场文书
工程承诺书怎么写
2014/05/24 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
预备党员群众意见
2015/06/01 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Python字典的基础操作
2021/11/01 Python