【问题标题】:Jgrid Problem Generating XML生成 XML 的 Jgrid 问题
【发布时间】:2010-09-16 10:49:25
【问题描述】:

我正在使用 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>

谢谢。

【问题讨论】:

  • 奇怪的是,您定义了 3 次相同的 'tax' 列和两次相同的 'invdate' 列。您的程序中是否有同样的问题,或者只是在这里发布代码时出错?

标签: javascript jquery xml jquery-plugins jqgrid


【解决方案1】:

要将数据导出到 XML,您可以将 jQuery("#test").jqGrid ('getGridParam', 'data') 与 JsonXml.js 中包含到 jqGrid 的 xmlJsonClass.json2xml 结合使用。

我创建了一个工作示例来演示这种方式:http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm。您可以使用外部按钮或 jqGrid 导航器中的按钮进行导出。在示例中,我仅显示与 alert 函数相关的导出数据。与您找到的文件相同的数据here

【讨论】:

    【解决方案2】:

    嗨,奥列格,我正在使用相同的代码,但它没有产生正确的输出。我的代码是

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

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

    【讨论】:

    • 您是否收到错误消息或错误的 XML 是您单击“导出”按钮吗?你在jQuery("#bedata").click 上做的事情是错误的。首先,您在每次点击时将新按钮添加到导航器。接下来,如果选择了一行,则添加空行与所选行具有相同的 id。这很糟糕! ID 必须唯一才能拥有正确的 HTML。
    • 当我点击导出按钮时,我只使用硬编码标签恢复空白 xml。
    • 它在 var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') } 中返回空值;
    • @Shivi:刚才无意中看到你给我写的。请阅读以下信息meta.stackexchange.com/questions/43019/…。如果您只是对他自己的答案他自己的问题写评论,那么只有没有人会看到任何通知。所以你的消息无法阅读。在我看来,您遇到了问题,因为您使用了datatype: "xml",它是 not local 数据类型。要填充data,您必须拥有datatype: "xmlstring" 或使用loadonce:true 参数。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多