knockout.js JQGrid列中的文本框

anhgbhbe  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(174)

我想在textbox中显示jqgrid的一列的值,只有当我选择该单元格时,它才会出现在textbox中。但是,我想在数据加载并与jqgrid绑定时显示它。下面是我的javascript代码:

$("#denominators").jqGrid({
        url: '[path to server action for data]',
        contentType: "application/json",
        datatype: "json",
        mtype: "GET",
        colNames: ["", "Denomination Name", "Denomination Value", "Quantity Counted", "Extended Amount"],
        colModel: [
            //{ name: 'id', index: 'id', width: 55 },
            { name: "denominationid",  align: "center" },
            { name: "denominationname",  },
            { name: "multiplier", formatter: 'integer', formatoptions: { decimalPlaces: 2 }, align: "right" },
            {
                name: "denominatorcount", formatter: 'integer', editable: true, edittype: 'text', formatoptions: { decimalPlaces: 0 },
                editrules: { number: true, required: true, minValue: 0 }, align: "right",
                editoptions:
                    {
                        dataInit: function (element) {
                            $(element).keypress(function (e) {
                                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
                                    return false;
                            });
                        }
                    }
            },
            {
                name: 'total', index: 'total',  align: 'right',formatoptions: { decimalPlaces: 2 },
                formatter: function (cellvalue, options, rowObject) {
                    var denom = parseFloat(rowObject[2]).toFixed(2),
                        qty = parseInt(rowObject[3], 10);
                    return $.fmatter.util.NumberFormat(denom * qty, $.jgrid.formatter.integer);
                }
            }
        ],
        //height: '120',
        //width: null,
        shrinkToFit: false,
        'cellEdit': true,
        'cellsubmit' : 'clientArray',
        editurl: 'clientArray',
        loadonce: true,
        sortname: "DenominationID",
        sortorder: "desc",
        cmTemplate: { sortable: false },
        viewrecords: true,
        gridview: true,
        autoencode: true,
        footerrow: true,
        scrollOffset: 0,

    });
h4cxqtbf

h4cxqtbf1#

首先添加带有要加载的值的隐藏colModel

{ name: 'Total', index: 'Total', hidden: true }

并将另一列添加到文本框中

{ name: 'txtValue', index: 'txtValue'}

在gridComplete事件中对jqgrid数据执行循环,并在每个循环中创建文本框并添加隐藏列的值

gridComplete: function () {
                var grid = $("#denominators");
                var ids = grid.jqGrid('getDataIDs');

                for (var i = 0; i < ids.length; i++) {
                    var rowId = ids[i];
                    var total = $("#denominators").jqGrid('getCell', rowId, 'Total');
                    var txtValue = '<input type="text" value="' + total + '" />';

                    grid.jqGrid("setRowData", rowId, { txtValue : txtValue });
                }

            }
5f0d552i

5f0d552i2#

使用jqgrid的OnAfterGridComplete事件并迭代jqgrid数据。然后在每次迭代中,为该列添加一个文本框控件。

for (var i = 0; i < ids.length; i++) {
        var rowId = ids[i];
        var  textBox = "<input style='height:22px;width:100px;' type='text'     id='text_"+rowId+"'/>"; 
        _this.getGridElement().jqGrid('setRowData', rowId, { 'ColumnName': textBox });
   }

相关问题