使用选择框动态更改列的可编辑属性 [英] Dynamically change a column's editable property with select box

问题描述

我正在使用表单编辑.我想根据下拉框中的选择禁用添加和编辑表单中的某些字段.最好使用什么事件来触发此事件?我尝试使用dataEvents:

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 this? I have attempted using dataEvents:

{    name:'type_cd', 
     edittype:'select', 
     editoptions:{
        dataUrl:'functions.php',
            dataEvents:[{
                type:'change',
                fn: function(e){
                    $(this).setColProp('cntrct_id',{
                         editoptions:{editable:false}
                    });
            } 
       }]                        
    } 
},

这对我的表单字段没有可见的影响，但是我知道它已被实现，因为如果我将其放入表单中，则会收到警报消息.

This has no visible effect on my form fields, but I know that it's being reached because I can get an alert message from it if I put one in.

编辑

如果我提交表单，则下次打开它时，设置为editable:false的列将不会出现.这是朝正确方向迈出的一步，但我希望它立即不可编辑.真的，我希望它是可见的，但是已禁用(即，disabled:true)

If I submit the form, the next time I open it, the column that was set to editable:false will not appear. This is a step in the right direction, BUT I want it to immediately be uneditable. Really, I would like it to be visible, but disabled (i.e. disabled:true)

推荐答案

首先dataEvents允许您在edit元素的元素上注册回调.在回调内部this将被初始化为将被绑定的DOM元素.因此，在change处理程序内部的$(this)它将包装在<select>元素上，而不是在网格上. $(this).setColProp的用法将不正确.

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 <select> element and not on the grid. The usage of $(this).setColProp will be incorrect.

要禁用添加/编辑"表单中的某些输入字段，您可以使用以下事实:所有输入元素都具有相同的id，就像colModel中相应列上的name属性值一样.因此，如果需要禁用cntrct_id的输入，则可以使用id="cntrct_id"

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);
            } 
       }]                        
    } 
}

重要的是要理解editoptions将用于任何现有的编辑模式(表单编辑，内联编辑和单元格编辑).如果要编写支持所有编辑模式的dataEvents代码，则必须检测编辑模式并使用其他一些编辑字段ID.该代码(未经测试)可以如下所示

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);
                        }
                    }
                }
            } 
       }]                        
    } 
}

最后一句话.如果您仍然使用旧版本的jQuery(在jQuery 1.6之前)，但不支持 prop 方法改为使用 attr .

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.

这篇关于使用选择框动态更改列的可编辑属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！