이 js 코드는 다른 사람이 작성한 코드라 최고는 아닐 수도 있지만, 다른 사람이 기능적인 문제를 먼저 해결하는 데 도움이 될 수 있다면 특히 좋을 것이라고 개인적으로 생각합니다. 약간 수정하여 내 프로젝트에 사용했습니다. 여기에 게시하여 공유하겠습니다. 백엔드에서 사용하는 TinkPHP는 추가, 삭제, 수정 확인이 비교적 간단하므로 여기에는 올리지 않겠습니다. 게으르기 때문에 프런트 데스크 렌더링을 게시하지 않겠습니다.
$(function () {var datagrid; //定义全局变量datagridvar editRow = undefined; //定义全局变量：当前编辑的行datagrid = TskupluAddPacket.datagrid({
url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源iconCls: 'icon-save', //图标pagination: true, //显示分页pageSize: 15, //页大小pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数fit: true, //datagrid自适应宽度fitColumn: false, //列自适应宽度striped: true, //行背景交换nowap: true, //列内容多时自动折至第二行border: false,
idField: 'packetid', //主键sortName : 'packetid', //排序字段sortOrder : 'desc', //排序方式columns: [[//显示的列{field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
{ field: 'packunit', title: '包装单位', width: 100, sortable: true,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packqty', title: '包装细数', width: 100,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packspec', title: '包装规格', width: 100,
editor: { type: 'validatebox', options: { required: true} }
}
]],
queryParams: {
pluid: $('#addpluid').val()
}, //查询参数toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0 row: {}
}); //将新插入的那一行开户编辑状态datagrid.datagrid("beginEdit", 0);//给当前编辑的行赋值editRow = 0;
}
}
}, '-',
{ text: '删除', iconCls: 'icon-remove',
handler: function () { //删除时先获取选择行 var rows = datagrid.datagrid("getSelections"); //选择要删除的行 if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {if (r) {var ids = [];for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].packetid);
}//将选择到的行存入数组并用,分隔转换成字符串，//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id//alert(ids.join(',')); $.ajax({
url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
type : 'POST',
data : {
ids : ids.join(',')
},
beforeSend : function (){
$.messager.progress({
text : '正在处理中...'});
},
success : function (data){
$.messager.progress('close');if (data >0){
datagrid.datagrid('reload');
$.messager.show({
title : '操作提醒',
msg : data + '条数据被成功删除！'})
} else if( data == -999 ) {
$.messager.alert('删除失败', '对不起，您没有权限！', 'warning');
} else {
$.messager.alert('删除失败', '没有删除任何数据！', 'warning');
}
}
});
}
});
} else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit',
handler: function () {//修改时要获取选择到的行var rows = datagrid.datagrid("getSelections");//如果只选择了一行则可以进行修改，否则不操作if (rows.length == 1) {//当无编辑行时if (editRow == undefined) {//获取到当前选择行的下标var index = datagrid.datagrid("getRowIndex", rows[0]);//开启编辑datagrid.datagrid("beginEdit", index);//把当前开启编辑的行赋值给全局变量editRoweditRow = index;//当开启了当前选择行的编辑状态之后，//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save',
handler: function () { //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow);
editRow = undefined;
}
}, '-',
{ text: '取消编辑', iconCls: 'icon-redo',
handler: function () { //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {//endEdit该方法触发此事件 //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 var inserted = datagrid.datagrid('getChanges','inserted');var updated = datagrid.datagrid('getChanges','updated');if(inserted.length < 1 && updated.length <1){
editRow = undefined;
datagrid.datagrid('unselectAll');return;
}var url = '';if(inserted.length>0){
url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
}if(updated.length>0){
url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
}
$.ajax({
url : url,
type : 'POST',
data : { 'pluid': $('#addpluid').val(), 'packetid':rowData.packetid, 'packunit':rowData.packunit, 'packqty' :rowData.packqty, 'packspec':rowData.packspec
},
beforeSend : function (){
$.messager.progress({
text : '正在处理中...' })
},
success : function (data){
$.messager.progress('close'); if (data > 0){
datagrid.datagrid("acceptChanges");
$.messager.show({
title : '操作提示',
msg : '添加成功'});
editRow = undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else if (data == -999) {
$.messager.alert('添加失败', '抱歉！您没有权限！', 'warning');
} else {
datagrid.datagrid("beginEdit",editRow);
$.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});////////////////// },
onDblClickRow: function (rowIndex, rowData) {//双击开启编辑行if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});위 내용은 EasyUI dataGrid의 인라인 편집의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
