easyui 数据表格行编辑（编辑、保存、删除）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel = "stylesheet" href="themes/default/easyui.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function (){
$('#ppl_src_dg').datagrid({
iconCls:'icon-edit',
singleSelect:true,
striped:true,
columns:[[
{field:'id',title:'id',width:200,align:'center',editor:'text'},
{field:'resourceName',title:'资源名字',width:250,align:'center',
editor:{
type:'combobox',
options:{
valueField: 'label',
textField: 'value',
data: [{
label: '二狗子',
value: '二狗子'
},{
label: '三胖子',
value: '三胖子'
},{
label: '大王',
value: '大王'
}]
}
}
},
{field:'resourceNumber',title:'资源数量',width:200,align:'center',editor:'text'},
{field:'act',title:'操作',width:200,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow2('+index+')">保存</a> ';
var c = '<a href="#" onclick="cancelrow2('+index+')">取消</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow2('+index+')">编辑</a> ';
var d = '<a href="#" onclick="deleterow2('+index+')">删除</a>';
return e+d;
}
}
}
]],
toolbar: [{
text:'添加资源',
iconCls: 'icon-add',
handler:
function(){
$('#ppl_src_dg').datagrid('appendRow',{
id:'',
resourceName: '',
resourceNumber: '',
act: '',
});
}
}],
data: [
{id:'1',resourceName:'资源1',resourceNumber:'1',act:'1'},
{id:'2',resourceName:'资源2',resourceNumber:'2',act:'2'},
{id:'3',resourceName:'资源3',resourceNumber:'3',act:'3'}
],
onBeforeEdit: function (index, row) {
row.editing = true;
$('#ppl_src_dg').datagrid('refreshRow', index);
},
onAfterEdit: function (index, row) {
row.editing = false;
$('#ppl_src_dg').datagrid('refreshRow', index);
},
onCancelEdit: function (index,row,changes) {
alert(changes);
row.editing = false;
$('#ppl_src_dg').datagrid('refreshRow', index);
}
});
});
function editrow2(index){
$('#ppl_src_dg').datagrid('beginEdit', index);
}
function deleterow2(a){
var choserow=$('#ppl_src_dg').datagrid('selectRow',a);
var row=$('#ppl_src_dg').datagrid('getSelected');
var i=row.id;
if(i != ""){
$.messager.confirm('确认提交','您确认删除该资源？',function(r){
if (r){
$('#ppl_src_dg').datagrid('deleteRow',a);
}
});
}
else{
$('#ppl_src_dg').datagrid('deleteRow',a);
}
}
function saverow2(i){
var rows = $('#ppl_src_dg').datagrid('getRows');
var row = rows[i];
$('#ppl_src_dg').datagrid('endEdit',i);
var id=row.id;
var srcName=row.resourceName;
var srcNumber=row.resourceNumber;
var srcUnit =row.resourceUnit;
$.messager.confirm('确认提交','您确认保存该资源？',function(r){
if (r){
if(id != ""){
}
else{
}
}
});
}
function cancelrow2(index){
$('#ppl_src_dg').datagrid('cancelEdit', index);
}
</script>
</head>
<body>
<div class="btm-area">
<div id="ppl_preplan" class="pp_preplan">
<p><strong>tip:
</strong></p>
<p>1.由于保存的Action没有，保存和删除时会报错，故代码已注释，运用时去掉注释即可
</p>
<p>2.上方“添加资源”新增一行，右边可编辑行
</p>
<div class="border">
<div class="label_box"><label for="ppl_preplan_src"><strong>资源列表
</strong></label></div>
<div>
<table id="ppl_src_dg"></table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-15488.html
