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 window.opener的用法分析
Apr 07 Javascript
alert和confirm功能介绍
May 21 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
浅谈Vue.js
Mar 02 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
详解React中setState回调函数
Jun 14 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
基于JavaScript 实现拖放功能
Sep 12 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优化需要注意的地方
2014/11/27 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
自主招生推荐信范文
2014/05/10 职场文书
完整版商业计划书
2014/09/15 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
重阳节简报
2015/07/20 职场文书
校园运动会广播稿
2015/08/19 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
python程序的组织结构详解
2021/12/06 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android