javascript - spec - whatwg español

Shield UI XML Inline Edit

Question

No entiendo mucho Shield UI. La documentación es muy vaga para mí. Lo que me gustaría hacer es hacer que la tabla que se produce con el código a continuación sea editable. Intenté sobre todo y siento que estoy cerca pero no sirvió. ¿Podría alguien por favor guiarme? Además, he echado un vistazo a su documentación también.

<script type="text/javascript">
$(function() {
$(document).ready(function()) {
$("#grid").shieldGrid({
dataSource: {
remote: {
read: g,
modify: {
url: "xml/smt-schedule.xml"
},
},
/*End remote */
schema: {
type: "xml",
data: "ss_schedule",
fields: {
Id: {
path: "ss_id._text"
},
Part_Num: {
path: "ss_part_num._text"
},
ROHS: {
path: "ss_rohs._text"
},
Wave_SS: {
path: "ss_wave_ss._text"
},
WO: {
path: "ss_wo._text"
},
Quantity: {
path: "ss_qty._text"
},
Duration: {
path: "ss_duration._text"
},
Start_Date: {
path: "ss_wo_start._text"
},
Total_Time: {
path: "ss_total_time._text"
},
Days: {
path: "ss_est_days._text"
},
Run_Date: {
path: "ss_est_run_date._text"
},
Pulled: {
path: "ss_pulled._text"
},
Prep: {
path: "ss_prep._text"
},
SMT: {
path: "ss_smt._text"
},
Notes: {
path: "ss_notes._text"
}
},
},
/* Line 48 Schema */
},
/*Begin Code for paging */
paging: {
pageSize: 30,
pageLinksCount: 10,
messages: {
infoBarTemplate: "From {0} to {1} items of a total of {2}",
firstTooltip: "First page",
previousTooltip: "Previous page",
nextTooltip: "Next page",
lastTooltip: "Last page"
}
},
/*End of paging start line 75*/
/*End Code for paging */
rowHover: false,
columns: [{
field: "Id",
width: "20px",
editable: false
}, {
field: "Part_Num",
width: "100px",
editable: true
}, {
field: "ROHS",
width: "80px",
editable: true
}, {
field: "Wave_SS",
title: "Wave/SS",
width: "80px"
}, {
field: "WO",
width: "60px",
editable: true
}, {
field: "Quantity",
width: "80px",
editable: true
}, {
field: "Duration",
width: "80px",
editable: true
}, {
field: "Start_Date",
title: "Start Date",
width: "80px",
type: Date,
editable: true
}, {
field: "Total_Time",
title: "Total Time",
width: "80px",
editable: true
}, {
field: "Run_Date",
title: "Run Date",
width: "80px",
type: Date,
editable: true
}, {
field: "Pulled",
width: "50px",
editable: true
}, {
field: "Prep",
width: "50px",
editable: true
}, {
field: "SMT",
width: "50px",
editable: true
}, {
field: "Notes",
width: "80px",
editable: true
}, {
width: 80,
title: " ",
buttons: [{
commandName: "edit",
caption: "Edit"
}, {
commandName: "delete",
caption: "Delete"
}]
}
],
editing: {
enabled: true,
Event: "doubleclick",
type: "row",
mode: "inline",
confirmation: {
"delete": {
enabled: true,
template: function(item) {
return "Delete work order ''" + item.WO + "''?";
}
}
}
},
/*--End toolbar--*/
toolbar: [{
buttons: [{
commandName: "pdf",
caption: ''<span class="sui-sprite sui-grid-icon-export-pdf"></span> <span class="sui-grid-button-text">Export to PDF</span>''
}]
}],
exportOptions: {
proxy: "/filesaver/save",
pdf: {
fileName: "smt-schedule-report.pdf",
author: "Dynalab, Inc.",
size: "a4",
orientation: "landscape",
fontSize: 10,
margins: {
left: 40
}
} /*End pdf */
},
/*End expportOptions */
toolbar: [{
buttons: [{
commandName: "insert",
caption: "Add Record"
}],
position: "top"
}]
});
/* Begin search by typing */
var dataSource = $("#grid").swidget().dataSource,
input = $("#filterbox input"),
timeout,
value;
input.on("keydown", function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
value = input.val();
if (value) {
dataSource.filter = {
or: [{
path: "Part_Num",
filter: "contains",
value: value
}, {
path: "WO",
filter: "contains",
value: value
}
]
};
} else {
dataSource.filter = null;
}
dataSource.read();
}, 300);
/*End search by typing */
});
}
}); /*End document.ready */
</script>

Answer 1

Puede habilitar la edición utilizando esta configuración (y sus propiedades secundarias).

Luego debe anular las configuraciones de create , update y remove en remote.modify , como se muestra en este ejemplo . Puede poner algunas funciones de devolución de llamada allí, que serán llamadas por la Grilla siempre que se tome una acción similar. Esas funciones normalmente contienen un código que llama a su servidor para actualizar sus datos en una ubicación persistente.