layui.define('table', function(exports) {
|
var $ = layui.$
|
, table = layui.table
|
//字符常量
|
, MOD_NAME = 'transferTable', ELEM = '.layui-transferTable'
|
|
//外部接口
|
, transferTable = {
|
index: layui.transferTable ? (layui.transferTable.index + 10000) : 0
|
//设置全局项
|
, set: function (options) {
|
var that = this;
|
that.config = $.extend({}, that.config, options);
|
return that;
|
}
|
, get: function (id) {
|
if (this.config && this.config[id]) {
|
return this.config[id].data
|
} else {
|
return []
|
}
|
}
|
, reload: function (id, options) {
|
table.reload(id, options)
|
}
|
|
}
|
//操作当前实例
|
, transfer = function () {
|
var that = this
|
, options = that.config
|
, id = options.id || options.index;
|
transfer.that[id] = that; //记录当前实例对象
|
transfer.config[id] = options; //记录当前实例配置项
|
return {
|
reload: function (options) {
|
that.reload.call(that, options);
|
}
|
, config: options
|
//获取右侧数据
|
, getData: function (haskey) {
|
return that.getData.call(that,haskey);
|
}
|
}
|
}
|
//构造器
|
, Class = function (options) {
|
var that = this;
|
that.index = ++transferTable.index;
|
that.left_table_id = "left_table_" + that.index;
|
that.rigth_table_id = "rigth_table_" + that.index;
|
//表格重载ID 如果配置里面没有 自动分配一个ID
|
that.reload_left = options.leftTable['id'] || that.left_table_id;
|
that.reload_right = options.rightTable['id'] || that.rigth_table_id;
|
//右侧表格默认值
|
if (options.defultValue) {
|
options.defultValueKey = options.defultValueKey || 'id';
|
}
|
|
options.leftTable['elem'] = '#' + that.left_table_id;
|
options.leftTable['callback'] = options.leftTable['done'];
|
options.leftTable['firstLoad'] = true;
|
|
options.rightTable['elem'] = '#' + that.rigth_table_id;
|
options.rightTable['callback'] = options.rightTable['done'];
|
options.rightTable['firstLoad'] = true;
|
options.rightTable['data'] = options.rightTable['data'] || [];
|
that.config = $.extend({}, that.config, transferTable.config, options);
|
that.render();
|
};
|
|
|
Class.prototype.render = function () {
|
//ID里面放表格样式
|
this.tableHtml()
|
// 配置表格参数
|
this.loadTable()
|
// 移动数据
|
this.transferData()
|
|
}
|
|
Class.prototype.tableHtml = function () {
|
var that = this,
|
options = that.config,
|
left_table = '<table class="layui-hide" id="' + that.left_table_id + '" lay-filter="' + that.left_table_id + '"></table>',
|
rigth_table = '<table class="layui-hide" id="' + that.rigth_table_id + '" lay-filter="' + that.rigth_table_id + '"></table>',
|
html = '<div style="width:100%;margin:0 auto;overflow: hidden">' +
|
'<div style="display: inline-block;vertical-align: middle;">' + left_table + '</div>' +
|
'<div class="layui-transfer-active" style="">' +
|
'<button type="button" data-tid="' + that.left_table_id + '" class="' + that.left_table_id + ' layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0" style="height: 30px;line-height: 30px;">' +
|
'<i class="layui-icon layui-icon-next"></i>' +
|
'</button>' +
|
'<button type="button" data-tid="' + that.rigth_table_id + '" class="' + that.rigth_table_id + ' layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1" style="height: 30px;line-height: 30px;">' +
|
'<i class="layui-icon layui-icon-prev"></i>' +
|
'</button>' +
|
'</div>' +
|
'<div style="display: inline-block;vertical-align: middle;">' + rigth_table + '</div>' +
|
'<div>';
|
$(options.elem).append(html)
|
}
|
Class.prototype.loadTable = function () {
|
//传递的参数 table.render 表格
|
var that = this,
|
options = that.config;
|
options.leftTable['done'] = function (res, cur, total) {
|
//监听表格选中
|
table.on('checkbox(' + that.left_table_id + ')', function (obj) {
|
//表格点击触发
|
/*var checkStatusData = table.checkStatus(that.reload_left).data;
|
if (checkStatusData.length > 0) {
|
$('.' + that.left_table_id).removeClass('layui-btn-disabled')
|
} else {
|
$('.' + that.left_table_id).addClass('layui-btn-disabled')
|
}*/
|
$('.' + that.left_table_id).removeClass('layui-btn-disabled')
|
});
|
|
if (options.leftTable.callback) {
|
options.leftTable.callback(res, cur, total);
|
}
|
var rightData = table.getData(that.reload_right,false)
|
//初始化时右侧有数据，要将左侧对应数据勾选上
|
if (rightData.length > 0) {
|
for (var i = 0; i < rightData.length; i++) {
|
for (var j = 0; j < res.data.length; j++) {
|
if (rightData[i]['id'] == res.data[j]['id']) {
|
table.checkRecord(that.reload_left, res.data[j]);
|
break;
|
}
|
}
|
}
|
}
|
}
|
options.rightTable['done'] = function (res, cur, total) {
|
//监听表格选中
|
table.on('checkbox(' + that.rigth_table_id + ')', function (obj) {
|
//右侧表格点击触发
|
/*var checkStatusData = table.checkStatus(that.reload_right).data;
|
if (checkStatusData.length > 0) {
|
$('.' + that.rigth_table_id).removeClass('layui-btn-disabled')
|
} else {
|
$('.' + that.rigth_table_id).addClass('layui-btn-disabled')
|
}*/
|
$('.' + that.rigth_table_id).removeClass('layui-btn-disabled')
|
});
|
if (options.rightTable.firstLoad) {
|
if (options.rightTable.callback) {
|
options.rightTable.callback(res, cur, total);
|
}
|
//右侧表格加载完后再加载左侧，以便将数据在左侧勾选上
|
table.render(options.leftTable);
|
}
|
options.rightTable.firstLoad = false
|
};
|
|
if (options.rightTable.url) {
|
$webUtil.ajax(options.rightTable.method || 'get', options.rightTable.url, $.extend({limit: -1}, options.rightTable.where, options.rightTable.extraParams), function (result) {
|
if (result.success) {
|
options.rightTable['data'] = result.data;
|
options.rightTable['loadurl'] = options.rightTable['url'];
|
options.rightTable['url'] = null;
|
table.render(options.rightTable);
|
} else {
|
$webUtil.showErrorMsg(result.msg);
|
}
|
}, function (xhr, error) {
|
$webUtil.showDebugMsg(error);
|
}, options.rightTable.backPath);
|
} else {
|
table.render(options.rightTable);
|
}
|
|
}
|
Class.prototype.transferData = function () {
|
//绑定点击事件
|
var that = this,
|
idName = that.config.id_name;
|
$('.' + that.left_table_id).on('click', function () {
|
if (!$(this).hasClass('layui-btn-disabled')) {
|
var leftData = table.getData(that.reload_left,false)
|
var rightData = table.getData(that.reload_right,false)
|
|
layui.each(leftData, function (i, item) {
|
if (item[table.config.checkName]) {
|
//该数据左侧已选中，须在右侧中添加
|
var add = true;
|
for (var j = 0; j < rightData.length; j++) {
|
if (item['id'] == rightData[j]['id']) {
|
add = false
|
break;
|
}
|
}
|
add && rightData.push(JSON.parse(JSON.stringify(item)));
|
rightData[rightData.length - 1][table.config.checkName] = false
|
} else {
|
//该数据左侧未选中，须在右侧中删除
|
for (var j = 0; j < rightData.length; j++) {
|
if (item['id'] == rightData[j]['id']) {
|
rightData.remove(rightData[j])
|
break;
|
}
|
}
|
}
|
|
});
|
|
table.reload(that.reload_right, {data: rightData})
|
}
|
$(this).addClass('layui-btn-disabled')
|
})
|
$('.' + that.rigth_table_id).on('click', function () {
|
if (!$(this).hasClass('layui-btn-disabled')) {
|
var checkStatus = table.checkStatus(that.reload_right, true)
|
, checkStatusData = checkStatus.data;
|
if (checkStatusData && checkStatusData.length) {
|
var leftData = table.getData(that.reload_left,false)
|
|
for (var i = 0; i < checkStatusData.length; i++) {
|
//左侧表格去除选中状态
|
for (var j = 0; j < leftData.length; j++) {
|
if (checkStatusData[i]['id'] == leftData[j]['id']) {
|
table.checkRecord(that.reload_left, leftData[j]);
|
break;
|
}
|
}
|
}
|
|
table.removeData(that.reload_right, checkStatusData)
|
}
|
}
|
$(this).addClass('layui-btn-disabled')
|
})
|
|
}
|
|
//获得右侧面板数据
|
Class.prototype.getData = function (haskey) {
|
var that = this
|
, options = that.config
|
, selectedData = [];
|
|
var selectedData = table.getData(that.reload_right,!haskey)
|
return selectedData;
|
};
|
|
//记录所有实例
|
transfer.that = {}; //记录所有实例对象
|
transfer.config = {}; //记录所有实例配置项
|
|
//获得选中的数据（右侧面板）
|
transferTable.getData = function (id,haskey) {
|
var that = transfer.that[id];
|
return table.getData(that.reload_right,haskey);
|
};
|
transferTable.render = function (options) {
|
var ins = new Class(options);
|
return transfer.call(ins);
|
};
|
exports('transferTable', transferTable);
|
});
|
