现在的位置: 首页 > easyui > Form > combo > 正文
combo扩展:禁止手工改变输入框的值
2012年08月03日 combo ⁄ 共 3122字 评论数 19 ⁄ 被围观 17,257 views+
文章目录
[隐藏]

对于combo组件,作者自身就提供了disable和enable方法来禁用组件,不过他这里的禁用是把整个组件禁用了,而有时候我们为了限制用户行为,并不需要禁用整个combo组件,只要不让用户自己改变combo组件输入框部分的值就可以了。话不多说了,直接上扩展代码:

实现代码:

  1. $.extend($.fn.combo.methods, {
  2.     /**
  3.      * 禁用combo文本域
  4.      * @param {Object} jq
  5.      * @param {Object} param stopArrowFocus:是否阻止点击下拉按钮时foucs文本域
  6.      * stoptype:禁用类型,包含disable和readOnly两种方式
  7.      */
  8.     disableTextbox : function(jq, param) {
  9.         return jq.each(function() {
  10.             param = param || {};
  11.             var textbox = $(this).combo("textbox");
  12.             var that = this;
  13.             var panel = $(this).combo("panel");
  14.             var data = $(this).data('combo');
  15.             if (param.stopArrowFocus) {
  16.                 data.stopArrowFocus = param.stopArrowFocus;
  17.                 var arrowbox = $.data(this, 'combo').combo.find('span.combo-arrow');
  18.                 arrowbox.unbind('click.combo').bind('click.combo', function() {
  19.                     if (panel.is(":visible")) {
  20.                         $(that).combo('hidePanel');
  21.                     } else {
  22.                         $("div.combo-panel").panel("close");
  23.                         $(that).combo('showPanel');
  24.                     }
  25.                 });
  26.                 textbox.unbind('mousedown.mycombo').bind('mousedown.mycombo', function(e) {
  27.                         e.preventDefault();
  28.                 });
  29.             }
  30.             textbox.prop(param.stoptype?param.stoptype:'disabled', true);
  31.             data.stoptype = param.stoptype?param.stoptype:'disabled';
  32.         });
  33.     },
  34.     /**
  35.      * 还原文本域
  36.      * @param {Object} jq
  37.      */
  38.     enableTextbox : function(jq) {
  39.         return jq.each(function() {
  40.             var textbox = $(this).combo("textbox");
  41.             var data = $(this).data('combo');
  42.             if (data.stopArrowFocus) {
  43.                 var that = this;
  44.                 var panel = $(this).combo("panel");
  45.                 var arrowbox = $.data(this, 'combo').combo.find('span.combo-arrow');
  46.                 arrowbox.unbind('click.combo').bind('click.combo', function() {
  47.                     if (panel.is(":visible")) {
  48.                         $(that).combo('hidePanel');
  49.                     } else {
  50.                         $("div.combo-panel").panel("close");
  51.                         $(that).combo('showPanel');
  52.                     }
  53.                     textbox.focus();
  54.                 });
  55.                 textbox.unbind('mousedown.mycombo');
  56.                 data.stopArrowFocus = null;
  57.             }
  58.             textbox.prop(data.stoptype, false);
  59.             data.stoptype = null;
  60.         });
  61.     }
  62. });

使用方式:

在引入easyui的核心库后,引入本扩展的实现代码,这个地方,拿datebox和combobox做例子,因为datebox依赖combo,也继承combo的方法,所以datebox可以直接使用本文扩展的方法:

  1. //datebox
  2. $('#dd').datebox('disableTextbox',{stoptype:'readonly',stopArrowFocus:true});
  3. //combobox
  4. $('#cc,#cc2').combobox('disableTextbox',{stoptype:'readOnly',stopArrowFocus:true});

效果演示:

datebox:http://www.easyui.info/easyui/demo/datebox/061.html
combobox:http://www.easyui.info/easyui/demo/combobox/061.html

更新日志:

2012-12-26:

