zoukankan      html  css  js  c++  java
  • 最近遇到的若干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赋值一次。
  • 相关阅读:
    hdu 5224 Tom and paper 水题
    2015 UESTC 搜索专题N题 韩爷的梦 hash
    2015 UESTC 搜索专题M题 Palindromic String 马拉车算法
    2015 UESTC 搜索专题K题 秋实大哥の恋爱物语 kmp
    2015 UESTC 搜索专题J题 全都是秋实大哥 kmp
    2015 UESTC 搜索专题F题 Eight Puzzle 爆搜
    2015 UESTC 搜索专题E题 吴队长征婚 爆搜
    2015 UESTC 搜索专题D题 基爷的中位数 二分
    2015 UESTC 搜索专题C题 基爷与加法等式 爆搜DFS
    2015 UESTC 搜索专题B题 邱老师降临小行星 记忆化搜索
  • 原文地址:https://www.cnblogs.com/qitian1/p/6462616.html
Copyright © 2011-2022 走看看