<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/icon.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="../js/jquery-easyui/jquery.easyui.min.js"></script>
<body>
<button type="button" id="but" >添加</button>
<button type="button" id="shanchu">删除</button>
<div id="tabel_con"></div>
</body>
<script>
var resultRow = new Array();
$(function () {
var r=[{name:'', number:'', pay:'', adress:''}];
createTableHeader(r);
/* var temp=;*/
$('#but').click(function () {
/* $('#tabel_con').datagrid('endEdit');*/
if(resultRow.length==0){
createTableHeader(r);
}else{
let _a=new Array();
for (let i in resultRow){
_a.push(resultRow[i]);
}
let _temp={name:'', number:'', pay:'', adress:''};
_a.push(_temp);
createTableHeader(_a);
}
})
$('#shanchu').click(function () {
var m=$('#tabel_con').datagrid('getSelections');
var index=$('#tabel_con').datagrid('getRowIndex',m[0]);
console.log(index);
})
})
function createTableHeader(data){
$("#tabel_con").datagrid({
singleSelect : false,
width : 900,
iconCls : 'icon-edit',
rownumbers : false,
data:data,
striped : true,
fitColumns : true,
freezeRow : 0,
loadMsg : "正在加载数据",
columns : [
[
{
"field" : "fk",
"checkbox" : 'true',
},
{
"field" : "name",
"title" : "姓名",
"width" : 80,
"editor":"text"
},{
"field" : "number",
"title" : "编号",
"width" : 80,
"editor":"text"
},{
"field" : "pay",
"title" : "绩效",
"width" : 80,
"editor":"text"
},
{
"field" : "address",
"title" : "住址",
"width" : 80,
"editor":"text"
}]
],
onClickCell: onClickCell,
//编辑单元格之后触发
onAfterEdit: function(rowIndex, rowData, changes){ //定义编辑后的事件
/*for(var i in resultRow){
if(resultRow[i].id == rowData.id){
resultRow[i] = rowData;
}
}*/
resultRow[rowIndex]=rowData;
/* resultRow.push(rowData)*/
createTableHeader(resultRow);
},
onRowContextMenu: function(e, rowIndex, rowData){ //定义编辑后的事件
$('#tabel_con').datagrid('endEdit',rowIndex);
},
/*onClickRow:function (rowIndex, rowData) {
$('#tabel_con').datagrid('endEdit',rowIndex);
}*/
/*onLoadSuccess : function(data) {
$('#tabel_con').datagrid('clearSelections');
}*/
});
}
//编辑easyui单元格的方法
$.extend($.fn.datagrid.methods, {
editCell : function(jq, param) {
return jq.each(function() {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#tabel_con').datagrid('validateRow', editIndex)) {
$('#tabel_con').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//点击单元格触发的方法
function onClickCell(index, field, value) {
if (endEditing()) {
$('#tabel_con').datagrid('selectRow', index).datagrid(
'editCell', {
index : index,
field : field
});
editIndex = index;
}
}
</script>
</html>