mirror of https://github.com/layui/layui
优化 transfer 代码排版
parent
de47b48301
commit
1b425491fc
|
@ -5,66 +5,73 @@
|
||||||
layui.define(['laytpl', 'form'], function(exports){
|
layui.define(['laytpl', 'form'], function(exports){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var $ = layui.$
|
var $ = layui.$;
|
||||||
,laytpl = layui.laytpl
|
var laytpl = layui.laytpl;
|
||||||
,form = layui.form
|
var form = layui.form;
|
||||||
|
|
||||||
// 模块名
|
// 模块名
|
||||||
,MOD_NAME = 'transfer'
|
var MOD_NAME = 'transfer';
|
||||||
|
|
||||||
// 外部接口
|
// 外部接口
|
||||||
,transfer = {
|
var transfer = {
|
||||||
config: {}
|
config: {},
|
||||||
,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
|
index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
|
||||||
|
|
||||||
// 设置全局项
|
// 设置全局项
|
||||||
,set: function(options){
|
set: function(options){
|
||||||
var that = this;
|
var that = this;
|
||||||
that.config = $.extend({}, that.config, options);
|
that.config = $.extend({}, that.config, options);
|
||||||
return that;
|
return that;
|
||||||
}
|
},
|
||||||
|
|
||||||
// 事件
|
// 事件
|
||||||
,on: function(events, callback){
|
on: function(events, callback){
|
||||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 操作当前实例
|
// 操作当前实例
|
||||||
,thisModule = function(){
|
var thisModule = function(){
|
||||||
var that = this
|
var that = this;
|
||||||
,options = that.config
|
var options = that.config;
|
||||||
,id = options.id || that.index;
|
var id = options.id || that.index;
|
||||||
|
|
||||||
thisModule.that[id] = that; // 记录当前实例对象
|
thisModule.that[id] = that; // 记录当前实例对象
|
||||||
thisModule.config[id] = options; // 记录当前实例配置项
|
thisModule.config[id] = options; // 记录当前实例配置项
|
||||||
|
|
||||||
return {
|
return {
|
||||||
config: options
|
config: options,
|
||||||
// 重置实例
|
// 重置实例
|
||||||
,reload: function(options){
|
reload: function(options){
|
||||||
that.reload.call(that, options);
|
that.reload.call(that, options);
|
||||||
}
|
},
|
||||||
// 获取右侧数据
|
// 获取右侧数据
|
||||||
,getData: function(){
|
getData: function(){
|
||||||
return that.getData.call(that);
|
return that.getData.call(that);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 获取当前实例配置项
|
// 获取当前实例配置项
|
||||||
,getThisModuleConfig = function(id){
|
var getThisModuleConfig = function(id){
|
||||||
var config = thisModule.config[id];
|
var config = thisModule.config[id];
|
||||||
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
|
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
|
||||||
return config || null;
|
return; config || null;
|
||||||
}
|
};
|
||||||
|
|
||||||
// 字符常量
|
// 字符常量
|
||||||
,ELEM = 'layui-transfer', HIDE = 'layui-hide', DISABLED = 'layui-btn-disabled', NONE = 'layui-none'
|
var ELEM = 'layui-transfer';
|
||||||
,ELEM_BOX = 'layui-transfer-box', ELEM_HEADER = 'layui-transfer-header', ELEM_SEARCH = 'layui-transfer-search', ELEM_ACTIVE = 'layui-transfer-active', ELEM_DATA = 'layui-transfer-data'
|
var HIDE = 'layui-hide';
|
||||||
|
var DISABLED = 'layui-btn-disabled';
|
||||||
|
var NONE = 'layui-none';
|
||||||
|
var ELEM_BOX = 'layui-transfer-box';
|
||||||
|
var ELEM_HEADER = 'layui-transfer-header';
|
||||||
|
var ELEM_SEARCH = 'layui-transfer-search';
|
||||||
|
var ELEM_ACTIVE = 'layui-transfer-active';
|
||||||
|
var ELEM_DATA = 'layui-transfer-data';
|
||||||
|
|
||||||
// 穿梭框模板
|
// 穿梭框模板
|
||||||
,TPL_BOX = function(obj){
|
var TPL_BOX = function(obj){
|
||||||
obj = obj || {};
|
obj = obj || {};
|
||||||
return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">'
|
return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">'
|
||||||
,'<div class="layui-transfer-header">'
|
,'<div class="layui-transfer-header">'
|
||||||
|
@ -78,10 +85,10 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||||
,'{{# } }}'
|
,'{{# } }}'
|
||||||
,'<ul class="layui-transfer-data"></ul>'
|
,'<ul class="layui-transfer-data"></ul>'
|
||||||
,'</div>'].join('');
|
,'</div>'].join('');
|
||||||
}
|
};
|
||||||
|
|
||||||
// 主模板
|
// 主模板
|
||||||
,TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">'
|
var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">'
|
||||||
,TPL_BOX({
|
,TPL_BOX({
|
||||||
index: 0
|
index: 0
|
||||||
,checkAllName: 'layTransferLeftCheckAll'
|
,checkAllName: 'layTransferLeftCheckAll'
|
||||||
|
@ -98,10 +105,10 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||||
index: 1
|
index: 1
|
||||||
,checkAllName: 'layTransferRightCheckAll'
|
,checkAllName: 'layTransferRightCheckAll'
|
||||||
})
|
})
|
||||||
,'</div>'].join('')
|
,'</div>'].join('');
|
||||||
|
|
||||||
// 构造器
|
// 构造器
|
||||||
,Class = function(options){
|
var Class = function(options){
|
||||||
var that = this;
|
var that = this;
|
||||||
that.index = ++transfer.index;
|
that.index = ++transfer.index;
|
||||||
that.config = $.extend({}, that.config, transfer.config, options);
|
that.config = $.extend({}, that.config, transfer.config, options);
|
||||||
|
@ -110,16 +117,16 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||||
|
|
||||||
//默认配置
|
//默认配置
|
||||||
Class.prototype.config = {
|
Class.prototype.config = {
|
||||||
title: ['列表一', '列表二']
|
title: ['列表一', '列表二'],
|
||||||
,width: 200
|
width: 200,
|
||||||
,height: 360
|
height: 360,
|
||||||
,data: [] //数据源
|
data: [], // 数据源
|
||||||
,value: [] //选中的数据
|
value: [], // 选中的数据
|
||||||
,showSearch: false //是否开启搜索
|
showSearch: false, // 是否开启搜索
|
||||||
,id: '' //唯一索引,默认自增 index
|
id: '', // 唯一索引,默认自增 index
|
||||||
,text: {
|
text: {
|
||||||
none: '无数据'
|
none: '无数据',
|
||||||
,searchNone: '无匹配数据'
|
searchNone: '无匹配数据'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -132,8 +139,8 @@ layui.define(['laytpl', 'form'], function(exports){
|
||||||
|
|
||||||
//渲染
|
//渲染
|
||||||
Class.prototype.render = function(){
|
Class.prototype.render = function(){
|
||||||
var that = this
|
var that = this;
|
||||||
,options = that.config;
|
var options = that.config;
|
||||||
|
|
||||||
//解析模板
|
//解析模板
|
||||||
var thisElem = that.elem = $(laytpl(TPL_MAIN).render({
|
var thisElem = that.elem = $(laytpl(TPL_MAIN).render({
|
||||||
|
|
Loading…
Reference in New Issue