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 并且我希望用户在 Amount 单元格中输入金额并在 currency_unit 单元格中选择货币单位，当用户在行中单击时，在此网格中，此行更改为可编辑，但我希望在加载页面时所有行都是可编辑的。谢谢大家。

我更改代码但我无法获取数据行以保存在数据库中我编写此代码

$(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。性能缓慢的原因很简单：页面上一个元素的每一次变化都需要重新计算页面上所有其他元素的位置，或者至少要重排。editRow方法更改行中的一个单元格，然后更改另一个单元格，依此类推。在每个单元格修改后，对所有行应用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 回答