javascript - 分配唯一 ID Jgrid 行-6ren

javascript - 分配唯一 ID Jgrid 行

转载作者：行者123 更新时间：2023-12-02 20:32:57

我正在使用 Jgrid.i 希望每次将新行分配给该行时都将新行添加到表中。

我正在使用添加行

var AddNewRow = function(id){
                      var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                                       Deliverables:"",Complete:""};

                      var lastsel2 = i+1;
                      //debugger;
                      var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
//                  if (su) { 
//                          jQuery('#test').editRow(lastsel2,true); 
//                                            
//                     
//                           }  


                      };

我的完整代码是......

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

     var check=\$retrivexml;
      alert(check);
      </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" />-->
    <!--<link href="../../Content/css/Test/jquery-ui.css" rel="stylesheet" type="text/css" />-->
    <!--<link href="../../Content/css/Test/ui.jqgrid.css" rel="stylesheet" type="text/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" src="../../Content/js/Jgrid js/grid.base.js"></script> 
    <script type="text/javascript" src="../../Content/js/Jgrid js/grid.formedit.js"></script> -->

    <script type="text/javascript">

     jQuery(document).ready( function() {

      var i=3;  
     var grid = jQuery("#test");
            var MyExportToXml = function (grid) {
                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 AddNewRow = function(id){
                      var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                                       Deliverables:"",Complete:""};

                      var lastsel2 = i+1;
                      //debugger;
                      var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
//                  if (su) { 
//                          jQuery('#test').editRow(lastsel2,true); 
//                                            
//                     
//                           }  


                      };

     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',
     height: "100%",

     ondblClickRow: function(id, iRow, iCol, e) {alert(iRow);}, 

     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"});
      }
     },


    });
    jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false}).navButtonAdd('#pagediv', { caption:"New", buttonicon :'ui-icon-circle-plus', title: "Add New Row",
       onClickButton: function() {
           AddNewRow (grid);
       }
    });


    $("#export").click(function(){
                MyExportToXml (grid);
            });


      });
    </script>

</head>
<body>
    <form id="form1">
        <div align="center">
            <div id="pagediv">
            </div>
            <table id="test" align="center">
            </table>
            <input type="BUTTON" id="export" value="Export" />
        </div>
    </form>
</body>
</html>

最佳答案

我已经使用..解决了这个问题

我计算网格中的所有行，然后将计数加 1..

onClickButton: function() {
    var last = jQuery('#test').jqGrid('getGridParam','records'); 
    AddNewRow (last);
}

var AddNewRow = function(id){

    var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
                   Deliverables:"",Complete:""};

    var lastsel2 = parseInt(id) + 1;

    var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;

};

关于javascript - 分配唯一 ID Jgrid 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3784779/

文章推荐： javascript - 为什么 typeof 称为运算符而不是函数？

文章推荐： javascript - jQuery UI 对话框从缓存中选择标题

java - jqGrid 问题，需要 jQuery.jgrid 但存在 $.jgrid
我使用 jqGrid 作为 JIRA 插件，并包含 jquery 和 jqgrid 库作为 Web 资源。我已根据需要在 jqGrid 中设置了一列，当我尝试提交相应列为空的表单时，我在 fireb
java - 无法使用新值重新加载 JGrid
我在 java 中使用 JQuery 和 JGrid。我有一个网格 jQuery("#table1").jqGrid({ .............. ...
javascript - Jgrid 单击按钮保存单元格
嗨，我正在使用 afterSaveCell，如果我们修改单元格然后它就会触发。我的场景是我在保存更改按钮上对数据库进行批量更新。但是当用户编辑单元格并到达另一个单元格时，我会将修改记录在数组中。但
javascript - 分配唯一 ID Jgrid 行
我正在使用 Jgrid.i 希望每次将新行分配给该行时都将新行添加到表中。我正在使用添加行 var AddNewRow = function(id){ v
javascript - jQuery.jgrid.parseDate 日期格式化
我已经搜索过这个但找不到任何人试图用 jqGrid 格式化程序来做我正在做的事情。我有一个我试图解析的日期，它在 jqGrid 表中不，但我在其他网站上使用 jqGrid，我希望使用 jqGrid
joomla2.5 - Joomla jgrid.published 不工作
我在 joomla 后端有这样的代码。 published, $i, 'products.', TRUE, 'cb'); ?> 发布功能正常工作，将我发送到我的 Controller 产品和方法发布。
jquery - jqgrid 错误 - b.jgrid.jqID 不是函数
我正在尝试开始使用 jQuery 插件 jqGrid，但是它给了我错误 - “b.jgrid.jqID 不是函数”。我从http://www.trirand.com/blog/?page_id=6下载
jquery - jqgrid 中的 $.jgrid.nav 用于 jquery
我在同一页面中有两个不同的 jqGrid。在第一个网格中，我使用以下代码为导航栏中的添加和编辑按钮设置了自定义功能: $.jgrid.nav.addfunc =
jquery - jqgrid中的"Undefined"消息，"b.jgrid.formatter is undefined"
当我向 jqgrid 发送 JSON 响应时，我收到“未定义”消息，Firebug 告诉我: b.jgrid.formatter is undefined [Break On This Error]

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 分配唯一 ID Jgrid 行