<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo which uses Bootstrap 4</title>
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script> -->
<!-- the next line need be uncommented if you need to use bootstrap.min.js -->
<!--<script crossorigin="anonymous"
integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4="></script>
<script crossorigin="anonymous"
integrity="sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ="></script>-->
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
</script>
<script>
//<![CDATA[
$(function () {
"use strict";
$("#grid1b").jqGrid({
colNames : ['','name','Date','Amount','Tax','Total','Closed','Shipped via'],
colModel: [
{ name: "flag", index: "flag", width: 53 },
{ name: "name", index: "name" , width: 53 , edittype:"select", editoptions: { value: "test:테스트; test2:테스트2; test3:테스트3;test4:테스트4" },formatter: "select", formatoptions: { value: "test:테스트; test2:테스트2; test3:테스트3;test4:테스트4" }},
{ name: "invdate", index: "Date", width: 75, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" } },
{ name: "amount", index: "Amount", width: 65, template: "number" },
{ name: "tax", index: "Tax", width: 41, template: "number", editable:true ,
editrules:{number:true}
/* editrules: {
custom: true,
custom_func: validNum },
editoptions:{maxlength: 11} */
},
{ name: "total", index: "Total", width: 51, template: "number" },
{ name: "closed", index: "Closed", width: 59, template: "booleanCheckbox", firstsortorder: "desc" },
{ name: "ship_via", index: "Shipped via", width: 87, align: "center", editable:true, formatter: "select",
formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" } }
],
data: [
{ id: "10", invdate: "2015-10-01", name: "test", amount: "" },
{ id: "20", invdate: "2015-09-01", name: "test2", amount: "300", tax: "20", closed: false, ship_via: "FE", total: "320" },
{ id: "30", invdate: "2015-09-01", name: "test3", amount: "400", tax: "30", closed: false, ship_via: "FE", total: "430" },
{ id: "40", invdate: "2015-10-04", name: "test4", amount: "200", tax: "10", closed: true, ship_via: "TN", total: "210" },
{ id: "50", invdate: "2015-10-31", name: "test5", amount: "300", tax: "20", closed: false, ship_via: "FE", total: "320" },
{ id: "60", invdate: "2015-09-06", name: "test6", amount: "400", tax: "30", closed: false, ship_via: "FE", total: "430" },
{ id: "70", invdate: "2015-10-04", name: "test7", amount: "200", tax: "10", closed: true, ship_via: "TN", total: "210" },
{ id: "80", invdate: "2015-10-03", name: "test8", amount: "300", tax: "20", closed: false, ship_via: "FE", total: "320" },
{ id: "90", invdate: "2015-09-01", name: "test9", amount: "400", tax: "30", closed: false, ship_via: "TN", total: "430" },
{ id: "100", invdate: "2015-09-08", name: "test10", amount: "500", tax: "30", closed: true, ship_via: "TN", total: "530" },
{ id: "110", invdate: "2015-09-08", name: "test11", amount: "500", tax: "30", closed: false, ship_via: "FE", total: "530" },
{ id: "120", invdate: "2015-09-10", name: "test12", amount: "500", tax: "30", closed: false, ship_via: "FE", total: "530" }
],
idPrefix: "gb1_",
rownumbers: true,
datatype : "local",
mtype : "POST" ,
cellEdit:true,
viewrecords : true,
cellsubmit:"clientArray",
caption: "The grid, which uses predefined formatters and templates",
onCellSelect : function(rowId, colId, val, e) {
console.log("rowId :" , rowId);
console.log("colId :" , colId);
var flagVal = $("#grid1b").getCell(rowId, "flag");
console.log("flagVal :" , flagVal);
if(colId == 2) { //셀 선택 시, 특정 컬럼값에 따라서 셀의 edit 여부를 결정한다.
if(flagVal == "I") {
$("#grid1b").setColProp('name', {editable:true});
} else {
$("#grid1b").setColProp('name', {editable:false});
}
}
} ,afterSaveCell: function (rowid, name, val, iRow, iCol) {
if ($("#grid1b").jqGrid('getCell', rowid, "flag") != 'I' && $("#grid1b").jqGrid('getCell', rowid, "flag") != 'D') {
$("#grid1b").jqGrid('setRowData', rowid, { flag: "U"});
}
},
}).jqGrid("navGrid", "#gridPaging", {edit:false, add:false, del:false, search: false, refresh:false});;
$("#rowAdd").on("click", function() {
var data = {flag:"I", id:'', invdate:"", name:"test3", amount:"", tax: "", closed: false, ship_via: "", total: "" };
var rowId = $("#grid1b").getGridParam("reccount");
$("#grid1b").jqGrid("addRowData", rowId+1, data, 'first');
$("#grid1b").jqGrid('setRowData',rowId+1,false, { background:'yellow'});
});
$("#save").on("click", function() {
var editingCell = $("#grid1b").jqGrid("getGridParam", 'savedRow');
console.log("editingCell :: ", editingCell);
if (editingCell) { // 저장 시, 입력중인 셀은 완료처리한다.
console.log("editingCell[0] : ", editingCell[0]);
var id1 = editingCell[0].id;
var name1 = editingCell[0].ic;
$("#grid1b").jqGrid("saveCell",id1,name1);
}
setTimeout(() => {
var data = $("#grid1b").getRowData();
console.log("data ~!!! " , data);
}, 500);
});
function validNum(val, nm, valref){
if($.isNumeric(val)){
return [true, ""];
}else{
return [false, "숫자만 입력 가능 합니다."];
}
}
});
//]]>
</script>
</head>
<body>
<button id="rowAdd">rowAdd</button><button id="rowDel">rowDel</button><button id="save">save</button>
<table id="grid1b"></table>
<div id="gridPaging"></div>
</body>
</html>