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)和内联 ...
随机推荐
- 最新的Zynq资料整理
1.Zynq修炼秘籍 基于ZYNQ的FPGA基础入门 基于ZYNQ的Soc入门基础 基于ZYNQ的裸机应用开发 基于ZYNQ硬件的LINUX开发 基于ZYNQ的HLS图像算法设计 基于ZYNQ的图像处 ...
- 【Android】15.4 例15-2--Notification基本用法
分类:C#.Android.VS2015: 创建日期:2016-02-29 一.简介 上一节介绍了通知(Notification)相关的基本内容.这一节先用一个简单示例演示创建和发布本地通知的基本用法 ...
- 5.1 Zend_Log_Writer
22.2.2. 写入到数据库 22.2.3. 踩熄Writer 22.2.4. 測试 Mock 22.2.5. 组合Writers
- Android从无知到有知——NO.5
今天整一下利用广播实现ip拨号. 这一块主要用到的知识是android四大组件之中的一个的broadcast receiver(广播接收者).那么它接收什么东东呢,就是我们所无谓的一个个的事件,比 ...
- JAVA多线程之Synchronized、wait、notify实例讲解
一.Synchronized synchronized中文解释是同步,那么什么是同步呢,解释就是程序中用于控制不同线程间操作发生相对顺序的机制,通俗来讲就是2点,第一要有多线程,第二当多个线程同时竞争 ...
- Unity3D学习（十）：使用VideoPlayer在UI上播放视频
前言 每一款游戏往往启动的第一次都会播放CG动画之类的,Unity本身对于移动平台也提供了一个接口. Handheld.PlayFullScreenMovie("path") 过场 ...
- jquery文件导入问题
开发前台web,导入jquery文件的时候最好用 <script type="text/javascript" src="path"></sc ...
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- sqlite笔记（akaedu）
1.创建sql表create table student(id integer primary key, name text, score integer): 2.插入一条记录insert into ...
- C#中利用JQuery实现视频网站的缩略图采集
最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应了. 首先在网页上视频的基本结构为: div.v - ...