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

时间：2015-11-04 21:34:42 阅读：1244 评论：0 收藏：0 [点我收藏+]

标签：readonly disable kindeditor jquery-easyui easyui

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

标签：readonly disable kindeditor jquery-easyui easyui

原文地址：http://blog.csdn.net/fansunion/article/details/49639567

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行