我正在使用Jgrid。我正在使用Xml将数据注入网格,就像我们大多数人一样。
我希望批量更新到数据库,我要求当我点击“保存更改”时,它会生成当前(更新的)网格数据的Xml。
那么,我该如何生成Jgrid数据的Xml。
请帮忙。
这是代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
//debugger;
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'id',index:'id', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'note',index:'note', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:"}}
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#test').jqGrid('restoreRow',lastsel3);
jQuery('#test').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
rowNum:10,
rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Cell Edit Example",
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='invdate') {
jQuery("#"+iRow+"_invdate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
afterSaveCell : function(rowid,name,val,iRow,iCol) {
if(name == 'amount') {
var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
}
if(name == 'tax') {
var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
}
}
});
jQuery("#test").jqGrid('navGrid','#pgwidth',{edit:true,add:true,del:true});
});
</script>
</head>
<body>
<form id="form1">
<div>
<table id="test">
</table>
</div>
</form>
</body>
</html>
感谢。
答案 0 :(得分:1)
要将数据导出到XML,您可以将jQuery("#test").jqGrid ('getGridParam', 'data')
与包含在jqGrid中的JsonXml.js中的xmlJsonClass.json2xml
结合使用。
我创建了一个以这种方式演示的工作示例:http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm。您可以使用外部按钮或jqGrid导航器中的按钮进行导出。在示例中,我只显示与alert
函数相关的导出数据。与您找到的文件here相同的数据。
答案 1 :(得分:0)
嗨Oleg我正在使用相同的代码,但它没有产生正确的输出..我的代码是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<!-- <script type="text/javascript">
debugger;
alert($!retrivexml);
</script>-->
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
var grid = jQuery("#test");
var MyExportToXml = function (grid) {debugger;
var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') };
var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
alert(xmldata);
};
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
//url: $!retrivexml,
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
{name:'Role',index:'Role', width:80, align:"right",editable:true},
{name:'Task',index:'Task', width:80, align:"right",editable:true},
{name:'SDate',index:'SDate', width:90,editable:true},
{name:'EDate',index:'EDate', width:90,editable:true},
{name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
{name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}
],
rowNum:10,
//rowList:[10,20,30],
pager: '#pagediv',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Project Planning",
forceFit : false,
cellEdit: true,
editurl:'clientArray',
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='SDate') {
jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
if(name=='EDate') {
jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
// afterSaveCell : function(rowid,name,val,iRow,iCol) {
// if(name == 'amount') {
// var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
// }
//
//
//
// if(name == 'tax') {
// var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
// }
// }
});
jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false});
$("#export").click(function(){
MyExportToXml (grid);
});
jQuery("#bedata").click(function(){
jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus',
onClickButton:function(id){
var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
Deliverables:"",Complete:""};
var lastsel2 = id;
//debugger;
var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
// if (su) {
// jQuery('#test').editRow(lastsel2,true);
//
//
// }
},
title:"New Button",
position:"last"
});
//jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
});
});
</script>
</head>
<body>
<form id="form1">
<div id="pagediv">
</div>
<table id="test">
</table>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<input type="BUTTON" id="export" value="Export" />
</form>
</body>
如果我在这里犯了一些错误,请更正代码