Dynamically change a column's editable property with select box

Question

I am using form editing. I would like to disable certain fields in my add and edit forms based on the selection from a drop down box. What event is best to use to trigger

Answer 1

First of all dataEvents allows you to register callbacks on elements of edit elements. Inside of callbacks this will be initialized to the DOM element which will be bound. So $(this) inside of change handler it will be wrapper on element and not on the grid. The usage of $(this).setColProp will be incorrect.

To disable some input field in Add/Edit form you can use the fact that all input elements get the same id like the value of name property on the corresponding column in colModel. So if you need to disable input of cntrct_id you can set disabled property to true on the element with id="cntrct_id"

{
     name: 'type_cd', 
     edittype: 'select', 
     editoptions: {
        dataUrl: 'functions.php',
        dataEvents: [{
            type: 'change',
            fn: function (e) {
                // disable input/select field for column 'cntrct_id'
                // in the edit form
                $("#cntrct_id").prop("disabled", true);
            } 
       }]                        
    } 
}

It's important to understand that editoptions will be used for any existing editing modes (form editing, inline editing and cell editing). If you want to write the code of dataEvents which supports all editing modes you have to detect editing mode and use a little other ids of editing fields. The code (not tested) can be about as below

{
     name: 'type_cd', 
     edittype: 'select', 
     editoptions: {
        dataUrl: 'functions.php',
        dataEvents: [{
            type: 'change',
            fn: function (e) {
                var $this = $(e.target), $td, rowid;
                // disable input/select field for column 'cntrct_id'
                if ($this.hasClass("FormElement")) {
                    // form editing
                    $("#cntrct_id").prop("disabled", true);
                } else {
                    $td = $this.closest("td");
                    if ($td.hasClass("edit-cell") {
                        // cell editing
                        // we don't need to disable $("#cntrct_id")
                        // because ONLY ONE CELL are edited in cell editing mode
                    } else {
                        // inline editing
                        rowid = $td.closest("tr.jqgrow").attr("id");
                        if (rowid) {
                            $("#" + $.jgrid.jqID(rowid) + "_cntrct_id")
                                .prop("disabled", true);
                        }
                    }
                }
            } 
       }]                        
    } 
}

The last remark. If you still use old version of jQuery (before jQuery 1.6) which don't support prop method you have to use attr instead.

0 讨论(0)

查看其它2个回答

发布评论: