0

私はjqgridでスターター、jqgridでインライン編集を実装したい私はこのグリッドを持っています

$(function () {
    var grid = $('#list');
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        datatype: 'json',
        height: 490,
        colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'],
        colModel: [
            { name: 'REQUEST_ID', width: 100, sortable: true,hidden:true },
            { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
            { name: 'COST_ID', width: 200, sortable: true, hidden: true },
            { name: 'COST_NAME', width: 200, sortable: true },
            { name: 'COST_AMOUNT', width: 100, sortable: true },
            { name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true },
            { name: 'CURRENCY_NAME', width: 200, sortable: true },
            { name: 'REMARK', width: 200, sortable: true }
        ],
        gridview: true,
        rowNum: 20,
        rowList: [20, 40, 60],
        pager: '#pager',
        sortname: 'REQUEST_ID',
        viewrecords: true,
        sortorder: 'ASC',
        rownumbers: true,
        editurl: 'jQGridHandler.ashx',
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
               lastsel = id;
            }
         }
        });
        grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
            { multipleSearch: true, overlay: false, width: 460 });

私は最初にjqgridのすべてのcostTypeを入力し、ユーザーが金額セルに金額を入力し、currency_unitセルで通貨単位を選択したい. 皆さんありがとう。

i コードを変更しますが、データベースに保存するデータ行を取得できません このコードを書きます

$(function () {
    var lastSel;
    var grid = $('#list');
    calculateTotal = function () {
        var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd');
        var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd');
        alert(totalAmount.length);
        for (var i = 0; i <= totalAmount.length - 1; i++) {
            alert(totalTax[i] + "=" + totalAmount[i]);
        }
    };
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        direction: "rtl",
        datatype: 'json',
        height: 490,
        colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'],
        colModel: [
            { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
            { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
            { name: 'COST_ID', width: 200, sortable: true, hidden: true },
            { name: 'COST_NAME', width: 200, sortable: true },
            { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
            { name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true },
            { name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true },
            { name: 'REMARK', width: 200, sortable: true, editable: true }
        ],
        gridview: true,
        rowNum: 30,
        rowList: [30, 60, 90],
        pager: '#pager',
        sortname: 'REQUEST_ID',
        viewrecords: true,
        sortorder: 'ASC',
        caption: 'درخواست ها......',
        rownumbers: true,
        loadComplete: function () {
            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);
                }
            }
        }
    });
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
        { multipleSearch: true, overlay: false, width: 460 });

    $("#btnsave").click(function () {
        calculateTotal();
    });
});

しかし、このコードは機能しません。オレグさん、助けてくれてありがとう。

EDIT02: 私はこれを作成します

ここに画像の説明を入力

このコードで。ユーザーが保存ボタンをクリックすると、すべてのデータがすべての行がサーバーに送信されますが、機能しません

$(document).ready(function () {
    var mydata = [
            { COST_NAME: "A", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "b", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "c", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "d", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "e", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "f", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "g", COST_AMOUNT: "", CURRENCY_NAME: "" }
        ];
    var lastSel;
    var grid = $('#list');
    calculateTotal = function () {
        var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd');
        var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd');
        alert(totalAmount.length);
        for (var i = 0; i <= totalAmount.length - 1; i++) {
            alert(totalTax[i] + "=" + totalAmount[i]);
        }
    };
    grid.jqGrid({
        postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        datatype: "local",
        data: mydata,
        mtype: 'POST', 
        height: 'auto',
        colNames: [ 'COST_NAME', 'COST_AMOUNT', 'CURRENCY_NAME'],
        colModel: [
            { name: 'COST_NAME', width: 200, sortable: true },
            { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
            { name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true }
        ],
        gridview: true,
        rowNum: 30,
        rowList: [30, 60, 90],
        pager: '#pager',
        viewrecords: true,
        sortorder: 'ASC',
        rownumbers: true,
        loadComplete: function () {
            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);
                }
            }
        }
    });
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
        { multipleSearch: true, overlay: false, width: 460 });

    $("#btnsave").click(function () {
        calculateTotal();
    });
});

と体

<table id="list"></table>
<input type="button" value="Save" id="btnsave"/>

皆さんありがとう

新しい編集:私はこの問題のためにこのコードを書きます

