The following is html and js code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="assets/plugins/jquery/jquery.min.js"></script>
<link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.structure.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.theme.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/pqgrid.min.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/pqgrid.ui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/plugins/paramquery811/themes/office/pqgrid.css" />
<script src="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="assets/plugins/paramquery811/pqgrid.min.js"></script>
<link rel="stylesheet" href="assets/plugins/paramquery811/pqSelect/pqselect.min.css" />
<script src="assets/plugins/paramquery811/pqSelect/pqselect.min.js"></script>
<script src="assets/plugins/paramquery811/pqTouch/pqTouch.min.js"></script>
<script src="assets/plugins/paramquery811/localize/pq-localize-zh.js"></script>
<script src="assets/plugins/paramquery811/jsZip-2.5.0/jszip.min.js"></script>
<script src="assets/plugins/paramquery811/jsZip-utils-0.0.2/jszip-utils.min.js"></script>
<script src="assets/plugins/paramquery811/javascript-detect-element-resize/jquery.resize.js"></script>
<script src="assets/plugins/paramquery811/javascript-detect-element-resize/detect-element-resize.js"></script>
<script src="ne3.js"></script>
<title></title>
</head>
<body>
<div id="grid_editing"></div>
</body>
</html>
ne3.js
$(function () {
var btCls = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
var btDCls = "changes ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-icon-primary";
//optional function used to create pqSelect and auto open it.
function initSelect(ui) {
ui.$cell.find("select").pqSelect();
setTimeout(function () {
ui.$cell.find("select").pqSelect('open');
})
}
function saveChanges() {
var grid = this;
//attempt to save editing cell.
if (grid.saveEditCell() === false) {
return false;
}
if (grid.isDirty() && grid.isValidChange({ focusInvalid: true }).valid) {
var gridChanges = grid.getChanges({ format: 'byVal' });
gridChanges.save = gridChanges.addList;
delete gridChanges.addList;
gridChanges.update = gridChanges.updateList;
delete gridChanges.updateList;
gridChanges["delete"] = new Array();
for (var i = 0; i < gridChanges.deleteList.length; i++) {
gridChanges["delete"].push(gridChanges.deleteList
["id"]);
};
delete gridChanges.deleteList;
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/admin/post/submit", //for ASP.NET, java
data: {
jboltTable: JSON.stringify(gridChanges)
},
success: function (changes) {
grid.refreshDataAndView();
grid.history({ method: 'reset' });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var colModel = [
{ title: "ID", width:20, dataIndx: "id", editable: false },
{ title: "Unit", dataIndx: "goodsUnit", width: 30,
editor: {
type: "select",
init: initSelect,
options: []
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" }
]
},
{ title: "Name", width: 300,dataIndx: "name", editable: true },
{ title: "Price", dataIndx: "price", width: 50
// ,validations: [{ type: 'minLen', value: 1, msg: "Required"}]
},
{
title: "DEL", editable: false, minWidth: 123, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>X</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
.bind("click", function () {
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
setTimeout(function () {
var ans = window.confirm("Are you sure to delete row" + (rowIndx + 1) + "?");
grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
grid.deleteRow({ rowIndx: rowIndx });
}
})
});
}
}
];
var dataModel = {
dataType: "JSON",
location: "remote",
method: "GET",
url: "/json/goods.json"
}
$("div#grid_editing").pqGrid({
colModel: colModel,
//width: 'flex',
create: function (evt, ui) {
var grid = this,
column;
//fetch options for ShipCountry column from server.
$.getJSON("/json/unit.json", function (response) {
column = grid.getColumn({ dataIndx: 'goodsUnit' });
column.editor.options = response;
});
},
dataModel: dataModel,
trackModel: { on: true },
editModel: {
saveKey: $.ui.keyCode.ENTER,
keyUpDown: false,
clicksToEdit: 1
},
beforeCellKeyDown: function (event, ui) {
// if(!this.isValid( { rowData: ui.rowData } ).valid)
// {return;}
if (event.key == "ArrowDown" && ui.rowIndx == this.getTotalRows() - 1) {
var rowData = {}; //empty row
var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
// this.goToPage({ rowIndx: rowIndx });
this.editFirstCellInRow({ rowIndx: rowIndx });
}
if (event.key == "Delete") {
debugger;
var nodes = [];
var Sel = this.Selection().eachRow(function (rowData) {
nodes.push(rowData);
})
this.deleteNodes(nodes);
return false; //to prevent default behaviour.
}
},
toolbar: {
items: [
{
type: '<span><b>Post Management</b></span>',
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-plus', label: 'ADD', cls: btCls, listener: function () {
if (!this.isValid().valid) { return; }
var rowData = { enable: true }; //empty row
var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
this.goToPage({ rowIndx: rowIndx });
this.editFirstCellInRow({ rowIndx: rowIndx });
}
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-disk', label: 'Save', cls: btCls, listener: saveChanges,
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-cancel', label: 'Reject', cls: btCls, listener: function () {
this.rollback();
this.history({ method: 'resetUndo' });
},
options: { disabled: true }
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: btCls, listener: function () {
this.history({ method: 'undo' });
},
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-arrowrefresh-1-s', cls: btCls, label: 'Redo', listener: function () {
this.history({ method: 'redo' });
},
options: { disabled: true }
}
]
},
scrollModel: {
//autoFit: true
},
history: function (evt, ui) {
var $tb = this.toolbar();
if (ui.canUndo != null) {
$("button.changes", $tb).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $tb).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $tb).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $tb).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
filterModel: { on: true, mode: "AND", header: true },
swipeModel: { on: false },
historyModel: { checkEditable: false },
numberCell: { show: true },
resizable: true,
//scrollModel: { autoFit: false },
showBottom: false,
title: "Shipping Orders <b>(Custom editing)</b>"
});
});
Json:
{
"data": [
{
"age": 59,
"amount": 19.00,
"briefInfo": "GMRY",
"createTime": "2021-10-14 15:59:19",
"demoDate": "2021-10-15 00:00:00",
"demoTime": "15:59:11",
"enable": false,
"goodsUnit": "box",
"id": 1,
"isSystemAdmin": false,
"name": "fresh milk",
"price": 22.00,
"sortRank": 1,
"total": 2.00,
"updateTime": "2021-10-21 08:48:57"
},
{
"age": 25,
"amount": 33.00,
"briefInfo": "GMRY",
"createTime": "2021-10-14 16:04:00",
"demoDate": "2021-10-16 00:00:00",
"demoDateTime": "2021-10-15 00:00:00",
"enable": false,
"goodsUnit": "box",
"id": 2,
"isSystemAdmin": false,
"name": "Yogurt",
"price": 22.00,
"total": 6.00,
"updateTime": "2021-10-21 08:48:57"
},
{
"age": 44,
"amount": 99.00,
"briefInfo": "hyh",
"createTime": "2021-10-14 16:04:00",
"demoDate": "2021-10-20 00:00:00",
"demoDateTime": "2021-10-29 00:00:00",
"demoMonth": "2021-10",
"enable": false,
"goodsUnit": "box",
"id": 3,
"isSystemAdmin": false,
"name": "UHT",
"price": 11.00,
"total": 3.00,
"updateTime": "2021-10-21 08:48:57"
},
{
"age": 33,
"amount": 77.00,
"createTime": "2021-10-18 19:14:30",
"demoDate": "2021-10-13 00:00:00",
"demoMonth": "2021-11",
"enable": false,
"goodsUnit": "box",
"id": 4,
"isSystemAdmin": false,
"name": "drinking yougurt",
"price": 66.00,
"total": 7.00,
"updateTime": "2021-10-21 08:47:01"
}
],
"state": "ok"
}
