0

私は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. 複数の行を編集して一度に送信できますか？
4

1 に答える 1

0

私があなたのことを正しく理解しているか確認させてください... 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

于 2012-07-26T05:55:57.750 に答える