如何在 jqGrid 的组中添加新行？

Question

我对 jqGrid 完全陌生。我正在使用 datatype:local 的数组填充网格。

var data=[
  {date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
  {date : "01/02/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
  {date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
  {date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
  {date : "01/01/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
  {date : "01/02/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
  {date : "01/02/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
  {date : "01/03/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
  {date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"}
  ];

$("#gridTable").jqGrid({
    data : data,
    editurl:"clientArray",
    datatype: "local",
    height : 250,
    colNames: [' ','Date','Start Time','End Time','Work Function'],
    colModel : [
                {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}},
                {name: 'date',index:'date',width: 100,sorttype:'date',editable:true,editoptions : {
                    dataInit : function(element){
                        formatDatepicker(element,data);

                    }
                }},
                {name: 'starttime',index:'starttime',width: 100,sorttype:'date',editable:true},
                {name: 'endtime',index:'endtime',width: 100,sorttype:'date',editable:true},
                {name: 'workfunction',index:'workfunction',width: 100,sorttype:'date',editable:true,edittype:"select",editoptions:{value:"MA:MA;CA:CA;FC:FC"}},
                ],
                pager: "#gridPager",
                caption : "Weekly Details",
                grouping : true,
                groupingView : {
                    groupField:['date']
                }

}).navGrid("#gridPager",{edit:true,add:true,del:false},
        //edit properties
        {
    zIndex : 950,

        }
);

上面给出的是我正在使用的网格。我根据日期对网格进行分组，并且我使用 jsp 作为服务器端技术。我的问题是：

1. 我们可以向组添加一行而不将其提交到服务器。
2. 当使用新日期创建新行时，将形成一个新组。
3. 我们可以编辑多行并一次性提交吗？

Answer 1

让我确定我是否理解你的正确...1。您想在网格中添加一行但不想将数据提交到服务器？有可能... 2。您必须更清楚地了解此要求。 3.是的，可以将多行的所有编辑数据发送到服务器。

我将从 3 开始。

你可以在这里使用 multiselect: true ，这是最简单的选择。选择您要编辑的行并使用 onSelectRow 实现一个函数，该函数将使您的行在选择它们时可编辑。

然后你可以有一个按钮，它将你编辑的行数据带到服务器。

如何在选择行时使其可编辑

onSelectRow: function(id){ 
jQuery('#grid').editRow(id, true); }

或者还有另一种选择，让您的所有行都处于可编辑模式

gridComplete:OnGridComplete, //add this to your Jqgrid parameters

javascript function

function OnGridComplete(){

            var $this = $(this), rows = this.rows, l = rows.length, i, row;
            for (i = 0; i < l; i++) {
                row = rows[i];
                if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
                    $this.jqGrid('editRow', row.id, true);
                }
            }

        }

以及如何一键将编辑后的数据发送到服务器，请参阅我的答案

https://stackoverflow.com/a/11662959/1374763

现在问你第一个问题

你应该把editUrl改成clientarray，

jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');

查看此链接并转到 saveRow 参数，了解更多信息

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing