Array map & reduce shows undefined value

Array map & reduce shows undefined value - javascript

I have two arrays named headersMap and selected_arr as follows
headersMap: [
{
text: "#",
align: "center",
sortable: true,
value: "id",
align: "start",
width: "1%",
},
{
text: "Name",
align: "center",
sortable: true,
value: "name",
align: "start",
},
{
text: "Company",
align: "center",
sortable: true,
value: "company",
align: "start",
}
]
selected_arr: ['id', 'company']
What I have tried was as follows:
let jsonObject = this.headersMap;
let selectedArray = this.selected_arr;
let filteredJsonObject = jsonObject.map(function(entry) {
return selectedArray.reduce(function(res, key) {
res[key] = entry[key];
return res;
}, {});
});
console.log(filteredJsonObject);
output:
[
{
#: undefined
company: undefined
}
]
QUESTION: what I want is to reduce the headersMap by selected_arr, the output should be as follows:
[
{
text: "#",
align: "center",
sortable: true,
value: "id",
align: "start",
width: "1%",
},
{
text: "Company",
align: "center",
sortable: true,
value: "company",
align: "start",
}
]

Use Array#filter:
const
headersMap = [
{ text: "#", align: "center", sortable: true, value: "id", align: "start", width: "1%" },
{ text: "Name", align: "center", sortable: true, value: "name", align: "start" },
{ text: "Company", align: "center", sortable: true, value: "company", align: "start" }
],
selected_arr = ['id', 'company'];
const filtered = headersMap.filter(({ value }) => selected_arr.includes(value));
console.log(filtered);

Related

how to align jqgrid table header and row column properly

