数据表格 - DataGrid - 行编辑
行编辑一般用于单行数据的增删改,如果不用行编辑实现的话,对于表单数据量不大的情况,可以使用弹窗(Dialog),如果数据量比较大,也就是需要操作的数据比较多的时候,可以新开一个tab页。
- 新增/编辑
调用DataGrid的appendRow或insertRow,appendRow在当前页最后一行新增一行空白行,appendRow在指定行新增,index从0开始计数
设置可以被编辑的行
columns: [[
{field: 'id', title: 'id', width: 100},
{field: 'jine', title: '金额', width: 100, editor: 'text'},
{field: 'fangshi', title: '领款方式', width: 100, align: 'right', editor: 'text'},
{field: 'lingkuanren', title: '领款人', width: 100, align: 'right', editor: 'text'},
{field: 'beizhu', title: '备注', width: 100, align: 'right', editor: 'text'},
{
field: 'action', title: '动作', width: 150, align: 'right',
formatter: function (value, row, index) {
var e1 = '<a href="#" class="easyui-linkbutton" onclick="editrow(this)">编辑</a> ';
var e2 = '<a href="#" class="easyui-linkbutton" onclick="saverow(this)">保存</a> ';
var e3 = '<a href="#" class="easyui-linkbutton" onclick="deleterow(this)">删除</a> ';
var e4 = '<a href="#" class="easyui-linkbutton" onclick="cancelrow(this)">取消</a> ';
return e1 + e2 + e3 + e4;
}
}
]],
添加editor属性
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
} //编辑
function editrow(target) {
$('#lkd-datagrid').datagrid('beginEdit', getRowIndex(target));
} //新增
function insert() {
var row = $('#lkd-datagrid').datagrid('getSelected');
if (row) {
var index = $('#lkd-datagrid').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#lkd-datagrid').datagrid('insertRow', {
index: index,
row: {
jine: 100,
fangshi: 1
}
});
$('#lkd-datagrid').datagrid('selectRow', index);
$('#lkd-datagrid').datagrid('beginEdit', index);
}
- 保存
function saverow(target) {
console.log("Save Index:" + getRowIndex(target));//要保存的元素的索引,0 开始计数
$('#lkd-datagrid').datagrid('endEdit', getRowIndex(target));
} endEdit方法调用后,会触发
onAfterEdit: function (index, row) {
row.editing = false;
updateActions(index);
},
function updateActions(index) {
$('#lkd-datagrid').datagrid('updateRow', {
index: index,
row: {}
});
var rows = $("#lkd-datagrid").datagrid("getRows");
var row = rows[index];
console.log(row);//ajax调用
} 完整前端代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
String homePage = request.getContextPath();
%>
<%--领款单网格--%>
<div id="lkd-datagrid" fit="true"></div>
<script type="text/javascript">
$('#lkd-datagrid').datagrid({
// title: '领款单',
url: "<%=homePage%>/t00LkdController/lkd.ajax?get",
pagination: true,
// iconCls: 'icon-add',
singleSelect: true,
idField: 'id',
fit: true,
toolbar: [{
iconCls: 'icon-add',
handler: function () {
insert();
}
}],
columns: [[
{field: 'id', title: 'id', width: 100},
{field: 'jine', title: '金额', width: 100, editor: 'text'},
{field: 'fangshi', title: '领款方式', width: 100, align: 'right', editor: 'text'},
{field: 'lingkuanren', title: '领款人', width: 100, align: 'right', editor: 'text'},
{field: 'beizhu', title: '备注', width: 100, align: 'right', editor: 'text'},
{
field: 'action', title: '动作', width: 150, align: 'right',
formatter: function (value, row, index) {
var e1 = '<a href="#" class="easyui-linkbutton" onclick="editrow(this)">编辑</a> ';
var e2 = '<a href="#" class="easyui-linkbutton" onclick="saverow(this)">保存</a> ';
var e3 = '<a href="#" class="easyui-linkbutton" onclick="deleterow(this)">删除</a> ';
var e4 = '<a href="#" class="easyui-linkbutton" onclick="cancelrow(this)">取消</a> ';
return e1 + e2 + e3 + e4;
}
}
]],
onBeforeEdit: function (index, row) {
row.editing = true;
updateActions(index);
},
onAfterEdit: function (index, row) {
row.editing = false;
updateActions(index);
},
onCancelEdit: function (index, row) {
row.editing = false;
updateActions(index);
}
});
function updateActions(index) {
$('#lkd-datagrid').datagrid('updateRow', {
index: index,
row: {}
});
var rows = $("#lkd-datagrid").datagrid("getRows");
var row = rows[index];
console.log(row);//ajax调用
}
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
$('#lkd-datagrid').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target) {
$.messager.confirm('提示', '确认删除?', function (r) {
if (r) {
//被删除数据在当前网格中的顺序索引,从0开始计数
var index = getRowIndex(target);
var delId = $(target).closest('tr.datagrid-row').find("td").find("div").html();
console.log("删除ID:" + delId);
var dateJson = {
id: delId
};
$.ajax({
type: "POST",
url: "<%=homePage%>/t00LkdController/lkd.ajax?del",
data: JSON.stringify(dateJson),
cache: false,
dataType: "json",
contentType: 'application/json;charset=utf-8',
success: function (data) {
if ("-1" == data.st) {
$.messager.alert('警告', "删除失败:" + data.msg);
} else {
$('#lkd-datagrid').datagrid('deleteRow', index);
}
} }) }
});
}
function saverow(target) {
console.log("Save Index:" + getRowIndex(target));//要保存的元素的索引,0 开始计数
$('#lkd-datagrid').datagrid('endEdit', getRowIndex(target));
} function cancelrow(target) {
$('#lkd-datagrid').datagrid('cancelEdit', getRowIndex(target));
}
function insert() {
var row = $('#lkd-datagrid').datagrid('getSelected');
if (row) {
var index = $('#lkd-datagrid').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#lkd-datagrid').datagrid('insertRow', {
index: index,
row: {
jine: 100,
fangshi: 1
}
});
$('#lkd-datagrid').datagrid('selectRow', index);
$('#lkd-datagrid').datagrid('beginEdit', index);
}
</script>
数据表格 - DataGrid - 行编辑的更多相关文章
- jquery-easyui 中表格的行编辑功能
具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...
- LayUI之table数据表格获取行、行高亮等相关操作
前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- 数据表格 - DataGrid - 查询
toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...
- jquery easy ui 1.3.4 数据表格(DataGrid)(8)
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- jquery-easyui中表格的行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
随机推荐
- [moka同学收藏]Vim升华之树形目录插件NERDTree安装图解
无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ub ...
- [连载]《C#通讯(串口和网络)框架的设计与实现》-1.通讯框架介绍
[连载]<C#通讯(串口和网络)框架的设计与实现>- 0.前言 目 录 第一章 通讯框架介绍... 2 1.1 通讯的本质... 2 1 ...
- 使用C#开发数据库应用系统
第一章 初识Windows程序 01.浅谈控制台应用 解析:控制台应用程序:dos窗口中显示 Windows窗体应用程序:有控件参与的,支持事件的一种程序 02.关于窗体项目的注意点: /*01.一个 ...
- jqGrid使用setColProp方法动态改变列属性
在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...
- JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 更改pip源至国内镜像,显著提升下载速度(转载)
经常在使用Python的时候需要安装各种模块,而pip是很强大的模块安装工具,但是由于国外官方pypi经常被墙,导致不可用,所以我们最好是将自己使用的pip源更换一下,这样就能解决被墙导致的装不上库的 ...
- [转]Design Pattern Interview Questions - Part 3
State, Stratergy, Visitor Adapter and fly weight design pattern from interview perspective. (I) Can ...
- IOS 绘制圆饼图 简单实现的代码有注释
今天为大家带来IOS 绘图中圆饼的实现 .h文件 #import <UIKit/UIKit.h> @interface ZXCircle : UIView @end .m文件 #impor ...
- Linux-1:安装&忘记密码&CRT连接centos 6.5
我是在虚拟机VM安装的centos 6.5 一.Linux安装 Ctrl + Alt:鼠标退出LINUX界面 安装我是参考,当然也可以根据网上教程安装:http://oldboy.blog.51cto ...
- //build->//learn->//publish
在今年的Build大会上,微软发布了Windows Phone 8.1,以及universal Windows apps开发策略.在接下来的两个月中,会有两个全球性的活动举办,分别是//learn和/ ...