我不了解很多Shield UI。文档对我来说很模糊。我想要做的是使用下面的代码生成的表格变得可编辑。我已经尝试了一切，觉得我很接近但无济于事。有人可以指导我吗？另外，我也对他们的文档进行了多次研究。
<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>
答案 0 :(得分：4)
您可以使用this setting（及其子属性）启用编辑。
然后，您应该覆盖create下的update，remove和remote.modify设置，如this example所示。您可以在那里放置一些回调函数，只要采取类似的操作，Grid将调用这些函数。这些函数通常包含调用服务器端以在持久位置更新数据的代码。