首页 > 其他分享 >最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor

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

时间:2023-04-05 14:32:54浏览次数:37  
标签:Web items KindEditor uploadJson readonly disable 提交


  最近项目中用到了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="width: 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赋值一次。

标签:Web,items,KindEditor,uploadJson,readonly,disable,提交
From: https://blog.51cto.com/fansunion/6170969

相关文章

  • java——maven——idea使用模板(骨架)创建maven工程——webapp(重点)
    黑马模板:                  本地:         ......
  • vue项目启动时 `webpack-dev-server –inline –progress –config build/webpack.dev
    vue项目在npmrundev时报错[email protected]:webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js解决这类问题主要分两种情况这个项目已经构建好的项目,你只是从git、snv或者其他地方引入,别人能运行你不能运行这是一个新构建的vue项目第一......
  • web前端tips:CSS之sticky粘滞效果
    Sticky介绍Sticky是CSS3的一个定位属性,它可以让元素在滚动过程中“粘”在屏幕上的某个位置,直到滚动到某个临界点后才会跟随滚动。Sticky定位可以使得页面更具交互性和易用性,也提高了页面的可读性。Sticky定位可以通过以下代码实现:position:sticky;top:0;其中,top属性定义了......
  • JavaWeb——HTML基本标签详解及案例实战(文件标签、文本标签、图片标签、列表标签、链
    目录1、文件标签2、文本标签3、图片标签4、列表标签5、链接标签6、块标签7、语义化标签8、表格标签9、综合案例上一节介绍了HTML的基本概念,和基本语法,本节介绍下HTML的基本标签和表单标签。这部分学习可以参照W3Cschool,一个很好的网站。1、文件标签文件标签是构成HTML最基本的标签,......
  • JavaWeb——Tomcat的基础应用总结,看这一片文章就够了(web服务器软件、启动时黑窗口闪退
    目录1、Web服务器软件概述2、Tomcat基本操作3、Tomcat部署项目4、Tomcat与IDEA集成并创建web项目本文讲解web服务器Tomcat,关于Web的相关概念,可以回顾以前的文章。1、Web服务器软件概述服务器,就是安装了服务器软件的计算机;服务器软件,就是可以接收用户的请求,处理请求,做出响应的软件;We......
  • ASP.NET Web API 中的参数绑定
    请考虑使用 ASP.NETCoreWebAPI。与ASP.NET4.xWebAPI的比,它具有以下优势:ASP.NETCore是一个开源的跨平台框架,用于在Windows、macOS和Linux上构建基于云的新式Web应用。ASP.NETCoreMVC控制器和WebAPI控制器是统一的。针对可测试性进行构建。能够在Win......
  • Win10 兼容性 Visual studio web应用程序 ASP.NET 4.0 尚未在 Web 服务器上注册
     系统升级到windows10,Visualstudio 创建web应用程序时出现如下提示ASP.NET4.0尚未在Web服务器上注册。为了使网站正确运行,可能需要手动将Web服务器配置为使用ASP.NET4.0,按F1可了解更多详细信息尝试:  C:\WINDOWS\Microsoft.NET\Framework64\v4.0.30319并管理员运行a......
  • WebMatrix3 启动报KeyNotFoundException错误解决方法
    我上网下载了WebMatrix3、iisexpress8安装以后运行WebMatrix3报错,日志如下:System.Collections.Generic.KeyNotFoundException:要使用的命令不在有效命令列表中。Thecommandbeingusedisnotinthelistofvalidcommands.应用程序:WebMatrix.exeFramework版本:v4.0.3......
  • web app
    webappspirng让建webapp快且顺.用删样板码和配置匕关联web开发,你得当下web开发模块串线了开发尔服端htmlapp,restapi,双向,事基系统.开发儿生产力springboot是起点尔你开发经验,无论什你造.springboot设计为让你起且跑迅捷,有最小前配置.用他的内嵌appserver,你可匕服......
  • flask框架01 flask与pythonweb框架介绍 flask快速使用 登录显示用户信息案列 配置
    今日内容详细目录今日内容详细1Flask和pythonweb框架介绍1.1flask介绍2flask快速使用3登录,显示用户信息小案例3.1login.html3.2home.html3.3detail.html3.4py文件4配置文件方式5路由系统5.1转换器1Flask和pythonweb框架介绍pythonweb框架的本质都一样1.同步框架......