javascript - 我需要从另一个页面直接打开 jqgrid 中特定记录的编辑表单

Question

我需要从另一个页面打开 jqgrid 中特定记录的编辑表单。

我是否需要在 jqgrid 中捕获加载事件，然后从 URL 中提取 id 并手动选择记录，或者是否有更简单的方法？

由于分页，记录在加载时根本不可能出现在页面上。

关键列是“BLS_ID”

这是打开页面的代码:

function OpenInNewTab()
{    
  var bls_id = '#BLS.bls_id#';    
  var win=window.open('#URLFOR(controller="realty", action="rpi_data_sheet_view")#?template=RPI_Deleted_BLS&BLS_ID='+bls_id, '_blank');
  win.focus();
}

这是 jqgrid 页面的代码:

<cfoutput>
<script type="text/javascript" src="includes/js/jquery.BlockUI.js"></script>

<script type="text/javascript">
    // called by grid-wrapper when form is shown
    function setup_archived_installations_table_form(form) {
        var form = $(form);

        form.find('##AREA').hfds('disable');
        form.find('##INST_NAME').hfds('disable');
        form.find('##BLS_NO').hfds('disable');
        form.find('##SUB_NO').hfds('disable');
        form.find('##TRANS_DESCRIP_2').hfds('disable');
        form.find('##USE_DESC').hfds('disable');
        form.find('##DET_DESC').hfds('disable');
        form.find('##RP_CODE').hfds('disable');

        form.attr("permissionsObject", "b_bls_disposition");
        applyFormPermissions();

        //form.find('select').width(160).hfds('wideSelectFix');

        $('##DISP_DATE').addClass("date-picker");

        setup_form_elements();

        // disable everything but trans_code
        //form.find('input, select[name != "TRANS_CODE"]').hfds('disable');
    }

    $(function() {
         $('##disposition_btn').click(function() {
            var modal = $('##disposition_modal');
            var selected = $('##archived_installations_table').jqGrid('getGridParam', 'selrow');

            modal.load('#URLFor(action="disposition_form", params="bls_id=")#' + selected, function() {
                $(this).find('.date-picker').addClass("date-picker");

                modal.dialog({
                    title: 'Disposition-related Fields',
                    modal: true,
                    width: 500
                });
            });
        });

        $('##disposition_form form').live('submit', function(e) {
            var self = $(this);
            var url = $(this).attr('action');
            var modal = $('##disposition_modal');

            modal.block({message: ''});

            $.ajax({
                url: self.attr('action'),
                data: self.serialize(),
                type: 'POST',
                success: function() {
                    $('##archived_installations_table').trigger('reloadGrid');
                },
                error: function() {
                    alert('Failed to file disposition');
                },
                complete: function() {
                    modal.unblock();
                    modal.dialog('close');
                }
            });

            /*
             *$.post(url, $(this).serialize(), function(data) {
             *    $('##building_datasheet_table').trigger('reloadGrid');
             *    modal.unblock();
             *    modal.dialog('close');
             *});
             */

            return false;
        }) 
    });
</script>

<h1 class="title">Deleted Buildings, Structures, Lands</h1>

