生成 XML 的 Jgrid 问题

2022-01-11 00:00:00 xml jquery jquery-plugins javascript jqgrid

我正在使用 Jgrid.我像我们大多数人一样使用 Xml 将数据注入到网格中.

我想要批量更新到数据库，我的要求是当我点击保存更改"时，它会生成当前(更新的)网格数据的 Xml.

那么，我如何生成 Jgrid 数据的 Xml.

请帮忙.

这里是代码.

<table id="测试"></表></div></表格></身体></html>

谢谢.

解决方案

嗨 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="服务器"><title>无标题页面</title><!-- <script type="text/javascript">调试器；警报($！retrivexml)；</脚本>--><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"类型=文本/css"媒体=屏幕"/><link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"媒体=屏幕"/><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><脚本类型="文本/javascript">jQuery(文档).ready(函数(){var grid = jQuery("#test");var MyExportToXml = function (grid) {debugger;var dataFromGrid = {行:grid.jqGrid('getGridParam'，'data')};var xmldata = '<?xml version="1.0" encoding="utf-8" Standalone="yes"?>
<rows>
' +xmlJsonClass.json2xml (dataFromGrid, '	') + '</rows>';警报(xml数据)；};var lastsel3;jQuery("#test").jqGrid({url:'/Content/xml/user.xml',//url: $!retrivexml,数据类型:xml"，colNames:['顾问'，'项目角色'，'任务'，'开始日期'，'结束日期'，'可交付成果'，'完成']，col型号:[{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"}}],行号:10，//行列表:[10,20,30],寻呼机:'#pagediv'，排序名称:'id'，观看记录:真实，排序顺序:desc"，标题:项目规划"，forceFit:假，细胞真，编辑网址:'clientArray'，细胞提交:'clientArray'，afterEditCell: 函数 (id,name,val,iRow,iCol){如果(名称=='SDate'){jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});}如果(名称=='EDate'){jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});}},//afterSaveCell : function(rowid,name,val,iRow,iCol) {//if(name == '金额') {//var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);//jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});//}////////if(name == '税') {//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(网格)；});jQuery("#bedata").click(function(){jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus',onClickButton:function(id){var datarow = {顾问:"，角色:"，任务:"，SDate:"，EDate:"，可交付成果:""，完成:""}；var lastsel2 = id;//调试器；var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;//如果 (su) {//jQuery('#test').editRow(lastsel2,true);//////}},标题:新按钮"，位置:最后"});//jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});});});</脚本></头><身体><form id="form1"><div id="pagediv"></div><table id="测试"></表><input type="BUTTON" id="bedata" value="Edit Selected"/>

如果我在这里犯了一些错误，请更正代码

i am using Jgrid. i am injecting the data to the Grid using Xml as we most of us do.

i want the batch update to database, my requirement that when i click on the "Save Change" it generate the Xml of current(updated) grid data.

So, how can i generate the Xml of Jgrid data.

please help.

here is the code.

<!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>

Thanks.

解决方案

Hi Oleg I am using the ths same code but it not produce the correct output.. My code is 

    <!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"?>
<rows>
' +
                              xmlJsonClass.json2xml (dataFromGrid, '	') + '</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>

Please..correct the code if i m doing some mistake here

相关文章