0
我正在用php，html和sql为网格开发一个crud系统（通过表单创建）我正在使用框架jqxgrid（来自jqwidgets），但在更新中捕获，我可以做到这一点通过双击网格行，但我想打开一个弹出窗口进行编辑，我创建了它，我可以从数据库获取数据，但是我不能通过弹出窗口将它们插入到相同的位置，所以我无法使它工作，有人可以帮助我吗？按照我的代码，如果它可以帮助了解项目。谢谢。Jqxgrid Crud更新
<script type="text/javascript">
$(document).ready(function() {
var theme = "";
var source =
{
datatype: "json",
datafields:
[
{ name: 'pc_id' },
{ name: 'machine' },
{ name: 'owner' },
{ name: 'control' },
{ name: 'ip' },
{ name: 'mac' },
{ name: 'compartiment' },
{ name: 'serial' },
{ name: 'seal' },
{ name: 'processor' },
{ name: 'motherboard' },
{ name: 'memory' },
{ name: 'hd' },
{ name: 'notes' }
],
id: 'pc_id',
url: '../php/data.php',
deleterow: function (rowid, commit) {
// synchronize with the server - send delete command
var data = "delete=true&" + $.param({ pc_id: rowid });
$.ajax({
dataType: 'json',
url: '../php/data.php',
cache: false,
data: data,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command
var data = "update=true&machine=" + rowdata.machine + "&owner=" + rowdata.owner + "&control=" + rowdata.control;
data = data + "&ip=" + rowdata.ip + "&mac=" + rowdata.mac + "&compartiment=" + rowdata.compartiment + "&serial=" + rowdata.serial;
data = data + "&seal=" + rowdata.seal + "&processor=" + rowdata.processor + "&motherboard=" + rowdata.motherboard + "&memory=" + rowdata.memory;
data = data + "&hd=" + rowdata.hd + "¬es=" + rowdata.notes + "&pc_id=" + rowdata.pc_id;
$.ajax({
dataType: 'json',
url: '../php/data.php',
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function() {
// cancel changes.
commit(false);
}
});
}
};
// initialize the input fields.
$("#machine").jqxInput({ theme: theme });
$("#owner").jqxInput({ theme: theme });
$("#control").jqxInput({ theme: theme });
$("#ip").jqxInput({ theme: theme });
$("#mac").jqxInput({ theme: theme });
$("#compartiment").jqxInput({ theme: theme });
$("#serial").jqxInput({ theme: theme });
$("#seal").jqxInput({ theme: theme });
$("#processor").jqxInput({ theme: theme });
$("#motherboard").jqxInput({ theme: theme });
$("#memory").jqxInput({ theme: theme });
$("#hd").jqxInput({ theme: theme });
$("#notes").jqxInput({ theme: theme });
$("#machine").width(150);
$("#machine").height(23);
$("#owner").width(150);
$("#owner").height(23);
$("#control").width(150);
$("#control").height(23);
$("#ip").width(150);
$("#ip").height(23);
$("#mac").width(150);
$("#mac").height(23);
$("#compartiment").width(150);
$("#compartiment").height(23);
$("#serial").width(150);
$("#serial").height(23);
$("#seal").width(150);
$("#seal").height(23);
$("#processor").width(150);
$("#processor").height(23);
$("#motherboard").width(150);
$("#motherboard").height(23);
$("#memory").width(150);
$("#memory").height(23);
$("#hd").width(150);
$("#hd").height(23);
$("#notes").width(150);
$("#notes").height(23);
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 995,
height: 357,
source: source,
editmode: 'dblclick',
theme: theme,
pagesizeoptions: ['5', '10', '15', '20'],
scrollmode: 'deferred',
deferreddatafields: ['machine', 'ip'],
sortable: true,
pageable: true,
editable: true,
columnsresize: true,
showstatusbar: true,
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../imagens/invalid.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Deletar</span></div>");
var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../imagens/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>search</span></div>");
container.append(deleteButton);
container.append(searchButton);
statusbar.append(container);
deleteButton.jqxButton({ theme: theme, width: 70, height: 20 });
searchButton.jqxButton({ theme: theme, width: 85, height: 20 });
// delete selected row.
deleteButton.click(function (event) {
var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
// open the popup window when the user clicks a button.
id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var offset = $("#jqxgrid").offset();
$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 365, y: parseInt(offset.top) + 60} });
// show the popup window.
$("#popupWindow").jqxWindow('show');
});
// search for a record.
searchButton.click(function (event) {
var offset = $("#jqxgrid").offset();
$("#jqxwindow").jqxWindow('open');
$("#jqxwindow").jqxWindow('move', offset.left + 385, offset.top + 20);
});
},
columns: [
{ text: 'Edit', datafield: 'Edit', columntype: 'button', pinned: true, cellsrenderer: function() {
return "Edit";
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $("#jqxgrid").offset();
$("#popupEditWindow").jqxWindow({ position: { x: parseInt(offset.left) + 320, y: parseInt(offset.top) - 20 } });
// get the clicked row's data and initialize the input fields.
var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
$("#machine").val(dataRecord.machine);
$("#owner").val(dataRecord.owner);
$("#control").val(dataRecord.control);
$("#ip").val(dataRecord.ip);
$("#mac").val(dataRecord.mac);
$("#compartiment").val(dataRecord.compartiment);
$("#serial").val(dataRecord.serial);
$("#seal").val(dataRecord.seal);
$("#processor").val(dataRecord.processor);
$("#motherboard").val(dataRecord.motherboard);
$("#memory").val(dataRecord.memory);
$("#hd").val(dataRecord.hd);
$("#notes").val(dataRecord.notes);
// show the popup window.
$("#popupEditWindow").jqxWindow('open');
}
},
{ text: 'machine', datafield: 'machine', cellsalign: 'left', align: 'center', width: 150, pinned: true },
{ text: 'owner', datafield: 'owner', cellsalign: 'left', align: 'center', width: 135 },
{ text: 'control', datafield: 'control', cellsalign: 'left', align: 'center', width: 60 },
{ text: 'ip adress', datafield: 'ip', cellsalign: 'left', align: 'center', width: 120 },
{ text: 'mac adress', datafield: 'mac', cellsalign: 'left', align: 'center', width: 130 },
{ text: 'compartiment', datafield: 'compartiment', cellsalign: 'left' , align: 'center', width: 135 },
{ text: 'serial', datafield: 'serial', cellsalign: 'left', align: 'center', width: 100 },
{ text: 'seal', datafield: 'seal', cellsalign: 'left', align: 'center', width: 100 },
{ text: 'processor', datafield: 'processor', cellsalign: 'left', align: 'center', width: 135 },
{ text: 'motherboard', datafield: 'motherboard', cellsalign: 'left', align: 'center', width: 135 },
{ text: 'memory', datafield: 'memory', cellsalign: 'left', align: 'center', width: 120 },
{ text: 'HD', datafield: 'hd', cellsalign: 'left', align: 'center', width: 100 },
{ text: 'notes', datafield: 'notes', cellsalign: 'left', align: 'center', width: 150 }
]
});
// initialize the popup window and buttons.
$("#popupEditWindow").jqxWindow({
width: 350, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01
});
$("#popupEditWindow").on('open', function() {
$("#machine").jqxInput('selectAll');
});
$("#Save").jqxButton({ theme: theme });
// update the edited row when the user clicks the 'Save' button.
$("#Save").click(function() {
if (editrow >= 0) {
var row = { machine: $("#machine").val(), owner: $("#owner").val(), control: $("#control").val(), ip: $("#ip").val(), mac: $("#mac").val(), compartiment: $("#compartiment").val(), serial: $("#serial").val(), seal: $("#seal").val(), processor: $("#processor").val(), motherboard: $("#motherboard").val(), memory: $("#memory").val(), hd: $("#hd").val(), notes: $("#notes").val()
};
var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
$('#jqxgrid').jqxGrid('updaterow', rowID, row);
$("#popupEditWindow").jqxWindow('hide');
}
});
// initialize the popup window and buttons.
$("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
$("#del").jqxButton({ theme: theme });
$("#cancel").jqxButton({ theme: theme });
$("#del").click(function() {
$('#jqxgrid').jqxGrid('deleterow', id);
$("#popupWindow").jqxWindow('hide');
});
$("#cancel").click(function() {
$("#popupWindow").jqxWindow('hide');
});
// create jqxWindow.
$("#jqxwindow").jqxWindow({ resizable: false, theme: theme, autoOpen: false, width: 210, height: 180 });
// create find and clear buttons.
$("#findButton").jqxButton({ width: 70, theme: theme });
$("#clearButton").jqxButton({ width: 70, theme: theme });
// create dropdownlist.
$("#dropdownlist").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, theme: theme,
source: [
'machine', 'owner', 'ip adress', 'mac adress', 'compartiment', 'serial', 'seal', 'processor', 'motherboard', 'memory', 'HD', 'notes'
]
});
if (theme != "") {
$("#inputField").addClass('jqx-input-' + theme);
}
// clear filters.
$("#clearButton").click(function() {
$("#jqxgrid").jqxGrid('clearfilters');
});
// find records that match a criteria.
$("#findButton").click(function() {
$("#jqxgrid").jqxGrid('clearfilters');
var searchColumnIndex = $("#dropdownlist").jqxDropDownList('selectedIndex');
var datafield = "";
switch (searchColumnIndex) {
case 0:
datafield = "machine";
break;
case 1:
datafield = "owner";
break;
case 2:
datafield = "ip";
break;
case 3:
datafield = "mac";
break;
case 4:
datafield = "compartiment";
break;
case 5:
datafield = "serial";
break;
case 6:
datafield = "seal";
break;
case 7:
datafield = "processor";
break;
case 8:
datafield = "motherboard";
break;
case 9:
datafield = "memory";
break;
case 10:
datafield = "hd";
break;
case 11:
datafield = "notes";
break;
}
var searchText = $("#inputField").val();
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = searchText;
var filtercondition = 'contains';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
$("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
});
});
</script>
谢谢回复，你知道我怎么能做它？我非常失落。 我看到了另一个与服务器同步的例子 - 发送更新命令 var data =“update = true＆”+ $ .param（rowdata）; $ .ajax（{ – Maknollram
那么我该怎么做？我尝试，但失败，你能帮我吗？ – Maknollram