2013-02-19 131 views
1

我正在使用表单编辑。我希望根据下拉框中的选择禁用添加和编辑表单中的某些字段。什么事件最适合用来触发此事件?我一直在使用dataEvents尝试:使用选择框动态更改列的可编辑属性

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

这对我的表单字段没有明显的效果,但我知道,它被达到,因为我可以从它那里得到一个警告消息,如果我把一个在

。编辑

如果我提交表单,下次打开它时,设置为editable:false的列将不会出现。这是朝着正确的方向迈出的一步,但我希望它能立即是不可修改的。说真的,我想它是可见的,但被禁用(即禁用:真)

回答

4

所有dataEvents首先允许您在编辑元素的元素注册回调。回调内部this将被初始化为将被绑定的DOM元素。所以$(this)里面的change处理程序它将包装在<select>元素上,而不是在网格上。 $(this).setColProp的使用将不正确。

要添加/编辑表格禁用某些输入字段,你可以使用一个事实,即所有投入要素获得相同的idname财产上的相应列colModel值。所以,如果你需要禁用的cntrct_id输入,您可以在元素上设置disabled属性trueid="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,则必须检测编辑模式并使用其他编辑字段的编号。代码(未经测试)可以如下

{ 
    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

+2

关于你的答案,奥列格的伟大之处在于你不只是告诉解决方案,你解释了它的理论。你真棒。 – user 2013-02-19 19:07:36

+1

@MattWall:不客气!我很高兴你喜欢我的问题回答我的风格。我认为,*解决问题本身就更加重要。 – Oleg 2013-02-19 19:25:19

+1

我也很喜欢Oleg的回答方式,当我开始使用jqgrid时,我从Oleg的答案中得到了大部分jqgrid相关问题的解决方案。谢谢Oleg – Kris 2013-02-20 03:32:59

-1

@Oleg:这是工作(可以获得警报消息),但它不禁用该字段。 表单字段是否需要特殊值?

+0

这不是一个答案。尝试对网站做出贡献,这会给你足够的声望评论其他人的答案。 – Tyler 2013-11-13 18:24:26

+0

@Pravish Jayasundar,更棒的是,问一个新问题 – user 2013-11-13 21:08:48

+0

我无法对上述问题添加评论,所以我不得不张贴为答案 – 2013-11-14 09:27:59