<cfsavecontent variable="BuildingTableDef">
    {
        "height": "auto",

                "autowidth" : true,
                "shrinkToFit" : false,

        "gridview": true,
        "url":"#URLFor(action="jqGrid_get", params="modelName=BLS&customSQLMethod=BLSDatasheet(0,1)")#", 
        "editurl": "#URLFor(action='saveDeletedBLS')#",
        "datatype": "json",
        "rowNum": "10", 
        "pager": "##archived_installations_pager",
        "jsonReader": {
                        "root": "ROWS",
                        "page": "PAGE",
                        "total": "TOTAL",
                        "record": "RECORDS",
                        "repeatitems": false
                    },
        "colModel":[
            { "name" : "AREA", "width": "100", "label": "Area", "editable": true, "edittype": "select", "stype":"select", "formatter": "select", "editoptions": {
                "value": "#jqGridValueString(areas, "area_code", "area_name")#"
            }},
            { "name" : "INST_NO", "width": "75" },
            { "name" : "INST_NAME", "editable": true },
                    { "name" : "PROP_TYPE", "label": "Prop Type", "formatter": "select", "editable": false, "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(prop_types, "prop_type", "prop_desc")#"
                    }},
            { "name" : "STATE", "width": "50" },
            { "name" : "COUNTY" },
            { "name" : "CITY_TOWN" },
            { "name" : "BLS_NO", "width": "75", "editable": true },
            { "name" : "SUB_NO", "width": "75", "editable": true },
            { "name" : "TRANS_CODE", "width": "75", "editable": true, "edittype": "select", "search": false, "editoptions": {
                "value": "#jqGridValueString(trans_codes, "trans_code2", "trans_descrip2")#"
            }},
            { "name" : "TRANS_DESCRIP_2", "label": "Action", "editable": true },
            { "name" : "USE_DESC", "label": "Use Desc", "editable": true, "edittype": "select",  "stype": "select", "editoptions": {
                "value": "#jqGridValueString(b_use_descs, "use_desc")#"
            }},
            { "name" : "DET_DESC", "label": "Detailed Desc", "editable": true },
            { "name" : "RP_CODE", "width": "75", "label": "RP Code", "editable": true },
            { "name" : "GSM", "width": "75", "label": "GSM", "align":"right", "formatter": "number", "formatoptions":{"decimalSeparator":".", "thousandsSeparator": ",", "decimalPlaces": 2, "defaultValue": "0.0"} },
            { "name" : "GSF", "width": "75", "label": "GSF", "align":"right", "formatter": "number", "formatoptions":{"decimalSeparator":".", "thousandsSeparator": ",", "decimalPlaces": 2, "defaultValue": "0.0"} },
            { "name" : "BLDG_CNT", "width": "75", "align":"right", "label": "No Bldgs"},

                    { "name" : "STEW_CODE", "label": "Steward", "editable": false, "formatter": "select", "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(stewards, "stew_code", "stew_description")#"
                    }},
                    { "name" : "POTEN_OWNER", "label": "Poten Owner", "editable": false },
                    { "name" : "CNTRCT_ARNGMT", "label": "Contract Arrangement", "formatter": "select", "editable": false, "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(contract_arrangements, "cntrct_arngmt", "cntrct_arngmt_desc")#"
                    }},
                    { "name" : "EST_CST_IND", "label": "Est. Cost Indicator", "formatter": "select", "editable": false, "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(est_costs, "code", "code_descr")#"
                    }},
                    { "name" : "NEG_CST_IND", "label": "Neg. Cost Indicator", "formatter": "select", "editable": false, "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(neg_costs, "code", "code_descr")#"
                    }},
                    { "name" : "COND", "label": "Condition", "editable": false, "formatter": "select", "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(conditions, "cond", "cond_desc")#"
                    }},
                    { "name" : "CNSTR", "label": "Construction", "editable": false, "formatter": "select", "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(constructions, "cnstr", "constr_desc")#"
                    }},
                    { "name" : "DISP", "label": "Disposal", "formatter": "select", "editable": false, "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(disposals, "disp", "disp_desc")#"
                    }},
                    { "name" : "STAND", "label": "Standard", "formatter": "select", "editable": false, "edittype": "select", "stype":"select", "editoptions": {
                        "value": "#jqGridValueString(standards, "stand", "stand_desc")#"
                    }},             

            { "name" : "DISP_METHOD", "label": "Disp Method", "editable": true,
                "edittype": "select","formatter": "select","stype":"select",
                "editoptions": {
                    "value": "#jqGridValueString(disp_meths, "disp_code", "disp_desc")#"
                }
            },
            { "name" : "DISP_DATE", "align": "right", "label": "Disp Date", 
                "datefmt": "mm/dd/yyyy",
                "formatter": "date",
                "formatoptions": { "srcformat": "F, d y H:i:s", "newformat": "m/d/Y" },  
                "editable": true, "editrules": {
                "edithidden": true
            }},
            { "name" : "DISP_VALUE", "label": "Disp Value", "align":"right", "editable": true, "editrules": {
                    "edithidden": true, "number": true
                },
                "formatter": "number",
                "formatoptions":{"decimalSeparator":".", "thousandsSeparator": "", "decimalPlaces": 2, "prefix": ""}
            },
            { "name" : "NET_PROCEEDS", "label": "Net Proceeds", "align":"right", "editable": true, "editrules": {
                    "edithidden": true, "number": true
                },
                "formatter": "number",
                "formatoptions":{"decimalSeparator":".", "thousandsSeparator": "", "decimalPlaces": 2, "prefix": ""}
            },
            { "name" : "RECIPENT", "label": "Recipient", "editable": true, "editrules": {
                "edithidden": true
            }},
            { "name" : "ADDRESS_ID2", "width": "50", "label": "Addr ID" },
            { "name" : "BLS_ID", "width": "50", "label": "BLS ID", "key": true }
        ],
        "caption": "Real Property - Buildings" 
    }
