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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
python简单实现AES加密和解密
2019/03/28 Python
Python如何将字符串转换为日期
2020/07/31 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
自我介绍演讲稿
2014/01/15 职场文书
高中美术教学反思
2014/01/19 职场文书
投标承诺书范本
2014/03/27 职场文书
公司证明怎么写
2014/09/22 职场文书
写给领导的感谢信
2015/01/22 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
基于Go语言构建RESTful API服务
2021/07/25 Golang