table header and data rows column not align
jQuery("#tblCriticalList").jqGrid({
datatype: 'local',
colNames: ['Time', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM',
'10PM', '11PM', '12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM'],
colModel: [
{ name: 'DESC', index: 'DESC', width: 200, align: "left", frozen: true, sortable: false },
{ name: '7AM', index: '7AM', width: 35, align: "right", sortable: false },
{ name: '8AM', index: '8AM', width: 35, sortable: false, align: "right" },
{ name: '9AM', index: '9AM', width: 35, align: "right", sortable: false },
{ name: '10AM', index: '10AM', width: 35, align: "right", sortable: false },
{ name: '11AM', index: '11AM', width: 35, align: "right", sortable: false },
{ name: '12PM', index: '12PM', width: 35, align: "right", sortable: false },
{ name: '1PM', index: '1PM', width: 35, align: "right", sortable: false },
{ name: '2PM', index: '2PM', width: 35, align: "right", sortable: false },
{ name: '3PM', index: '3PM', width: 35, align: "right", sortable: false },
{ name: '4PM', index: '4PM', width: 35, align: "right", sortable: false },
{ name: '5PM', index: '5PM', width: 35, align: "right", sortable: false },
{ name: '6PM', index: '6PM', width: 35, align: "right", sortable: false },
{ name: '7PM', index: '7PM', width: 35, align: "right", sortable: false },
{ name: '8PM', index: '8PM', width: 35, align: "right", sortable: false },
{ name: '9PM', index: '9PM', width: 35, align: "right", sortable: false },
{ name: '10PM', index: '10PM', width: 35, align: "right", sortable: false },
{ name: '11PM', index: '11PM', width: 35, align: "right", sortable: false },
{ name: '12AM', index: '12AM', width: 35, align: "right", sortable: false },
{ name: '1AM', index: '1AM', width: 35, align: "right", sortable: false },
{ name: '2AM', index: '2AM', width: 35, align: "right", sortable: false },
{ name: '3AM', index: '3AM', width: 35, align: "right", sortable: false },
{ name: '4AM', index: '4AM', width: 35, align: "right", sortable: false },
{ name: '5AM', index: '5AM', width: 35, align: "right", sortable: false },
{ name: '6AM', index: '6AM', width: 35, align: "right", sortable: false }
],
shrinkToFit: false,
forceFit: false,
cellsubmit: 'clientArray',
loadonce: true,
ignoreCase: true,
rowNum: 1000,
sortorder: 'asc',
gridview: true,
width: 1185,
height: 720,
jsonReader: { cell: "" },
rowattr: function (rd) {
if (rd["DESC"] == "Hygiene and ADL") {
return { "class": "backcolor" };
}
},
loadComplete: {
}

grouping hide when click on button search

I´m used JqxGrid and I have a button "Buscar dados" => "Search" when I click on this button my group hide, and show the data but without group.
`var urlDefault = '[{ "STATUS": "--", "CODIGO_DOC": "--", "COMPETENCIA": "--", "FORNECEDOR": "--", "NUMERO_DOC": "--", "SERIE": "--", "VENCIMENTO": "--", "EMISSAO": "--", "VALOR_DOC": "--", "DESCONTO": "--", "EMPRESA": "--", "NOME_CONTA_FINANCEIRA": "--", "NOME_PLANO_CONTA": "--", "CENTRO_CUSTO": "--", "TIPO_DOC": "--", "SERVICO": "--", "FORMA_PGTO": "--", "PRIORIDADE": "--", "HISTORICO": "--", "INCIDENCIA_PARCELAS": "--", "OP_CAD": "--" }]';
var source =
{
datatype: "json",
datafields: [
{ name: 'STATUS' },
{ name: 'CODIGO_DOC' },
{ name: 'COMPETENCIA' },
{ name: 'FORNECEDOR' },
{ name: 'NUMERO_DOC' },
{ name: 'SERIE' },
{ name: 'VENCIMENTO', type: 'date' },
{ name: 'EMISSAO', type: 'date' },
{ name: 'VALOR_DOC', type: 'number' },
{ name: 'DESCONTO', type: 'number' },
{ name: 'EMPRESA' },
{ name: 'NOME_CONTA_FINANCEIRA' },
{ name: 'NOME_PLANO_CONTA' },
{ name: 'CENTRO_CUSTO' },
{ name: 'TIPO_DOC' },
{ name: 'SERVICO' },
{ name: 'FORMA_PGTO' },
{ name: 'PRIORIDADE' },
{ name: 'HISTORICO' },
{ name: 'INCIDENCIA_PARCELAS' },
{ name: 'OP_CAD' },
{ name: 'DT_CAD', type: 'date' },
],
id: 'id',
url: urlDefault,
root: 'data'
};
$('#BtnSave').click(function () {
var TIPO = '2';
var INI = '01/01/2000';
var FIM = '31/12/2022';
var url = "http://test-test";
source.url = url;
$('#jqxgrid').jqxGrid('updatebounddata');
});
$("#jqxgrid").jqxGrid(
{
height: 300,
source: source,
sortable: true,
showfilterrow: true,
filterable: true,
groupable: true,
columns: [
{ text: 'STATUS', datafield: 'STATUS', width: 120, align: 'center', cellsalign: 'center' },
{ text: 'CÓDIGO', datafield: 'CODIGO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'VALOR', datafield: 'VALOR_DOC', width: 130, groupable: true, width: 200, align: 'center', cellsalign: 'center', aggregates: ["sum"], cellsformat: 'c2' , initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 6, decimalDigits: 2 }); } },
{ text: 'COMPETENCIA', datafield: 'COMPETENCIA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'FORNECEDOR', datafield: 'FORNECEDOR', width: 160, align: 'center', cellsalign: 'center' },
{ text: 'Nº DOCUMENTO', datafield: 'NUMERO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'SÉRIE', datafield: 'SERIE', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'VENCIMENTO', datafield: 'VENCIMENTO', width: 130, align: 'center', cellsalign: 'center', cellsformat: 'dd/MM/yyyy', groupable: true },
{ text: 'EMISSAO', datafield: 'EMISSAO', width: 130, align: 'center', cellsalign: 'center', cellsformat: 'dd/MM/yyyy', groupable: true },
{ text: 'EMPRESA', datafield: 'EMPRESA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'CONTA FINANCEIRA', datafield: 'NOME_CONTA_FINANCEIRA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PLANO DE CONTA', datafield: 'NOME_PLANO_CONTA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'CENTRO CUSTO', datafield: 'CENTRO_CUSTO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'TIPO DE DOCUMENTO', datafield: 'TIPO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'SERVICO', datafield: 'SERVICO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'FORMA DE PAGAMENTO', datafield: 'FORMA_PGTO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PRIORIDADE', datafield: 'PRIORIDADE', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'HISTORICO', datafield: 'HISTORICO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PARCELAS', datafield: 'INCIDENCIA_PARCELAS', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'OP. CAD', datafield: 'OP_CAD', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'DT. CAD', datafield: 'DT_CAD', width: 100, align: 'center', cellsformat: 'dd/MM/yyyy', groupable: true, cellsalign: 'center' },
],
groups: ['FORNECEDOR']
});
});
</script>
<br><br>
`
I would like that when click on button the data show with group

EJ2 Data Grid Checkbox Selection

I have an EJ2 data grid code in Javascrpt. I have checkboxes to select 1 to many rows. Upon selecting a row(s), how do I get the "Id" of those rows? Below is my grid definition.
var grid = new ej.grids.Grid({
dataSource: #Html.Raw(JsonConvert.SerializeObject((Model), new JavaScriptDateTimeConverter())),
allowExcelExport: true,
allowTextWrap: true,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'],
//editSettings: { allowDeleting: true },
allowSelection: true,
allowFiltering: true,
allowSorting: true,
allowNumberFormatting: true,
enableVirtualization: true,
filterSettings: { type: 'Excel' },
selectionSettings: { persistSelection: true },
enableHover: true,
enableHeaderFocus: true,
height: 600,
rowHeight: 38,
allowPaging: true,
columns: [
{ type: 'checkbox', width: 10 },
{ field: "Id", visible: false, isPrimaryKey: true},
{ field: "RegistarName", headerText: "Registrar", width: 50,},
{ field: "VoterStatus", headerText: "Voter Status", width: 50,},
{ field: "strTrainedDate", headerText: "Trained", width: 50,},
{ field: "strOathDate", headerText: "Oath", width: 50,},
{ field: "Term", headerText: "Term", width: 50,},
{ field: "OrganizationTypeName", headerText: "Organization Type", width: 50,},
{ field: "RegistrarOrganizationName", headerText: "Organization", width: 50,},
{
headerText: "",
template: "#editTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#deleteTemplate",
textAlign: "center",
width: 15
},
],
});

jsgrid field "required" inside dialog doesn't work

I want to set the field with name: "Name" as required and I inserted : validate: "required" according to the jsgrid documentation(http://js-grid.com/docs/#grid-fields) but it doesn't work.
When inserting validate: "required" in my below code for jsgrid field: Name jsgrid doesn't take the required limitation and inserting blocks!!
I am almost sure that the fact that I enclose my grid inside a dialog creates the problem since validate is a parameter that can be defined both in dialog and jsgrid.
This is the code with dialog, in which I successfully display my grid inside a dialog but I cannot pass validate:"required". I also uploaded and a screenshotGrid inside dialog :
$( "#DataGrid" ).dialog({minWidth: 1000, minHeight: 500});
$("#DataGrid").jsGrid({
height: "100%",
width: "70%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
datatype: "json",
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Id", align: "center", width: 45 },
{ name: "Name", validate:"required," align: "center", type: "text", width: 45 },
{ name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
{ name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
{ name: "Initial Value", align: "center", type: "text", width: 40 },
{ name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
{ name: "Worklist Order", align: "center", type: "number", width: 20 },
{ name: "DB Datatype", align: "center", type: "text", width: 25 },
{ name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
{ name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
{ type: "control", width: 25 }
]
});
I tried the jsgrid code without dialog and it works but how will it work inside the dialog?
This code without dialog works:
$("#DataGrid").jsGrid({
height: "100%",
width: "70%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
datatype: "json",
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Id", align: "center", width: 45 },
{ name: "Name", validate:"required", align: "center", type: "text", width: 45 },
{ name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
{ name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
{ name: "Initial Value", align: "center", type: "text", width: 40 },
{ name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
{ name: "Worklist Order", align: "center", type: "number", width: 20 },
{ name: "DB Datatype", align: "center", type: "text", width: 25 },
{ name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
{ name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
{ type: "control", width: 25 }
]
});
Any ideas please? It is a complex issue.

Ok thanks to #tabalin's help I solved the problem. I had one less jsgrid archive. Now it works like a charm!

How to send JSON to server with jqGrid?

[EDIT] (I couldn't wait 3 hours to answer my question):
Well, it appears it is not the jqGrid component which is in fault, thanks to TheCodeDestroyer for figured it out.
I tested this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/smoothness/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
</style>
<script src="./js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'datas.php',
datatype: "json",
mtype: "GET",
colNames: ["ID","Client", "Projet", "Tache", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
colModel: [
{ name: "id_record", width: 55, hidden:false},
{ name: "client", width: 55, sortable:true},
{ name: "projet", width: 150, align: "right", sortable:true},
{ name: "tache", width: 150, align: "right", sortable:true},
{ name: "un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "deux", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "trois", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "quatre", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "cinq", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "six", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "onze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "douze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "treize", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "quatorze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "quinze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "seize", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix-sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix-huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix-neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-et-un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-deux", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-trois", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-quatre", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-cinq", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-six", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "trente", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "trente-et-un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
],
height: '100%',
cellEdit: true,
cellsubmit: 'remote',
cellurl: "https://ort8m12c8ckf.runscope.net",
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "id_record",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My first grid",
ajaxGridOptions: { contentType: "application/json"},
ajaxCellOptions: { contentType: "application/json"},
ajaxRowOptions: { contentType: "application/json"},
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow');
cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record');
v = JSON.stringify({valeur: value,nom_cellule: celname,id_record: cellValue});
send(v);
return v;
},
// serializeRowData: function (data) { alert("ok"); return JSON.stringify(data); },
})
function send(datas){
$.ajax({
type: "POST",
contentType: "application/json",
url: 'https://ort8m12c8ckf.runscope.net',
data: datas,
dataType: "json"
});
}
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<input type="button" value="send"></input>
</body>
</html>
So TheCodeDestroyer gave all the answers possible, and if you are in the same situation, it is probably due to your server or something like that. I posted a new topic concerning this new question just there.
[HERE IS THE FIRST QUESTION]
I am looking for a way to send JSON to server with jqGrid since yesterday. And I have still no answer.
So here is my grid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/smoothness/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
</style>
<script src="./js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'datas.php',
datatype: "json",
mtype: "GET",
colNames: ["ID","Client", "Projet", "Tache", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
colModel: [
{ name: "id_record", width: 55, hidden:false},
{ name: "client", width: 55, sortable:true},
{ name: "projet", width: 150, align: "right", sortable:true},
{ name: "tache", width: 150, align: "right", sortable:true},
{ name: "un", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "deux", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "trois", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "quatre", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "cinq", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "six", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "sept", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "huit", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "neuf", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "onze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "douze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "treize", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "quatorze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "quinze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "seize", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix-sept", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix-huit", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix-neuf", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-et-un", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-deux", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-trois", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-quatre", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-cinq", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-six", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-sept", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-huit", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-neuf", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "trente", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "trente-et-un", width: 20, align: "right", sortable:false, editable: true, key: false},
],
height: '100%',
cellEdit: true,
cellsubmit: 'remote',
cellurl: "https://ort8m12c8ckf.runscope.net",
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "id_record",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "my first grid
gridview: true,
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow');
cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record');
return {valeur:value,nom_cellule:celname,id_record:cellValue};
}
})
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
I am using the inline editing feature to send datas. Currently, the URL is referring a place where I can see what is posted (and it is not JSON my friends).
Your help would be very appreciated.

You actually use cell edit not inline edit... I don't get your code why do you set selectedRowId and cellValue? you should get those values through the event.
rowid = selectedRowId
cellValue = value
But to return JSON do this in beforeSubmitCell :
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow');
cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record');
return JSON.stringify({valeur: value,nom_cellule: celname,id_record: cellValue});
}

Develop Reference

JavaScript is the programming language of the Web.

Array map & reduce shows undefined value - javascript

Related

how to align jqgrid table header and row column properly

grouping hide when click on button search

EJ2 Data Grid Checkbox Selection

jsgrid field "required" inside dialog doesn't work

How to send JSON to server with jqGrid?

Categories

Resources