easyui datagrid行内编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>DataGrid inline editing - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/demo/demo.css">
<script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script>
var data = {"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
]}; var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
$(function(){
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
data:data,
columns:[[
{field:'itemid',title:'Item ID',width:60},
{field:'productid',title:'Product',width:100,
formatter:function(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return value;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'name',
data:products,
required:true
}
}
},
{field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
{field:'attr1',title:'Attribute',width:180,editor:'text'},
{field:'status',title:'Status',width:50,align:'center',
editor:{
type:'checkbox',
options:{
on: 'P',
off: ''
}
}
},
{field:'action',title:'Action',width:80,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow(this,'+ index +')">Save</a> ';
var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow(this,'+ index +')">Edit</a> ';
var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
return e+d;
}
}
}
]],
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)
{
$('#tt').datagrid('updateRow',{
index: index,
row:{}
});
} function getRowIndex(target)
{
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
} function editrow(target, index)
{
$('#tt').datagrid('beginEdit', getRowIndex(target)); $("#tt").attr('refreshRow',11);
} function deleterow(target)
{
$.messager.confirm('Confirm','Are you sure?',function(r){
if (r){
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
} function saverow(target, index)
{
$('#tt').datagrid('endEdit', getRowIndex(target)); var row = $("#tt").datagrid("getRows");
console.log(row[index]);
} function cancelrow(target)
{
$('#tt').datagrid('cancelEdit', getRowIndex(target));
} function insert()
{
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row:{
status:'P'
}
});
$('#tt').datagrid('selectRow',index);
$('#tt').datagrid('beginEdit',index);
}
</script>
</head>
<body>
<h2>Editable DataGrid Demo</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"> </div>
<div>Click the edit button on the right side of row to start editing.</div>
</div> <div style="margin:10px 0">
<a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
</div> <table id="tt"></table> </body>
</html>
easyui datagrid行内编辑的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
- Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】
前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的 ...
- EasyUI 启用行内编辑
创建数据网格(DataGrid) $(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', w ...
- 第一节：EasyUI样式,行内编辑,基础知识
一丶常用属性 $('#j_dg_left').datagrid({ url: '/Stu_Areas/Stu/GradeList', fit: true, // 自动适应父容器大小 singleSel ...
- datagrid行内编辑
编辑属性 :editor: { type: 'text'} $('#listShow').datagrid({ height : 478, pagesize : 20, pageList : [20, ...
- datagrid行内编辑时为datetimebox
$.extend($.fn.datagrid.defaults.editors, { datetimebox: {// datetimebox就是你要自定义editor的名称 init: functi ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- jQuery EasyUI 数据网格 - 启用行内编辑（转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html）
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
随机推荐
- X86平台简称
1.PCH:PCH全称为Platform Controller Hub,是intel公司的集成南桥.AMD SB700/710/750 http://support.amd.com/TechDocs ...
- Spring学习10-SpringMV核心组件2及SpringMVC项目示例
一.SpringMVC核心接口 5.ViewResolver接口--视图解析接口 继承体系: 5.View接口--视图接口 二.SpringMVC项目示例 (1)建立动态we ...
- 每日英语：Now on Taobao: Outsourced Care for Grandma
China's newly revised elder-care law has come as good news for a handful of entrepreneurs who specia ...
- 模板中的 TemplateBinding 问题
昨天一个朋友向我求助一个自定义水印控件绑定的问题,问题出在文本框中输入的文本,不能绑定到 相应的依赖属性上(自定义的依赖属性 PassText),他纠结了很久找不出问题所在.问题帮他解决后,这里稍 做 ...
- [转]C艹中的各种const总结
Ps: 难免碰到C家族的代码 ,各种const直接搞晕,搜集各种资料备用.... ----------------------------------------------------------- ...
- oracle 远程登录
打开命令终端,输入命令:sqlplus /nolog 输入命令:conn sys/sys@dba as sysdba
- love2d教程31--Tiled地图存档和动态修改
Advanced-Tiled-Loader有点问题,我给作者发信,可惜作者没回. 好吧,毛主席教导我们“自己动手,丰衣足食”,只好自己修改了. 1.想把0.8里的函数改为0.9的 2.添加获取对象层里 ...
- [shell]C语言调用shell脚本接口
Use popen if you want to run a shell command and want the parent process to be able to talk to the c ...
- asp.net 简单分页打印
<html> <head> <title>看看</title> <meta http-equiv="Content-Type" ...
- Swing与AWT在事件模型处理上是一致的
Swing与AWT在事件模型处理上是一致的. Jframe实际上是一堆窗体的叠加. Swing比AWT更加复杂且灵活. 在JDK1.4中,给JFRAME添加Button不可用jf.add(b).而是使 ...