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)和内联 ...
随机推荐
- Atitit.解决org.hibernate.DuplicateMappingException: Duplicate class/entity mapping
Atitit.解决org.hibernate.DuplicateMappingException: Duplicate class/entity mapping 1. 排除流程::: @Depreca ...
- [svc]salt-grains
用途 1,匹配客户端 2,配置文件里使用 3,资产管理 定义grains方法1: 方法2:
- SpringMVC 之类型转换Converter 源代码分析
SpringMVC 之类型转换Converter 源代码分析 最近研究SpringMVC的类型转换器,在以往我们需要 SpringMVC 为我们自动进行类型转换的时候都是用的PropertyEdito ...
- Genymotion常见问题整合与解决方案（转）
常见问题1:Genymotion在开启模拟器时卡在了starting virtual device(注意只有tarting virtual device窗口,没有模拟器的黑屏窗口) 原因:Vir ...
- Linux下安装配置MediaWiKi全过程
0.libxml2的安装 *下载http://rpmfind.net/linux/rpm2html/search.php?query=libxml2 *执行以下Linux命令进行安装 a)gu ...
- KMP算法完整教程 (下)
下面我们用数学归纳法来解决这个填值的问题. 这里我们借鉴数学归纳法的三个步骤(或者说是动态规划?): 1.初始状态 2.假设第j位以及第j位之前的我们都填完了 3.推论第j+1位该怎么填 初始状态我们 ...
- ES6学习笔记（1，let和const）
在介绍let和const之前我们先复习一下相关的知识点. 关于函数作用域 开发过程中,在ES6(ECMA2015)标准推出之前,声明变量的方式一直都是var,而变量的作用域一般也只在函数内部,即函数作 ...
- springboot 完整企业项目搭建实记
昨天搭建ssm框架时突然想到可以搭建springboot来完美解决配置复杂的问题,今天学习了一下springboot的搭建,在此记录一下搭建的过程和踩过的坑 这里给自己定一个该框架搭建完成的目标,如下 ...
- This表示当前对象
This表示当前对象. Public void printNum(){ Int number=40: System.out.println(this.number); } 此时打印的是实例变量,而非局 ...
- 【BZOJ】1604: [Usaco2008 Open]Cow Neighborhoods 奶牛的邻居（set+并查集+特殊的技巧）
http://www.lydsy.com/JudgeOnline/problem.php?id=1604 这题太神了... 简直就是 神思想+神做法+神stl.. 被stl整的我想cry...首先,, ...