0

オンデマンドで slickgrid に新しい行を追加する方法はありますか? たとえば、クリックすると新しい行が表示されるボタンをページに配置します。

4

5 に答える 5

3

これは、dataView.addItem（params）を使用して簡単に実行でき、paramsをパラメーターに置き換えるだけです。

function addNewRow(){
   var item = { "id": "new_" + (Math.round(Math.random() * 10000)), "Controller": tempcont, "SrNo1": tempsrno };             
   dataView.addItem(item);
}

ここで、id、Controller、SrNo1はcolunmのidです。

于 2012-07-12T06:32:36.250 に答える
1

「onAddNewRow」リスナーをグリッド オブジェクトにサブスクライブすることにより、ボタン クリックなどで行を動的に追加できます。多くの人が示唆しているように、dataView プラグインを使用してデータとやり取りすることをお勧めします。「enableAddRow」オプションを「true」に設定する必要があることに注意してください。

まず、DataView では、新しい行を追加するときに一意の行「id」を設定する必要があります。これを計算する最良の方法は、dataView.getLength() を使用して、現在グリッドに存在する行数を取得することです (これを新しい行の ID として使用します)。DataView の addItem 関数には、アイテム オブジェクトが必要です。そのため、空のアイテム オブジェクトを作成し、id を追加します。

次に、データを追加するときに 1 つのセルのみにフォーカスします。そのデータを入力した後 (そのセルをぼかして)、DataView は、行の残りのセルのいずれにもデータを入力していないことに気付き (もちろん)、それらの値をデフォルトで「未定義」にします。これは実際には望ましい効果ではありません。したがって、明示的に設定した列をループして、項目オブジェクトに値 "" (空の文字列) を追加することができます。

第三に、すべてのセルを空白にしたくありません。実際には、元のセルに入力されたデータが表示されるようにします。そのデータがあるので、最後に設定して、以前に設定した "" (空の文字列) の値を上書きします。

最後に、これらの変更がすべて表示されるようにグリッドを更新します。

grid.onAddNewRow.subscribe(function (e, args) {
            var input = args.item;
            var col = Object.keys(input)[0]
            var cellVal = input[Object.keys(input)[0]]

            // firstly
            var item = {}; 
            item.id = dataView.getLength();

            // secondly
            $.each(columns, function(count, value) {
                colName = value.name
                console.log(colName)
                item[colName] = ""
            })

            // thirdly
            item[col] = cellVal
            dataView.addItem(item);

            // lastly
            grid.invalidateRows(args.rows);
            grid.updateRowCount();
            grid.render();
            grid.resizeCanvas();
        });

これが役立つことを願っています。乾杯！

于 2015-04-21T18:54:25.507 に答える
0

新しい行を作成するだけでなく、ユーザーが書き込みを開始できるように、行を表示する必要がありました。私はページネーションを使用しているので、これが私がしたことです：

//get pagination info
var pageInfo = dataView.getPagingInfo();

//add new row
dataView.addItem({id: pageInfo.totalRows});

//got to last page
dataView.setPagingOptions({pageNum: pageInfo.totalPages});

//got to first cell of new row
var aux = totalRows/ pageInfo.pageSize;
var row = Math.round((aux - Math.floor(aux)) * pageInfo.pageSize, 0);
grid.gotoCell(row, 0 ,true);

ページ付けを使用する前に、これが必要でした。

var newId = dataView.getLength();
dataView.addItem({id: newId});
grid.gotoCell(newId, 0 ,true);
于 2013-02-21T15:38:18.450 に答える
0 
var newRow = {col1: "col1", col2: "col2"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);

私のためにうまく働いています。

于 2014-05-20T06:23:28.187 に答える
0

いつでも新しい行をグリッドに追加できます。行のデータ オブジェクトをグリッド データに追加するだけです。

myGridDataデータ ソース(オブジェクトの配列)からグリッドを作成するとします。新しい行オブジェクトをこの配列にプッシュするだけです。invalidateグリッド でメソッドを呼び出します。

終わり ：）

于 2012-04-23T10:11:47.663 に答える