</cfsavecontent>

<cfsavecontent variable="tableEventListeners">
ondblClickRow: function(id){

  $('##archived_installations_table').jqGrid('editGridRow', id, { 
      closeAfterEdit: true,
      recreateForm: true,

        afterShowForm: function (id) {
            if (typeof setup_archived_installations_table_form === 'function') {
                setup_archived_installations_table_form(id);
            }

            $(":input", id).each(function() { 
                $this = $(this);
                $this.data("originalValue", $this.val());

                $this.wrap("<div class='jqGridFormField' />");
                $this.bind("change keyup", function () {
                    $wrapper = $(this).parent("div.jqGridFormField");
                    if ($(this).val() != $(this).data("originalValue"))
                        $wrapper.addClass("jqGridFormFieldChanged");    
                    else
                        $wrapper.removeClass("jqGridFormFieldChanged");         
                });
            });

        } 

  });
}

</cfsavecontent>

<cfset perms = model('BLSDisposition').getPermissions()>
<cfsavecontent variable="pagerDef">
            {
                <cfif ListFindNoCase(perms.objectPermissions, "UPDATE")>
                edit: true,
                <cfelse>
                edit: false,
                </cfif>
                add: false,
                del: false,
                search: true,
                editfunc: function(id) {
                    $('##archived_installations_table').jqGrid('editGridRow', id, { 
                        closeAfterEdit: true,
                        recreateForm: true,
                        onInitializeForm: function(id) {
                            if (typeof setup_archived_installations_table_form === 'function') {
                                setup_archived_installations_table_form(id);
                            }
                        }
                    });
                }
            }, 
            {}, //  default settings for edit
            {}, //  default settings for add
            {},  // delete instead that del:false we need this
            {
                closeAfterSearch: true,
                multipleSearch: true,
                multipleGroup: true
            }, // search options
            {} /* view parameters*/ 
</cfsavecontent>    

#jqGridWrapper(accessibleView=IsDefined("session.user.is_notified") AND IsBoolean(session.user.is_notified) AND session.user.is_notified,
            modelName="BLS", 
            footerRow="true",
            filterToolbar="true",
            tableID="archived_installations_table",
            pagerID="archived_installations_pager",
    exportToExcelOption="true",
            pagerDefinition="#pagerDef#",
            tableDefinitionJSON='#BuildingTableDef#',
    tableEventListeners='#tableEventListeners#')#

Answer 1

明白了。必须将以下内容添加到 tableEventListeners:

    gridComplete: function(){
    var blsid=(decodeURIComponent((new RegExp('[?|&]' + 'BLS_ID' + '=' + '([^&;]+?)(&|##|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null);
    if(blsid!=null){
        $('##archived_installations_table').jqGrid('editGridRow', blsid);
    }
},