spring-boot集成EasyUI和KindEditor
程序员文章站
2022-05-16 16:58:11
...
spring-boot-easyui-kindeditor, 依赖spring-boot-parent
- 项目启动后输入：http://localhost/
# IDENTITY (ContextIdApplicationContextInitializer) spring.application.index=EasyUI-KindEditor-Dialog.v1.1 spring.application.name=EasyUI-KindEditor-Dialog #Server server.port=80 server.jsp-servlet.class-name=org.apache.jasper.servlet.JspServlet security.basic.enabled=false management.security.enabled=false #MVC spring.mvc.view.prefix=/WEB-INF/views/ spring.resources.static-locations=classpath:/static/ security.basic.enabled=false management.security.enabled=false #LOG logging.config=classpath:log4j2.xml
@SpringBootApplication
public class SimpleApplication {
public static void main(String[] args) {
SpringApplication.run(SimpleApplication.class, args);
}
}
<head> <meta charset="UTF-8"> <title>测试EasyUI-KindEditor-Dialog</title> <link rel="stylesheet" href="/plugin/themes/default/easyui.css"> <link rel="stylesheet" href="/plugin/themes/icon.css"> <script charset="utf-8" src="/plugin/jquery.min.js"></script> <script charset="utf-8" src="/plugin/jquery.easyui.min.js"></script> <script charset="utf-8" src="/plugin/locale/easyui-lang-zh_CN.js"></script> <!-- 编辑器引入 --> <link rel="stylesheet" href="/editor/themes/default/default.css" /> <script charset="utf-8" src="/editor/kindeditor-all-min.js"></script> <script charset="utf-8" src="/editor/lang/zh-CN.js"></script> <!-- 自定义 --> <script charset="utf-8" src="/plugin/commons.js"></script> </head>
var Index = {
form: 'indexForm',
grid: 'index-grid',
init: function(){
},
//新增
addProduct: function(){
var d = this.createIndexDialog();
d.dialog({title: "新增产品"}).dialog('open');
this.openDialog();
},
//修改
updateProduct: function(){
var message = Ext.getSingleSelected(this.grid);
if(message){
return Ext.alert(message);
}
this.update();
},
//删除
deleteProduct: function(){
var message = Ext.getSingleSelected(this.grid);
if(message){
return Ext.alert(message);
}
Ext.confirm('您确认要删除这条记录吗?', function(){
Ext.progress('正在删除数据...');
setTimeout(function(){
Ext.alert("删除成功!");
Ext.progressClose();
}, 2500)
});
},
//查询
searchProduct: function(){
$("#"+this.grid).datagrid("load", {productname: $('#name').val()})
},
//详情
detail: function(index){
$('#'+this.grid).datagrid('selectRow',index);
var record = Ext.getRecord(this.grid);
if(!record){return;}
//弹出Dialog, 并修改Title和隐藏Button
var d = this.createIndexDialog();
d.dialog({title: "查看产品--"+record.itemid}).dialog('open');
$(".dialog-button a").eq(0).hide();
$('#content_detail').html(record.detail);
$("#"+this.form).form('load', record);
this.openDialog();
},
itemIdFormat: function(value, row, index){
return '<a href="javascript:void(0)" onclick="Index.detail('+index+')">'+value+'</a>';
},
//执行更新操作
update: function() {
var record = Ext.getRecord(this.grid);
var d = this.createIndexDialog();
d.dialog({title: "修改产品"+record.itemid}).dialog('open');
//加载form表单
$('#content_detail').html(record.detail);
$("#"+this.form).form('load', record);
this.openDialog();
},
//Dialog框
createIndexDialog: function() {
$('#'+this.form).form('clear');
$('#indexForm input[name=id]').val(0);
var d = $('#indexDialog').dialog({
width:800,
height: 500,
minimizable: false,
maximizable: false,
collapsible: false,
resizable: false,
modal: true,
iconCls: 'icon-win',
buttons: [
{text: '保 存'},
{text: '关 闭', handler: function(){d.dialog('close');}}
],
onBeforeClose: function(event, ui) {
KindEditor.remove('#content_detail');
}
});
return d;
},
//打开Dialog
openDialog: function() {
KindEditor.create('textarea[name="attr1"]', {
resizeType: 1,
allowImageUpload: true,
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterChange:function(){
this.sync();
}
});
}
}