jquery - 将行/列标记为脏，以便可以使用 .getChangedCells ('dirty' 返回)

Question

有没有办法强制 JqGrid 行/列数据为“脏”？

每当我检查 .getChangedCells('dirty') 时，我想添加一个未修改的附加行，因此使用此方法不会返回它。

我想要的只是将行/列数据强制标记为脏，这样每当我调用此方法时，它也会返回该行。

我的 jqgrid 数据是:

var mydata = [      
    {id:"1",blkNo:"101",floorNo:"04",unitNo:"184",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Draft",saleInd:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
    {id:"2,"blkNo:"101",floorNo:"04",unitNo:"184",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Draft",saleInd:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
    {id:"3",blkNo:"101",floorNo:"04",unitNo:"184",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Draft",saleInd:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
    {id:"4",blkNo:"101",floorNo:"04",unitNo:"185",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
    {id:"5",blkNo:"101",floorNo:"04",unitNo:"186",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:2,leastPrice:"200000",leastPricePSF:"200"},
    {id:"6",blkNo:"101",floorNo:"04",unitNo:"187",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:3,leastPrice:"200000",leastPricePSF:"200"},
    {id:"7",blkNo:"101",floorNo:"04",unitNo:"188",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:3,leastPrice:"200000",leastPricePSF:"200"},
    {id:"8",blkNo:"101",floorNo:"04",unitNo:"189",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:0,propertyType:0,leastPrice:"200000",leastPricePSF:"200"},
    {id:"9",blkNo:"101",floorNo:"04",unitNo:"190",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:0,propertyType:0,leastPrice:"200000",leastPricePSF:"200"},
    {id:"10",blkNo:"101",floorNo:"05",unitNo:"191",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:1,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
    {id:"11",blkNo:"101",floorNo:"05",unitNo:"192",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:2,propertyType:2,leastPrice:"200000",leastPricePSF:"200"},
    {id:"12",blkNo:"101",floorNo:"05",unitNo:"193",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:2,propertyType:2,leastPrice:"200000",leastPricePSF:"200"},
    {id:"13",blkNo:"102",floorNo:"01",unitNo:"183",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:1,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
    {id:"14",blkNo:"102",floorNo:"02",unitNo:"184",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:0,propertyType:0,leastPrice:"200000",leastPricePSF:"200"},
    {id:"15",blkNo:"103",floorNo:"03",unitNo:"183",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"}
];

这是我的 getModifiedRows 方法:

function getModifiedRows() {
    var allRowsInGrid = $('#list4').jqGrid('getRowData');

    for(j=0; j< allRowsInGrid.length;j++) 
    {
        if( allRowsInGrid[j]['unitStatus'] == 'Draft')
        { 
            var rowId = allRowsInGrid[j]['id'];   
            $('#list4').addClass("dirty-cell");     
            $("#list4").jqGrid("setCell", rowId ,'pricePSF' ,'', "dirty-cell");
        }
    }

    var retRows = $('#list4').getChangedCells('all');
    var retCol = $('#list4').getChangedCells('dirty');
    var entireGrid = $("#list4").jqGrid('getGridParam','colNames');

    if(retCol != '' && retRows != '')
    {
        alert(retCol);
        for(i=0; i< retCol.length;i++)
        {
            var obj = retCol[i];
            obj['row_Index']= retRows[i]['row_Index'];
            obj['unitStatus']= retRows[i]['unitStatus'];
            obj['pricePSF']= retRows[i]['pricePSF'];
            alert(retRows[i]['unitStatus']);
            if(retRows[i]['unitStatus'] == 'New')
            {
                retCol[i] = retRows[i];
            }
        }
        var modColData = JSON.stringify(retCol);    
        var modRows = JSON.stringify(retRows);
        document.getElementById("getGridData").value = modRows;
        document.getElementById("getModColData").value = modColData;
    }
}

虽然我没有从这段代码中得到任何错误，但我没有在下面的代码中得到这一行:

var retCol = $('#list4').getChangedCells('dirty');

正如 getModifiedRows 中明确指出的那样，我希望在 unitStatus = Draft 中返回每个单位

var retCol = $('#list4').getChangedCells('dirty');

如果我为此列传递任何硬编码值，我可以看到值发生变化，例如:

$("#list4").jqGrid("setCell", rowId ,'pricePSF' ,'200', "dirty-cell");

但我仍然无法在修改后检索它

var retCol = $('#list4').getChangedCells('dirty');

这是我的 colNames 和 colModel:

colNames:['S No','Block No','Floor No', 'Unit No', 'Street Name',' 6- Digit Postal Code' ,'Trans Id','Address','Property Type','Area (sqm)','Date of Option Issued','Nett Transacted Price ($)','Gross Transacted Price ($)','Transacted Unit Price ($psf)','Nationality Of Buyer','Interested Party Transaction','Date of Option Aborted','Unit Status','listPriceFilter','salePriceFilter','sale_Date_Filter','aborted_Date_Filter','row_Index'],
//column no [1    2           3          4          5              6              7         8         9               10      11            12            13            14                        15                         16                               17                 18           19              20                      21              22                     23
colModel:[
    {name:'id', index:'id', width:40, align:"center", sorttype:"int"},
    {name:'blkNo', index:'blkNo', width:40, align:"center", sorttype:"text", sortable:true, editable:true, editrules:{custom:true, custom_func:mandatoryChk}}, 
    {name:'storey', index:'storey', align:"center", width:40, sorttype:"text", sortable:true, editable:true,  editrules:{custom:true, custom_func:storeyCheck}},    
    {name:'unit_No',index:'unit_No', width:40, align:"center", sorttype:"text", editable:true, editrules:{custom:true, custom_func:checkUnit}, onblur: 'submit'},
    {name:'street_Name', index:'street_Name', width:60, align:"center", sorttype:"text", editable:true, editrules:{required:true}},  
    {name:'postal_code', index:'postal_code', width:60, align:"center", sorttype:"text", editable:true, editrules:{custom:true, custom_func:postalCode}},  
    // {name:'postal_code', index:'postal_code', width:60, align:"center", sorttype:"text", editable:true, editrules:{custom:true}},  
    {name:'trans_Id', index:'trans_Id', width:60, align:"center", sorttype:"text", editable:false},  
    {name:'address', index:'address', width:60, align:"center", sorttype:"text", editable:false},  
    {name:'property_Type', index:'property_Type', align:"center", width:80, sortable:true, editable:true, edittype:"select", editoptions:{value:pptyTypeStr}, formatter:'select', stype: 'select'},                 
    {name:'area', index:'area', width:50, align:"center", sorttype:"integer", editable:true, editrules:{custom:true, custom_func:myAreaCheck, number:true, required:true}},
    {name:'sale_Date', index:'sale_Date', align:"center", width:75, sorttype:"date", sortable:true, editable:true, editoptions: {
        dataInit: function (element) {
            $(element).datepicker({
                dateFormat:"dd/mm/yy",
                onSelect: function(dateText, inst) { 
                    var $input = inst.input; // the datepicker input
                    var $row = $input.parents("tr"); 
                    $("#list4").jqGrid('saveRow',$row.attr("id"), false); 
                }
            });
        }
    }},  
    //  {name:'nett_Price', index:'nett_Price', width:80, align:"center", sorttype:"currency", formatter: 'currency',formatoptions: {  thousandsSeparator: ", " , decimalPlaces: 0, defaultValue: ''  }, editable:true , editrules:{custom:true, custom_func:mynettpricecheck , number:true} },    
    {name:'nett_Price', index:'nett_Price', width:80, align:"center", sorttype:"text", editable:true, editrules:{custom:true, custom_func:mynettpricecheck }},
    // {name:'sale_Price', index:'sale_Price', width:80, align:"center", sorttype:"currency", formatter: 'currency', formatoptions: {  thousandsSeparator: ", " , decimalPlaces: 0}, editable:true ,editrules:{custom:true, custom_func:mypricecheck,number:true}},
    {name:'sale_Price', index:'sale_Price', width:80, align:"center", sorttype:"text", editable:true},
    {name:'pricePSF', index:'pricePSF', width:80, align:"center", sorttype:"text", editable:false},
    {name:'nationality_Code', index:'nationality_Code', width:80, align:"center", editable:true, sortable:true, edittype:"select", formatter:'select', stype: 'select', searchoptions:{
            sopt: ['eq'],
            dataInit: function(el){
                var defOption = $("option:contains("+defaultCategory+")",el);
                defOption.attr("selected", "selected");
                setTimeout(function(){
                    $(el).trigger('change');
                },500);
            }
        },
        sorttype: function(cell, obj) {
            return purchaserDtail[cell];
        },
        editoptions:{value:purchaserDtailStr}
    },          
    {name:'interested', index:'interested', align:"center",width:70, sortable:true, editable:true, edittype:"select", formatter:'select', stype: 'select', editoptions:{value:interestedStr}},
    {name:'dateAborted', index:'dateAborted', align:"center", width:75, sorttype:"date", sortable:true, editable:true,
        editoptions: {
            dataInit: function (element) {
                $(element).datepicker({
                    dateFormat:"dd/mm/yy",
                    onSelect: function(dateText, inst) { 
                        var $input = inst.input; // the datepicker input
                        var $row = $input.parents("tr"); 
                        $("#list4").jqGrid('saveRow',$row.attr("id"), false);
                    }
                });
            }
        }
    },
    {name:'unitStatus', index:'unitStatus', align:"center", width:60, sortable:true, editable:false},
    {name:'listPriceFilter', index:'listPriceFilter', align:"center", width:40, editable:false},
    {name:'salePriceFilter', index:'salePriceFilter', align:"center", width:40, editable:false},
    {name:'sale_Date_Filter', index:'sale_Date_Filter', align:"center", width:40, editable:false},
    {name:'aborted_Date_Filter', index:'aborted_Date_Filter', align:"center", width:40, editable:false},
    {name:'row_Index', index:'row_Index', align:"center", width:40, editable:false, key:true}
],

Answer 1

您只需添加 "dirty-cell"类到您想要标记为“脏”的单元格(<td>元素)。您可以使用例如 setCell方法将类添加到由 rowid 和列名指定的单元格:

$("#yourGridId").jqGrid("setCell", rowid, "columnName", "", "dirty-cell");

已更新:您以错误的方式提出问题。方法getChangedCells只能与 cell editing 一起使用。在单元格编辑模式下编辑的每个单元格都会得到 "dirty-cell"保存单元格修改后的类。这些行另外获得 "edited"类(class)。方法getChangedCells使用事实。

您后来发布的代码显示您使用 saveRow方法属于 inline editing 的一部分。您不能在一个网格中混合单元格编辑和内联编辑。

您没有发布您使用的完整代码。所以我不清楚你想使用哪种编辑模式。如果您确实想使用单元格编辑，那么您应该修改代码以使用 saveCell而不是saveRow 。此外，如果您需要将某些单元格标记为“脏单元格”，您需要将该行标记为

var $grid = $("#yourGridId");
$($grid[0].rows.namedItem(rowid)).addClass("edited");
$grid.jqGrid("setCell", rowid, "columnName", "", "dirty-cell");

或

var $grid = $("#yourGridId");
$("#" + $.jgrid.jqID(rowid)).addClass("edited");
$grid.jqGrid("setCell", rowid, "columnName", "", "dirty-cell");

之后您将可以使用getChangedCells方法。

如果您确实想使用内联编辑而不是单元格编辑，您将无法使用 getChangedCells ，但您可以枚举具有 <tr> 的行( editable 元素)属性。该类将添加到所有已编辑的行中。如果该属性的值为“1”，则该行现在正在编辑，您必须调用 saveRow方法来保存更改。如果该属性的值为“0”，则该行之前已被编辑过，并且可以解释为“脏”。没有 editable 的行属性未根据内联编辑进行编辑。