增加参数用于设置如何禁用输入框,分为readonly和disabled两种方式
disableTextbox函数入参介绍:

Name Type Description Default
stoptype string 禁用text的方式,可以为'disabled'或者'readonly'. disabled
stopArrowFocus boolean 为true的话,下拉面板显示的时候,将不会把焦点放到输入框上. false

目前有 19 条留言 其中:访客:10 条, 博主:7 条 引用: 2

  1. 活力橙 : 2012年08月03日15:05:18  -49楼 @回复 回复

    这个方法非常好!希望easyui也能加入相关功能!目前来说 :mrgreen: 就是大神的这个方法最实用了!


  2. 管理员
    世纪之光 : 2012年08月03日15:12:48  -48楼 @回复 回复

    @活力橙
    过奖了,这属于非常简单的扩展了,复杂的扩展动辄几百行代码的。

  3. 马路小生 : 2012年08月04日13:46:24  -47楼 @回复 回复

    看demo貌似有点意思哈。


  4. 管理员
    世纪之光 : 2012年08月04日13:58:26  -46楼 @回复 回复

    @马路小生
    我勒个去,你怎么跑到这个博客上留言了……

  5. spark : 2012年09月07日22:58:58  -45楼 @回复 回复

    直接设置其 editable 为 false 就好了呀


    • 管理员
      世纪之光 : 2012年09月08日16:09:16  地下1层 @回复 回复

      倒是没注意这个属性,不过属性的话用起来还是没有方法用的灵活,因为仅仅重新设置属性而不重新构造组件的话 设置的属性是不会生效的。

      • spark : 2012年09月11日11:38:05  地下2层 @回复 回复

        蒽 明白你的意思,就是说不一定是在初始化的时候来这样设置对吧


        • 管理员
          世纪之光 : 2012年09月11日11:48:38  地下3层 @回复 回复

          对的,有方法的话才能真正是实现动态控制它的可编辑性,随时随地可以灵活设置。

  6. liny : 2012年10月19日10:41:20  -44楼 @回复 回复

    嗯,很实用,有个问题请教下,datebox如何实现只能选择月份,不需要日

  7. Qzhou : 2013年08月25日19:02:11  -43楼 @回复 回复

    请问如何设置让网站里所有的databox和combobox禁止手工输入


    • 管理员
      世纪之光 : 2013年08月25日22:45:26  地下1层 @回复 回复

      这个可以通过改源码的方式,主要还是改combo的源码,组件构造完,在源码内部调用我扩展的方法。

  8. yulei : 2015年04月09日19:16:58  -42楼 @回复 回复

    请问能不能在构造函数或者dom的扩展属性上面设置这两个值 ,以避免在初始化后再进行函数调用来设置?
    比如: 460

  9. 水中鳥 : 2015年08月12日21:59:38  -41楼 @回复 回复

    請問一下如果是datagrid的話要怎麼使用
    ex
    { field: ‘Odate’, title: ‘日期’, width: ‘100px’, halign: ‘center’, editor: { type: ‘datebox’} },
    謝謝


    • 管理员
      世纪之光 : 2015年08月13日10:23:42  地下1层 @回复 回复

      开始编辑之后获取到编辑器的target,然后根据target获取到datebox实例,最后调用combo实例本文扩展的方法。
      代码示例:

      1
      2
      3
      
      $("#tt").datagrid('beginEdit', rowIndex);
      var editor = $('#tt').datagrid('getEditor',{index:rowIndex,field:"startTime"});
      $(editor.target).datebox('disableTextbox')
  10. 小白 : 2015年10月30日16:54:42  -40楼 @回复 回复

    谢谢楼主!

  11. 萧萧 : 2015年11月11日09:53:05  -39楼 @回复 回复

    虽然禁用录入了,但上下箭头的选择的功能也没有了, 想问下手工录入的值怎么才能setValue 到 combobox 中呢

给我留言

留言无头像?


×