$.extend插件的开发与代码的编写
$.extend(item)
该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个静态方法
$.extend({SayHello:function(value){alert(“hello “+value);}});
这样写过之后，就可以直接调用SayHello方法：
$.SayHello(“Olive”);jQuery.extend({
min: function(a, b) {
return a < b ? a : b;
},
max: function(a, b) {
return a > b ? a : b;
}
});
jQuery.min(2, 3); // 2
jQuery.max(4, 5); // 52、extend(result,item1,item2…..)
这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这
样就会破坏result的结构。
(function ($) { /*** 统一设置datagrid 的一些默认参数*/
$.extend($.fn.datagrid.defaults,
{
rownumbers: true,
fit: true,
pagination: true,
striped: true,
method: "post",
pageSize: 20,
pageList: [20, 50, 100]
});
})(jQuery);3、 extend({},item1,item2,……)
用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);
结果：
Result={name:”Momo”,age:23,sex:”gril”};以上的结果表明extend方法将所有的项都合并到了{}中，但是其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了
var defaults = {};
this.settings = $.extend({},defaults,options);
var defaults = {
fieldCode: "gfyId",
url: "../../Security/selector/user/PublicServiceUserList.html?s=" + Math.random(),
multi: false,
code: "gfyId,gfyIdName",
keyRespField: "gfyId,id",
dictCode: "publicserviceName",
area: ['70%','70%']
};
this.settings = $.extend({},defaults,options);
4、extend(bool,{},item1,item2….)
Extend方法还有带bool型参数的重载。
bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：
示例：
var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};
var item1={sex:”girl”,address{city:”北京”}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);
结果：
Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};说明：
以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。
当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。
options: $.extend(true, {}, $.fn.gridsub.defaults, options)
5、$.extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。
$.fn.extend({hello:function(value){alert(“hello “+value);}});
这样写过之后，在获取每一个示例之后，都可以调用该方法：
$(“#id”).hello(“Olive”);扩展easyui的方法
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
} else {
//获取datagrid字段的属性
var e = $(jq).datagrid('getColumnOption', param.field);
//给编辑器赋值
e.editor = param.editor;
}
},
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
$.get(form_url + key, function (data) {
$submit_form.form("load", data.data.installCheckVo );
$("#dglist2").datagrid({ data: data.data.deviceUserList });
if(pagetype == "show"){
debugger;
$("#dglist2").datagrid('removeEditor', 'deviceName');
$("#dglist2").datagrid('removeEditor', 'deviceNumber');
$("#dglist2").datagrid('removeEditor', 'assetsNumber');
}
}); $.extend($.fn.datagrid.defaults,
{
rownumbers: true,
fit: true,
pagination: true,
striped: true,
method: "post",
pageSize: 20,
pageList: [20, 50, 100],
loadFilter: function (data) {
if (data && data.code !== undefined && data.code != "0")
return [];
var returnData = $Core.util.ObjectHtmlEncode(data);
if (returnData && returnData.data) {
return returnData.data;
}
return data;
}
});
创建对象
var option = $.extend({elem: "#" + _self.container,
url : _self.url,
cols: _self.title,
method: RequestMethod.METHOD_POST,
id : _self.tableId,
even: true,
page: true, //是否显示分页
pageNum: 1,
limit: _self.pageSize, //每页默认显示的数量
limits:[5,10,15,20,30],
done:function(res, curr, count){
debugger;
if(_self.afterDone && $.isFunction(_self.afterDone)){
_self.afterDone(res, curr, count);
}
}}, _self.layOption);
//展示已知数据
layui.table.render(option);
定义jquery扩展方法
/**
* 上传附件通用JS （基于layerUI）
*/
;(function($){
var defaults = {
url : "/attach/upload",
fieldCode : "aboutDocument", //业务字段编码
fieldName : "相关文件", //业务字段名称
entityName : "template", //业务实体
};
function renderUpload(options){
debugger;
this.settings = $.extend({},defaults,options);
this.settings.elem = "#" + this.settings.fieldCode;
this.settings.bindAction = "#" + this.settings.fieldCode + "_Action"; //上传操作按钮
this.settings.layuiUploadPreview = "#"+ this.settings.fieldCode +"_preview";
this.settings.previewTableBody = "#"+ this.settings.fieldCode +"_Preview_Table"; //上传预览表格
this.init();
}
//为函数添加原型链上的方法
renderUpload.prototype = {
init: function(){
debugger;
var that = this;
var uploadInst = layui.upload.render({
elem: that.settings.elem //绑定元素
,url: CONTEXT_PATH + that.settings.url //上传接口
,accept:'file'
,data:{ //上传参数
"entityName" : that.settings.entityName, //业务实体
"fieldCode" : that.settings.fieldCode, //业务字段编码
"fieldName" : that.settings.fieldName, //业务字段名称
}
,auto:false //是否选完文件后自动上传 如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
,size:0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9; 0（即不限制）
,multiple:true
//是否允许多文件上传。设置 true即可开启。不支持ie8/9
,bindAction: that.settings.bindAction //指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
,choose: function(res){ //选择文件后的回调函数
debugger;
var layIndex = layer.open({
type: 1,
title: "预览",
maxmin: false,
area : ['40%', '40%'],
content:$(that.settings.layuiUploadPreview).removeAttr('style'), //$.loadHtml(preUrl),
success: function(layero){
var demoListView = $(that.settings.previewTableBody).empty();
var files = that.settings.selfFiles = res.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
res.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1024).toFixed(1) +' kb</td>'
,'<td name="upload-status">等待上传</td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
res.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
if(Object.getOwnPropertyNames(files).length == 0){ //当上传预览没有文件时，关闭弹出框
layer.close(layIndex);
}
});
demoListView.append(tr);
});
},
end : function(){ //layer销毁回调
$(that.settings.layuiUploadPreview).attr('style','display:none;');
$(that.settings.previewTableBody).empty();
},
cancel: function(){ //右上角关闭回调
}
});
}
,before: function(res){ //文件提交上传前的回调
$("tr",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("上传中...");
}
,done: function(res, index, upload){ //执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
//上传完毕回调 "dealPicture_list_table"
if(res && res.status == WebConst.SUCCESS){
$(that.settings.bindAction).text("").text("上传成功");
delete that.settings.selfFiles[index];
//改变预览状态,将上传附件id存在 隐藏域中
$("tr[id='upload-"+ index +"']",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("附件缓存完毕，请点击提交上传附件");
var unupload = $("#uploadAttachmentIds").data("uploadAttachmentIds");
if(unupload){
unupload.push(res.data['attachmentId']);
$("#uploadAttachmentIds").data("uploadAttachmentIds",unupload);
}else{
if(res.data){
$("#uploadAttachmentIds").data("uploadAttachmentIds",[res.data['attachmentId']]);
/**
* 第一个方法赋不了值，通过下面的赋值
*/
$("#uploadAttachmentIds").val([res.data['attachmentId']]);
}
}
//处理卡片页面列表展示问题
var afile = res.data;
var attachImg = "";
if(!$.isEmptyStr(afile.fileName) && (afile.fileName.indexOf('docx')!=-1
|| afile.fileName.indexOf('doc')!=-1))
{
//attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';
attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
}
else if(!$.isEmptyStr(afile.fileName) && afile.fileName.indexOf('pdf')!=-1)
{
attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
}
else
{
attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId='
+ afile.attachmentId + '&isThumbnail=true" max-width="120" width="100" height="60" style="cursor:pointer;"/></td>';
}
var $tr = $(['<tr id="upload-'+ afile.attachmentId +'" attatchmentId="'+ afile.attachmentId +'">'
, attachImg
,'<td>'+ afile.fileName +'</td>'
,'<td>'+ afile.fileSize +' kb</td>'
,'<td>'+ afile.createDate +'</td>'
,'<td>'
,'<a class="layui-btn layui-btn-mini demo-reload" href="'+ CONTEXT_PATH +'/attach/download?attachmentId='+ afile.attachmentId +'">下载</a> '
,'<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>'
,'</td>'
,'</tr>'].join(''));
$tr.find('button').on('click',function(){
var attId = $(this).closest("tr").attr('attatchmentId');
var url = CONTEXT_PATH + '/attach/delete/datafile';
var rlt = $.getData(url,{'attachmentIds':attId});
if(rlt && rlt.status == WebConst.SUCCESS){
$(this).closest("tr").remove();
$("#uploadAttachmentIds").data("uploadAttachmentIds").removeByValue(attId);
}
return false;
});
$("#" + afile.fieldCode + "_list_table").append($tr);
}
}
,error: function(index, upload){ //执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）
//请求异常回调
}
});
}
}
//扩展jquery类方法
$.extend({
renderUpload : function(options){
debugger;
return new renderUpload(options);
}
});
})(jQuery);
使用
var ShowAd = CardPager.extend({
init: function(filter, url){
this._super(filter, url);
//界面需要引用的插件
this.plugins = ['element', 'form', 'layedit', 'upload', 'laydate', 'layer'];
this.primaryKey = "adId";
this.primaryValue = $.QueryString("entityId");
this.dataUrl = CONTEXT_PATH + '/ad/get?companyId='+$("input:hidden[name='companyId']").val();
this.entityName = "ad";
},
initLayuiPlugin: function(){
this._super();
var _self = this;
_self.files = null;
$.renderSelector({
fieldCode:"columnAdTreeId",
area: ['25%','80%']
});
$.renderSelector({
fieldCode:"companyId",
area: ['25%','80%']
});
/* //执行实例
$.renderUpload({
fieldName : "上传附件", //业务字段名称
fieldCode : "dealPicture", //业务字段编码
entityName : "ad", //业务实体
selfFiles : _self.files
});*/
layui.laydate.render({
elem: '#newsDate'
});
},
initEvent: function(){
var companyId = $("input:hidden[name='companyId']").val();
$("#oweColumnId").val(window.parent.$("#selectOrg").val());
$("#oweColumnName").val(window.parent.$("#selectOrgName").val());
this._super();
var _self = this;
layui.use('upload', function(){
var upload = layui.upload;
var that = new Object();
that.settings = {};
that.settings.bindAction="#dealPicture_Action";
that.settings.elem="#dealPicture";
that.settings.entityName="ad";
that.settings.fieldCode="dealPicture";
that.settings.fieldName="上传附件";
that.settings.layuiUploadPreview="#dealPicture_preview";
that.settings.previewTableBody = "#dealPicture_Preview_Table";
that.settings.selfFiles = null;
that.settings.url="/attach/upload";
//执行实例
var uploadInst = upload.render({
elem: that.settings.elem //绑定元素
,url: CONTEXT_PATH + that.settings.url //上传接口
,accept:'file'
,data:{ //上传参数
"entityName" : that.settings.entityName, //业务实体
"fieldCode" : that.settings.fieldCode, //业务字段编码
"fieldName" : that.settings.fieldName, //业务字段名称
}
,auto:false //是否选完文件后自动上传 如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
,size:0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9; 0（即不限制）
,multiple:true
//是否允许多文件上传。设置 true即可开启。不支持ie8/9
,bindAction: that.settings.bindAction //指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
,choose: function(res){ //选择文件后的回调函数
var layIndex = layer.open({
type: 1,
title: "预览",
maxmin: false,
area : ['40%', '40%'],
content:$(that.settings.layuiUploadPreview).removeAttr('style'), //$.loadHtml(preUrl),
success: function(layero){
var demoListView = $(that.settings.previewTableBody).empty();
var files = that.settings.selfFiles = res.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
res.preview(function(index, file, result){
if((file.size/1024)>1024){
layer.msg('上传的附件不能超过1M', {icon: 5});
that.settings.selfFiles=null;
delete files[index];
layer.close(layIndex);
return false;
}
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1024).toFixed(1) +' kb</td>'
,'<td name="upload-status">等待上传</td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
res.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
if(Object.getOwnPropertyNames(files).length == 0){ //当上传预览没有文件时，关闭弹出框
layer.close(layIndex);
}
});
demoListView.append(tr);
});
},
end : function(){ //layer销毁回调
$(that.settings.layuiUploadPreview).attr('style','display:none;');
$(that.settings.previewTableBody).empty();
},
cancel: function(){ //右上角关闭回调
}
});
}
,before: function(res){ //文件提交上传前的回调
$("tr",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("上传中...");
}
,done: function(res, index, upload){ //执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
//上传完毕回调 "dealPicture_list_table"
if(res && res.status == WebConst.SUCCESS){
$(that.settings.bindAction).text("").text("上传成功");
delete that.settings.selfFiles[index];
//改变预览状态,将上传附件id存在 隐藏域中
$("tr[id='upload-"+ index +"']",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("附件缓存完毕，请点击提交上传附件");
var unupload = $("#uploadAttachmentIds").data("uploadAttachmentIds");
if(unupload){
unupload.push(res.data['attachmentId']);
$("#uploadAttachmentIds").data("uploadAttachmentIds",unupload);
}else{
if(res.data){
$("#uploadAttachmentIds").data("uploadAttachmentIds",[res.data['attachmentId']]);
/**
* 第一个方法赋不了值，通过下面的赋值
*/
$("#uploadAttachmentIds").val([res.data['attachmentId']]);
}
}
//处理卡片页面列表展示问题
var afile = res.data;
var attachImg = "";
if(!$.isEmptyStr(afile.fileName) && (afile.fileName.indexOf('docx')!=-1
|| afile.fileName.indexOf('doc')!=-1))
{
//attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';
attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
}
else if(!$.isEmptyStr(afile.fileName) && afile.fileName.indexOf('pdf')!=-1)
{
attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
}
else
{
attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId='
+ afile.attachmentId + '&isThumbnail=true" max-width="120" width="100" height="60" style="cursor:pointer;"/></td>';
}
var $tr = $(['<tr id="upload-'+ afile.attachmentId +'" attatchmentId="'+ afile.attachmentId +'">'
, attachImg
,'<td>'+ afile.fileName +'</td>'
,'<td>'+ afile.fileSize +' kb</td>'
,'<td>'+ afile.createDate +'</td>'
,'<td>'
,'<a class="layui-btn layui-btn-mini demo-reload" href="'+ CONTEXT_PATH +'/attach/download?attachmentId='+ afile.attachmentId +'">下载</a> '
,'<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>'
,'</td>'
,'</tr>'].join(''));
$tr.find('button').on('click',function(){
var attId = $(this).closest("tr").attr('attatchmentId');
var url = CONTEXT_PATH + '/attach/delete/datafile';
var rlt = $.getData(url,{'attachmentIds':attId});
if(rlt && rlt.status == WebConst.SUCCESS){
$(this).closest("tr").remove();
$("#uploadAttachmentIds").data("uploadAttachmentIds").removeByValue(attId);
}
return false;
});
$("#" + afile.fieldCode + "_list_table").append($tr);
}
}
,error: function(index, upload){ //执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）
//请求异常回调
}
});
});
layui.form.on('submit(ad)', function(data){
//处理 KindEditor 富文本取值问题
var formDoms = data["form"];
for(i=0,len=formDoms.length; i<len; i++){
var idom = data["form"][i],
idomName = data["form"][i].name,
tagName = idom.tagName,
idomId = data["form"][i].id,
keditor = _self[idomName];
if(idom.tagName == "TEXTAREA" && keditor){
keditor.sync();
data.field[idomName]=base64.encode($('#'+idomId ).val());
}
}
var retData = $.getData(_self.url, data.field);
if(retData.status!=1000 || retData.status == WebConst.FAIL){
layer.msg('保存失败', {icon: 5});
return false;
}
//如果有附件，上传附件
var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),
entityId = retData.data;
$("input[name='"+ _self.primaryKey +"']").val(retData.data);
if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){
uploadAttachmentIds = data.field["uploadAttachmentIds"];
}
if(true && uploadAttachmentIds && entityId){
var params = {};
if(uploadAttachmentIds instanceof Array)
{
params.attachmentIds = uploadAttachmentIds.join(",");
}
else
{
params.attachmentIds = uploadAttachmentIds;
}
params.entityId = entityId;
$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);
}
$("#uploadAttachmentIds").data("uploadAttachmentIds",null);
//新增之前回调函数
if(_self.afterSave && $.isFunction(_self.afterSave)){
_self.afterSave(retData);
}else{
layer.msg('保存成功', {icon: 6});
}
return false;
});
layui.form.on('submit(preAd)', function(data){
//处理 KindEditor 富文本取值问题
var formDoms = data["form"];
for(i=0,len=formDoms.length; i<len; i++){
var idom = data["form"][i],
idomName = data["form"][i].name,
tagName = idom.tagName,
idomId = data["form"][i].id,
keditor = _self[idomName];
if(idom.tagName == "TEXTAREA" && keditor){
keditor.sync();
data.field[idomName]=$('#'+idomId ).val();
}
}
//如果有附件，上传附件
var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),
params = {};
if(uploadAttachmentIds instanceof Array)
{
params.attachmentIds = uploadAttachmentIds.join(",");
}
else
{
params.attachmentIds = uploadAttachmentIds;
}
$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);
writeCookie("adImges", JSON.stringify(params), 1);
writeCookie("ad", JSON.stringify(data.field), 1);
layer.open({
type: 2,
title: "预览",
maxmin: true,
shadeClose: true, //开启遮罩关闭
area: ['100%','100%'],
content:CONTEXT_PATH+"/ad/preAd"
});
});
},
initThirdPlugin: function(){
var _self = this;
KindEditor.ready(function(K) {
_self.content = K.create('#content',{
uploadJson: CONTEXT_PATH+'/kindeditor/uploadFile',//指定上传图片的服务器端程序
fileManagerJson: CONTEXT_PATH+'/kindeditor/list?fieldCode=kind_image',//指定浏览远程图片的服务器端程序
allowFileManager: true
});
/*$("span[title='批量图片上传']").remove();*/
});
}
});
$(function(){
showAd = new ShowAd('ad', CONTEXT_PATH + '/ad/save');
showAd.render(function(data,_self){
layui.form.on('submit(' + _self.filter + ')', function(data){
//处理 KindEditor 富文本取值问题
var formDoms = data["form"];
for(i=0,len=formDoms.length; i<len; i++){
var idom = data["form"][i],
idomName = data["form"][i].name,
tagName = idom.tagName,
idomId = data["form"][i].id,
keditor = _self[idomName];
if(idom.tagName == "TEXTAREA" && keditor){
keditor.sync();
data.field[idomName]=base64.encode($('#'+idomId ).val());
}
}
var retData = $.getData(_self.url, data.field);
if(retData.status!=1000 || retData.status == WebConst.FAIL){
if(!$.isEmptyStr(retData.message))
{
layer.msg(retData.message, {icon: 5});
return false;
}
layer.msg('保存失败', {icon: 5});
return false;
}
//如果有附件，上传附件
var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),
entityId = retData.data;
$("input[name='"+ _self.primaryKey +"']").val(retData.data);
if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){
uploadAttachmentIds = data.field["uploadAttachmentIds"];
}
if(true && uploadAttachmentIds && entityId){
var params = {};
if(uploadAttachmentIds instanceof Array)
{
params.attachmentIds = uploadAttachmentIds.join(",");
}
else
{
params.attachmentIds = uploadAttachmentIds;
}
params.entityId = entityId;
$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);
}
$("#uploadAttachmentIds").data("uploadAttachmentIds",null);
//新增之前回调函数
if(_self.afterSave && $.isFunction(_self.afterSave)){
_self.afterSave(retData);
}else{
layer.msg('保存成功', {icon: 6});
}
return false;
});
});
//关闭卡片页面之前回调
function beforeClose (){
//如果涉及到文件上传，关闭卡片页面将未上传的附件进行删除
var unuploadFiles = $("#uploadAttachmentIds").data("uploadAttachmentIds");
if(unuploadFiles && unuploadFiles.length>0){
var url = CONTEXT_PATH + '/attach/delete/datafile';
$.getData(url,{'attachmentIds':unuploadFiles.join(",")});
}
}
});
$("#dealPicture").mouseover(function(){
var tbodyLength = $(this).siblings().find("tbody[id='dealPicture_list_table']").find("tr")
var flag = true;
if($(tbodyLength).length==0){
flag = false;
}
if(flag){
$(".layui-input-block button[id='dealPicture']").off('click').on('click',a) }
if(!flag){
$(".layui-input-block button[id='dealPicture']").off('click',a).on('click',upload);
$("#dealPicture").trigger('click');
}
})
function a(){
layer.msg("附件仅能上传一个");
};
function upload(){
}
function readCookie (name)
{
var cookieValue = "";
var search = name + "=";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf (search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf (";", offset);
if (end == -1)
end = document.cookie.length;
cookieValue = unescape (document.cookie.substring (offset, end))
}
}
return cookieValue;
}
function writeCookie (name, value, hours){
var expire = "";
if (hours != null)
{
expire = new Date ((new Date ()).getTime () + hours * 3600000);
expire = "; expires=" + expire.toGMTString ();
}
document.cookie = name + "=" + escape (value) + expire;
}
layui组件初始化
(function(scope){
var CardPager = Class.extend({
init: function(filter, url){
this.filter = filter;
this.url = url;
},
render: function(afterRender){
var _self = this;
_self.initThirdPlugin(); //初始化第三放插件
//plugins 这个可以不传，但是请不要传空数组过来
var plugins = _self.plugins || ['form'];
layui.use(plugins,function(){
_self.initEvent();
_self.initLayuiPlugin(); //初始化layui组件
//渲染表单数据
var params = {};
params[_self.primaryKey] = _self.primaryValue;
$.ajaxReq(_self.dataUrl, params, function(data){
if(data && data.status == WebConst.SUCCESS && data.data){
var cardForm = $("#"+_self.filter+"Form"),
formDoms = cardForm[0];
cardForm.setValues(data.data);
//处理富文本赋值问题
for(i=0,len=formDoms.length; i<len; i++){
var idom = formDoms[i],
idomName = idom.name,
tagName = idom.tagName,
idomId = idom.id,
keditor = _self[idomName];
if(idom.tagName == "TEXTAREA" && keditor){
keditor.html(data.data[idomName]);
}
}
layui.form.render();
}
if(afterRender){
afterRender(data,_self);
}
},WebConst.AJAX_FORM,null,false);
});
_self.initFiles();
},
initFiles: function(){
var _self = this,
attachParam = {};
attachParam.entityId = _self.primaryValue;
attachParam.entityName = _self.entityName;
$.ajaxReq(CONTEXT_PATH + "/attach/entity/files", attachParam, function(data){
if(data && data.status == WebConst.SUCCESS && data.data){
var files = data.data;
$("div[class='layui-upload']").each(function(index,obj){
var containerId = $(obj).attr('id'),
attachField = containerId.split("_")[0],
tableBody = containerId + "_table";
for(var i=0,len=files.length; i<len; i++){
var cFile = files[i];
if(cFile.fieldCode == attachField){
var attachImg = "";
if(!$.isEmptyStr(cFile.fileName) && (cFile.fileName.indexOf('docx')!=-1
|| cFile.fileName.indexOf('doc')!=-1))
{
//attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';
attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
}
else if(!$.isEmptyStr(cFile.fileName) && cFile.fileName.indexOf('pdf')!=-1)
{
attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
}
else
{
attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId='
+ cFile.attachmentId + '&isThumbnail=true" width="100" height="60" style="cursor:pointer;"/></td>';
}
var $tr = $(['<tr id="upload-'+ cFile.attachmentId +'" attatchmentId="'+ cFile.attachmentId +'">'
, attachImg
,'<td>'+ cFile.fileName +'</td>'
,'<td>'+ cFile.fileSize +' kb</td>'
,'<td>'+ cFile.createDate +'</td>'
,'<td>'
,'<a class="layui-btn layui-btn-mini demo-reload" href="'+ CONTEXT_PATH +'/attach/download?attachmentId='+ cFile.attachmentId +'">下载</a> '
,'<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>'
,'</td>'
,'</tr>'].join(''));
$tr.find('button').on('click',function(){
var rlt = $.getData(CONTEXT_PATH + "/attach/delete/updflag",{'attachmentId':$(this).closest("tr").attr('attatchmentId')});
if(rlt && rlt.status == '1000'){
$(this).closest("tr").remove();
}
return false;
});
$("#" + tableBody).append($tr);
}
}
})
}
},WebConst.AJAX_FORM,null,false);
},
initThirdPlugin: function(){
},
initLayuiPlugin: function(){
debugger;
var _self = this;
},
initEvent: function(){
debugger;
var _self = this;
layui.form.on('submit(' + _self.filter + ')', function(data){
//处理 KindEditor 富文本取值问题
var formDoms = data["form"];
for(i=0,len=formDoms.length; i<len; i++){
var idom = data["form"][i],
idomName = data["form"][i].name,
tagName = idom.tagName,
idomId = data["form"][i].id,
keditor = _self[idomName];
if(idom.tagName == "TEXTAREA" && keditor){
keditor.sync();
data.field[idomName]=base64.encode($('#'+idomId ).val());
}
}
var retData = $.getData(_self.url, data.field);
if(retData.status!=1000 || retData.status == WebConst.FAIL){
if(!$.isEmptyStr(retData.message))
{
layer.msg(retData.message, {icon: 5});
return false;
}
layer.msg('保存失败', {icon: 5});
return false;
}
//如果有附件，上传附件
var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),
entityId = retData.data;
$("input[name='"+ _self.primaryKey +"']").val(retData.data);
if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){
uploadAttachmentIds = data.field["uploadAttachmentIds"];
}
if(true && uploadAttachmentIds && entityId){
var params = {};
if(uploadAttachmentIds instanceof Array)
{
params.attachmentIds = uploadAttachmentIds.join(",");
}
else
{
params.attachmentIds = uploadAttachmentIds;
}
params.entityId = entityId;
$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);
}
$("#uploadAttachmentIds").data("uploadAttachmentIds",null);
//新增之前回调函数
if(_self.afterSave && $.isFunction(_self.afterSave)){
_self.afterSave(retData);
}else{
layer.msg('保存成功', {icon: 6});
}
return false;
});
if (_self.act == "read") {
$("#images_list_table").find("td").eq(4).text("");//隐藏附件的下载和删除按钮
}
}
});
scope.CardPager = CardPager;
})(window);定义公共父类
(function(){
//initializing是为了解决我们之前说的继承导致原型有多余参数的问题。当我们直接将父类的实例赋值给子类原型时。是会调用一次父类的构造函数的。所以这边会把真正的构造流程放到init函数里面，通过initializing来表示当前是不是处于构造原型阶段，为true的话就不会调用init。
//fnTest用来匹配代码里面有没有使用super关键字。对于一些浏览器`function(){xyz;}`会生成个字符串，并且会把里面的代码弄出来，有的浏览器就不会。`/xyz/.test(function(){xyz;})`为true代表浏览器支持看到函数的内部代码，所以用`/\b_super\b/`来匹配。如果不行，就不管三七二十一。所有的函数都算有super关键字，于是就是个必定匹配的正则。
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
// 超级父类
this.Class = function(){};
// Create a new Class that inherits from this class
// 生成一个类，这个类会具有extend方法用于继续继承下去
Class.extend = function(prop) {
//保留当前类，一般是父类的原型
//this指向父类。初次时指向Class超级父类
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
//开关 用来使原型赋值时不调用真正的构成流程
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
//这边其实就是很简单的将prop的属性混入到子类的原型上。如果是函数我们就要做一些特殊处理
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
//通过闭包，返回一个新的操作函数.在外面包一层，这样我们可以做些额外的处理
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
// 调用一个函数时，会给this注入一个_super方法用来调用父类的同名方法
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
//因为上面的赋值，是的这边的fn里面可以通过_super调用到父类同名方法
var ret = fn.apply(this, arguments);
//离开时 保存现场环境，恢复值。
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// 这边是返回的类，其实就是我们返回的子类
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// 赋值原型链，完成继承
Class.prototype = prototype;
// 改变constructor引用
Class.prototype.constructor = Class;
// 为子类也添加extend方法
Class.extend = arguments.callee;
return Class;
};
})();