• 最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor


      最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~
      一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~
      
    1.readonly和disable的区别
      readonly:只读,不可编辑,提交表单时,值会提交到后端。
      disable:禁止(包含了“只读”和“不可编辑”),提交表单时,值不会提交到后端。
          如果需要提交到后端,在表单提交之前,手动把disable修改为false。
      
      text叫只读,select有“可输入”和“可编辑”2种~
      
      Html
      <input type="text" readonly="readonly" disabled="disabled"/>
      
      Jquery
      $("#id").attr("readonly",true);
      $("#id").attr("disabled",true);
      
      实际场景:
      如果只读,用readonly。
      如果不但只读,而且后端不需要这个数据,可以用disable。也可以用readonly,但是提交之前,把disable改为false。
      
      readonly和disable还有个重大的区别,readonly的控件颜色是“白,偏亮的色彩”,disable是控件颜色"黑,偏暗的色彩"。
      为了给用户,统一的效果,如果不可编辑,建议统一使用“readonly”或“disable”。
      如果是disable,后端又需要数据,一种办法是修改前端代码,另外一种是修改后端代码(后端存在不需要修改这几个字段的update方法)。
      
      Easyui和Combobox
      Easyui中,textbox有readonly属性。
       $('#projectName').textbox({    
    readonly:false
    });


    Combobox没有找到readonly属性,找到了“禁用”
     $('#industryId').combobox("disable");
     
    //可用
    $('#messtype').combobox('enable');
     
    需要注意的是,如果是.combobox,用readonly有时有问题,下拉列表框没有显示选项。
    如果用combobox用textbox的readonly赋值,提交的时候,是字符串,不是对应的id。

    2.KindEditor的ready方法,不执行。
    官方示例代码
    KindEditor.ready(function(K) {
    editor = K.create('textarea[id="content"]', {
    cssPath : prettifyCssPath,
    uploadJson : uploadJson,
    urlType : 'absolute',
    items:items
    });
    prettyPrint();
    });


    在JqueryUI中,ready方法没有执行。
    执行使用create方法。
     requirementEditor = KindEditor.create('textarea[id="requirement"]', {
    allowFileManager : true,
    cssPath : prettifyCssPath,
    uploadJson : uploadJson,
    urlType : 'absolute',
    items:kdItems,
    });


    网上有人说“KE.create”,至少新版本4.1.x会报错。
    (通过网上找答案,也发现,百度的答案,有时候年份靠前的答案在前面,但是可能已经过时了)

    说道KindEditor,有时发现编辑框出不来,可能和EasyUI有一定的冲突,我是通过调整和规范化js引入解决这个问题的。




    3.KindEditor自定义,编辑框的工具条。
    var items=[ 'copy', 'paste',
               'plainpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
               'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',  '-',
               'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
               'italic', 'underline', 'strikethrough'];
    KindEditor.ready(function(K) {
    editor = K.create('textarea[id="content"]', {
    cssPath : prettifyCssPath,
    uploadJson : uploadJson,
    urlType : 'absolute',
    items:items
    });
    prettyPrint();
    });
    传入自定义的item数组,items可以定义为全局变量,如果只用一次,用局部变量比较好。


    4.KindEditor修改值。
    KindEditor.html("#content","输入HTML内容,点击我,查看效果");
    <textarea name="content" id="content"
    style=" 700px; height: 70px;"></textarea>

    千万注意,有个“#”。
    网上不少答案,小雷表示“呵呵哒”~


    5.表单提交时,KindEditor的值么有提交。
    $("#" + fmId).form('submit', {
    url : "${base}/fundBack/edit",
    onSubmit : function() {
    $("#requirement").val(requirementEditor.html());
    $("#descrition").val(descritionEditor.html());
    $("#fundNo").attr("disabled",false);
    return $(this).form('validate');
    },


    在提交之前,把KindEditor的editor对象的html()值,用jquery赋值一次。
  • 相关阅读:
    xpage 获取 附件
    Win8.1应用开发之离线缓存
    分布式系统设计系列 -- 基本原理及高可用策略
    hdu3652(数位dp)
    HDU 4869 Turn the pokers
    ubuntu 安装mysql, 以及全然又一次安装的方法
    Wildcard matching
    并发编程:创建进程 join方法 进程间的数据隔离问题 进程对象以及其他方法 守护进程 互斥锁
    网络通信 : 粘包解决的实例 socketserver模块 udp的使用 简易版QQ的实现 异常处理机制的知识点
    TCP通信: scoket模块 黏包问题 连接循环 通信循环
  • 原文地址:https://www.cnblogs.com/qitian1/p/6462616.html
Copyright © 2020-2023  润新知