//引用相关js文件后前端编辑js方法
new SYSDrag({
//这里配置参数,编辑方法
});
//自定义编辑模块的方法
DragMethod:[{'module':指定区域id,"title":名称,event:function(sys,par,obj){
//sys集合,par初始值调用,obj当前事件
编辑处理方法事例
var h=sys.$(par.DragContent).offsetHeight;
obj.style.height=(h-42)+'px';
sys.ajaxGet('json/Exam.json',true,'加载中,请稍等......',function(success){
var template=obj.getAttribute('sys-template');
var structure=obj.getAttribute('sys-structure');
sys.htmltemplate(sys,par,success,obj,template,structure);//调用栏目方法,用于显示在页面上,结合html代码使用
var clickname=sys.getElementsByClassName(obj,"topic-link");
clickname.myMap(function(eve,i){
eve.onclick=function(e){
var sort=i;
var onobj=sys.eve(e);
var title=onobj.getAttribute('sys-type');
var typeid=onobj.getAttribute('sys-typeid');
var Level=onobj.getAttribute('sys-Level');
sys.Moduleclass(sys,par,onobj,title,typeid,Level,sort);//点击后用于调用各个相关类的样式方法
}
})
});
}
}]
//提交后处理的方法
SubmitEvent:function(sys,par,json){
//sys集合,par初始值调用,json数据
编辑处理方法
}
//添加当前模块自定义处理事件
ModuleExtension:function(sys, par,obj){
//sys集合,par初始值调用,obj当前事件
编辑处理方法
}
//上传控件处理的方法
ModuleUpload:function(sys,par,event){
//sys集合,par初始值调用,event当前事件
new verUpload({
files: event,
name: "sys-Required",
load_list: true,
success: function(d) {
PromptBox(d, 2);
}, //返回提示
fail: function(d) {
PromptBox(d, 2)
}, //判断提示
size: 1024 * 4,
imgw: 200,
imgh: 200,
chinese: true, //是否启用中文过滤
keyname: 'titleImg', //传值
promptm: '摘要图',
pathName: "../js/verUpload/asset/images", //显示文件图标地址路径
verify: '', //是否必填,默认verify
ext: ['jpg', 'jpeg', 'png', 'gif', 'xls', 'doc', 'docx'] //支持的文件格式
});
}
//事例代码,该示例是获取列表展示的html代码。下面说明里面的属性标签 id值用于编辑模块
<ul class="topic-list" id="topiclist" sys-template='html' sys-structure="cycle">
<li class="topic-name sys-region" sys-key="id,type,amount,typeid">
<a href="javascript:;" class="topic-link sys-region" sys-key="id,type,amount,typeid,Level" >
<span class="sys-region" sys-key="type" sys-type="text"></span>
<span class="sys-region" sys-key="id,amount" sys-type="text"></span>
</a>
</li>
</ul>
- sys-structure-循环模式 cycle普通循环 menu多级栏目循环 必填
- sys-template="html"-内容为html形式编辑展示必填
- sys-region-class值,对需要进行操作的层添加该属性值用于编辑选填
- sys-key-key值,里面编辑数据名称,该数据名称和你数据库里的一样就行,用于处理数据值的获取和展示。需要结合class="sys-region"使用必填
- sys-type-显示模式 text文本模式,img图片模式,label标签模式,icon图标模式 需要结合class="sys-region"使用必填
//事例代码
<div class="sys-type-module sys-edit-info" sys-module="edit" sys-id="#4" title="复选题" >
<ul class="sys-addinfo add_style sys-edit-content" sys-key="id,title,label,answer,checkbox-topics">
<a href="javascript:;" sys-name="button" class="iconfont delete-topics" sys-operate="delete-topics" sys-id="#4" title="复选题"></a>
<li class="content_look topic-title sys-region" sys-name="title" >
<li class="topic-info content_look sys-region" sys-mode="title">
<label class="label_name">题目:</label>
<span class="text_input info_data clearfix">
<input sys-name="选择题目" sys-verify="verify" data-type="title" data-reveal="value" data-key="title" type="text" class="sys-Required text_input col-sm-10 col-xs-10">
</span>
</li>
<li class="topic-info content_look sys-region" sys-plus="input" sys-bout="5" sys-mode="select">
<div class="mb10 sys-edit-condition clearfix">
<label class="label_name sys-region sys-Required" sys-name="label" data-key="label"></label>
<span class="text_input info_data">
<input sys-name="选择" sys-verify="verify" sys-type="checkbox-topics" data-reveal="value" data-key="checkbox-topics" type="text" class="sys-Required text_input col-sm-6 col-xs-12">
<button class="sys-region btn btn-green sys-edit-button" sys-name="button" sys-operate="answer-select" sys-id="#4" title="复选题" sys-mode="checkbox" >选择</button>
<button class="sys-region btn btn-blue sys-edit-button" sys-name="button" sys-operate="add-select" sys-id="#4" title="复选题"><i class="iconfont">添加</button>
<button class="sys-region btn btn-danger sys-edit-button" sys-name="button" sys-operate="delete-select" sys-id="#4" title="复选题" ><i class="iconfont"></i>删除</button>
</span>
</div>
</li>
</ul>
</div>
- sys-edit-info-class值必填,每个单独的类添加该class 必填
- sys-edit-content-class值必填,每个单独的类下内容添加该class 必填
- sys-edit-button-class值必填,需要按钮时并需要处理时添加该class 必填
- sys-edit-condition-class值必填,添加多个文本处理时添加该class 必填
- sys-name-声明名称 必填
- sys-mode-声明模式名称 checkbox选择模式,title标题模式,select需要进行单选或复选添加 ,content操作普通内容是添加该值必填
- sys-operate-声明名称,delete-topics为需要拖拽添加该值,answer-select选择当前栏目是添加,add-select添加选择栏目时添加,delete-select删除当前栏时处理必填