2

我正在将 jqGrid 与 CodeIgniter 2.1.0 一起使用。让我烦恼的是如何为特定事件的特定列分配价值

假设我在列值中输入数量和费率......当我从“费率”字段中失去焦点......净额应该计算并显示在金额字段中......

我需要在这里做的是为金额字段分配计算值......但我不知道我该怎么做?

我所做的如下:

var selIRow = 1;
var rowid='';
var iCol='';
$("#purchasedetailsgrid").jqGrid({
    url: sitepath + 'purchase/purchase_grid',
    datatype: 'json',
    mtype: 'POST',
    height:220,
    width:500,
    colNames:["","","Store Name","Item Name","Inner Pkg.","Outer Pkg.","Qty","Rate","Amount"],
    colModel:[
        {name: 'storeID_hidden_field', index:'storeID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}},
        {name: 'itemID_hidden_field', index:'itemID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}},
        {name:'store_id', index:'store_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}},
        {name:'item_id', index:'item_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}},
        {name:'inner_pkg', index:'inner_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}},
        {name:'outer_pkg', index:'outer_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}},
        {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}},
        {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [
                    {
                        type: 'keydown',
                        fn: function (e) {
                            var key = e.charCode || e.keyCode;
                            if (key == 9)//tab
                            {
                                $('#amount').val();//here in val() i need to write the value of qty and rate field
                            }
                        }
                    }
                ]
            }
        },
        {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [
                    {
                        type: 'keydown',
                        fn: function (e) {
                            var key = e.charCode || e.keyCode;
                            if (key == 13)//enter
                            {
                                var grid = $('#purchasedetailsgrid');
                                //Save editing for current row

                                grid.jqGrid('saveRow', selIRow, false, sitepath + 'purchase/purchase_grid');
                                selIRow++;
                                //If at bottom of grid, create new row
                                //if (selIRow++ == grid.getDataIDs().length) {
                                    grid.addRowData(selIRow, {});
                                //}
                                //Enter edit row for next row in grid
                                grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid');
                            }
                        }
                    }
                ]
            }
        }
    ],
    pager: '#purchasedetailstoolbar',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'inventory_id',
    sortorder: 'desc',
    viewrecords: true,
    rownumbers: true,
    gridview: true,
    multiselect: false,
    autoresize:true,
    autowidth: true,
    editurl: sitepath + 'purchase/purchase_grid',
    toolbar: [true,"top"],
    gridComplete: function () 
    {
        var grid = jQuery("#purchasedetailsgrid");
        var ids = grid.jqGrid('getDataIDs');
        if(ids == '')
        {
            grid.addRowData(selIRow, {});
            grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid');
        }
        for (var i = 0; i < ids.length; i++) 
        {

        }
    },
    caption: 'Purchase List',
}); 
jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',{view:false,edit:false,add:false,del:false,search: false});
jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar');
jQuery("#purchasedetailsgrid").jqGrid('filterToolbar',{stringResult:false,searchOnEnter : false},{autosearch: true});
var temp_purchase = $("#purchasedetailsgrid_header").html();
$("#t_purchasedetailsgrid").html(temp_purchase);
$("#refresh_purchasedetailsgrid").attr('title',"Reload Grid");

现在谁能建议我如何从一列中获取价值并将其分配给另一列?

任何建议将不胜感激。

提前谢谢

4

1 回答 1

1

您当前的代码有很多问题。例如,您写道,您需要根据 qty 和 rate 计算金额,但您dataEvents在“rate”和“amount”列中定义了一些,而不是“qty”和“rate”列。下一个问题是editRow直接在gridComplete. 因此,工具栏中的按钮inlineNav将保持错误状态。另一个问题是,您需要根据 'qty' 和 'rate' 重新计算 'amount' ,不仅因为 'qty' 和 'rate' 失去焦点,还需要将值保存在Enter.

为了更容易解决上述问题,我编写了可以修改的演示,符合您的确切要求。您可以在下面找到演示中最重要的部分:

var editingRowId = undefined,
    recomputeAmount = function () {
        var rate = $("#" + editingRowId + "_rate").val(),
            qty = $("#" + editingRowId + "_qty").val(),
            newAmount = parseFloat(rate) * parseFloat(qty);
        $("#" + editingRowId + "_amount").val(isFinite(newAmount) ? newAmount : 0);
    },
    myEditParam = {
        keys: true,
        oneditfunc: function (id) {
            editingRowId = id;
        },
        afterrestorefunc: function (id) {
            editingRowId = undefined;
        },
        aftersavefunc: function (id) {
            var $this = $(this),
                rate = $this.jqGrid("getCell", id, "rate"),
                qty = $this.jqGrid("getCell", id, "qty"),
                newAmount = parseFloat(rate) * parseFloat(qty);
            $this.jqGrid("setCell", id, "amount", newAmount);
            editingRowId = undefined;
        }
    },
    numInput = {
        type: 'keydown',
        fn: function (e) {
            var key = e.which;
            // allow only '0' <= key <= '9' or key = '.', Enter, Tab, Esc
            if ((key < 48 || key > 57) && key !== $.ui.keyCode.PERIOD &&
                key !== $.ui.keyCode.TAB && key !== $.ui.keyCode.ENTER && key !== $.ui.keyCode.ESCAPE) {
                return false;
            }
        }
    },
    recompute = {
        type: 'focusout',
        fn: function (e) {
            recomputeAmount();
        }
    };
$("#purchasedetailsgrid").jqGrid({
    colModel: [ 
        ...
        {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [ numInput, recompute ]
            }
        },
        {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [ numInput, recompute ]
            }
        },
        {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}}
    ],
    loadComplete: function () {
        var gridIdSelector = '#' + $.jgrid.jqID(this.id);
        if (this.rows.length > 1) {
            //$(this).jqGrid('editRow', this.rows[1].id, myEditParam);
            $(this).jqGrid('setSelection', this.rows[1].id, true);
            setTimeout(function() {
                // we should simulate click of the button not after the grid is loaded, but
                // after the toolbar with the cliked button will be created by inlineNav
                $(gridIdSelector + "_iledit").click();
            }, 100);
        } else {
            setTimeout(function() {
                // we should simulate click of the button not after the grid is loaded, but
                // after the toolbar with the cliked button will be created by inlineNav
                $(gridIdSelector + "_iladd").click();
            }, 100);
        }
    }
 }); 
 jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',
     {view:false,edit:false,add:false,del:false,search: false, refreshtitle: "Reload Grid"});
 jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar',
     {edit: true, add: true, editParams: myEditParam, addParams: {addRowParams: myEditParam}});

如果需要,我可以评论代码中不清楚的部分。

于 2012-05-19T16:38:45.467 回答