grid.jqGrid({
    url: 'jQGridHandler.ashx',
    postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
    ajaxGridOptions: { cache: false },
    loadonce: true,
    direction: "rtl",
    pgtext: "صفحه {0} از {1}",
    datatype: 'json',
    height: 490,
    colNames: ['شماره درخواست', 'شماره بارنامه', 'شماره هزینه', 'نام هزینه', 'مبلغ', 'کد واحدهزینه ', 'توضیحات'],
    colModel: [
        { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
        { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
        { name: 'COST_ID', width: 200, sortable: true, hidden: true },
        { name: 'COST_NAME', width: 200, sortable: true },
        { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
        { name: 'CURRENCY_ID', width: 100, sortable: true, editable: true, edittype: 'select', editoptions: {
                url: "JQGridHandler.ashx?ActionPage=CurrencyUnit&Action=FillDrop",
                dataInit: function (data) {
                    var response = jQuery.parseJSON(data.responseText);
                    var s = '<select>';
                    s += '<option value="0">انتخاب کنید</option>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri.CURRENCY_ID + '">' + ri.CURRENCY_NAME + '</option>';
                        }
                    }
                    return s + "</select>";

                }
            }
        },
        { name: 'REMARK', width: 200, sortable: true, editable: true }
    ],
    gridview: true,
    rowNum: 30,
    rowList: [30, 60, 90],
    pager: '#pager',
    sortname: 'REQUEST_ID',
    viewrecords: true,
    sortorder: 'ASC',
    caption: 'درخواست ها......',
    rownumbers: true,
    loadComplete: function () {
        var strOption = "";
        $.ajax({
            url: 'JQGridHandler.ashx',
            contentType: 'application/json; charset=utf-8',
            data: { ActionPage: 'CurrencyUnit', Action: 'FillDrop' },
            success: function (data) {
                var rows = data.rows;
                strOption = '<option value=0>انتخاب کنید</option>';
                if (data.rows.length > 0) {
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var ri = rows[i];
                        strOption += '<option value="' + ri.cell[0] + '">' + ri.cell[1] + '</option>';
                    }
                }
            },
            dataType: 'json'
        });

        var $this = $(this);
        rows = this.rows;
        var l = rows.length, i, row;

        for (i = 0; i < l; i++) {
            row = rows[i];

//              var $t = grid.jqGrid('getCell', row.id, 'CURRENCY_ID');
//              var $id = $($t).attr("id");

//              $("#" + $id).val(strOption);
                    // console.log(row.id);

            var selRowId = grid.jqGrid('getGridParam', row.id);
               console.log(selRowId);
               console.log(grid.jqGrid('getCell', row.id, 'CURRENCY_ID'));

            if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
                $this.jqGrid('editRow', row.id, true);
            }

        }
    },
    editurl: "jQGridHandler.ashx"
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
    { multipleSearch: true, overlay: false, width: 460 });

最初の質問: このコードは正しいですか? そして今、ドロップダウンリストを埋めることができません。オレグさん助けてください。ありがとう

4

1 に答える 1

2

グリッド内のすべての行を列挙し、editRow内部で呼び出すことができます (コード例については、こちらloadCompleteを参照してください)。このアプローチのいくつかの欠点を理解する必要があります。

  • ループ内のインライン編集モードでグリッドの行を設定すると、行数が多い場合に動作が遅くなる可能性があります。そのため、場合によっては慎重に選択する必要がありますrowNum。パフォーマンスが低下する理由は単純です。ページ上の 1 つの要素が変更されるたびに、ページ上の他のすべての要素の位置が再計算されるか、少なくともリフローします。editRowメソッドは、行内の 1 つのセルを変更してから、別のセルを変更するなどです。すべての行にループ内で を適用するとeditRow、セルが変更されるたびにページ全体がリフローされます。大きなグリッドの場合、多くのリフローが発生します。
  • 行の編集から情報を読み取る必要がある場合は、いくつかのトリックを実行する必要がありgetRowDataますgetCol。答えでは、対応する解決策を見つけることができます。最後に保存されたデータを取得するのに十分な場合は、getLocalRowメソッドを使用できます。

更新: 編集可能な行間のキーボード ナビゲーションは、実際にはまったく別の問題です。keydownそれにもかかわらず、たとえばグリッドにイベントをバインドし、必要に応じて別のセルにフォーカスを変更することができます。たとえば、次のデモUpでは、矢印キーと矢印キーを標準のキーとDown一緒に使用する方法を示しています。TabShift+Tab

$('#list').keydown(function (e) {
    var $td = $(e.target).closest("td"),
        $tr = $td.closest("tr.jqgrow"),
        ci, ri, rows = this.rows;
    if ($td.length === 0 || $tr.length === 0) {
        return;
    }
    ci = $.jgrid.getCellIndex($td[0]);
    ri = $tr[0].rowIndex;
    if (e.keyCode === $.ui.keyCode.UP) { // 38
        if (ri > 0) {
            $(rows[ri-1].cells[ci]).find("input,select").focus();
        }
    }
    if (e.keyCode === $.ui.keyCode.DOWN) { // 40
        if (ri + 1 < rows.length) {
            $(rows[ri+1].cells[ci]).find("input,select").focus();
        }
    }
});
于 2012-06-15T11:25:03.090 に答える