/** BTable.js By Beginner Emain:zheng_jinfan@126.com HomePage:http://www.zhengjinfan.cn */ layui.define(['element', 'common', 'paging', 'form'], function (exports) { "use strict"; var $ = layui.jquery, layerTips = parent.layer === undefined ? layui.layer : parent.layer, layer = layui.layer, element = layui.element(), common = layui.common, paging = layui.paging(), form = layui.form(); var BTable = function () { /** * 默认配置 */ this.config = { elem: undefined, //容器 //data: undefined, //数据源 columns:[], url: undefined, //数据源地址 type: 'GET', //读取方式 even: false, //是否开启偶数行背景 skin: undefined, //风格样式 ,可选参数 line/row/nob field: 'id',//主键属性名 paged: false, //是否显示分页组件 singleSelect: false, //是否只能选择一行 checkbox: true //显示多选 }; this.v = '1.0.0'; }; /** * 配置BTable * @param {Object} options */ BTable.prototype.set = function (options) { var that = this; $.extend(true, that.config, options); return that; }; /** * 渲染table */ BTable.prototype.render = function () { var that = this; var _config = that.config; var columns = _config.columns; var th = ''; for (var i = 0; i < columns.length; i++) { th += '' + columns[i].fieldName + ''; } if (_config.checkbox && !_config.singleSelect) { th = '' + th; } else if (_config.checkbox) { th = '#' + th; } var tpl = '
'; if (_config.skin !== undefined && (_config.skin === 'line' || _config.skin === 'row' || _config.skin === 'nob') && _config.even) { tpl += ''; } else if (_config.skin !== undefined && (_config.skin === 'line' || _config.skin === 'row' || _config.skin === 'nob')) { tpl += '
'; } else if (_config.even) { tpl += '
'; } else { tpl += '
'; } tpl += '' + th + ''; tpl += ''; tpl += '
'; if (_config.paged) { tpl += '
'; } tpl += '
'; $(_config.elem).html(tpl); paging.init({ url: _config.url, //地址 elem: '.btable-content', //内容容器 type: _config.type, tempType: 1, tempElem: getTpl({ columns: _config.columns, checkbox: _config.checkbox, field: _config.field }), //模块容器 paged: _config.paged, pageConfig: { //分页参数配置 skip:true, elem: $(_config.elem).find('div[data-type=paged]'),//'#paged', //分页容器 pageSize: _config.pageSize || 15 //分页大小 }, success: function () { //完成的回调 //重新渲染复选框 form.render('checkbox'); form.on('checkbox(allselector)', function (data) { var elem = data.elem; $(_config.elem).find('tbody.btable-content').children('tr').each(function () { var $that = $(this); //全选或反选 $that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked; form.render('checkbox'); }); }); //绑定选择行事件 $(_config.elem).find('tbody.btable-content').children('tr').each(function (e) { //e.preventDefault(); //e.stopPropagation(); var $that = $(this); $that.on('click', function () { //只允许选择一行 if (_config.singleSelect) { $that.siblings().each(function () { $(this).children('td').eq(0).children('input[type=checkbox]')[0].checked = false }); $that.children('td').eq(0).children('input[type=checkbox]')[0].checked = true; } else { //获取当前的状态 var currState = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked; $that.children('td').eq(0).children('input[type=checkbox]')[0].checked = !currState; //当前已选择的总行数 var cbxCount = 0; $that.parent('tbody').children('tr').each(function () { var $that = $(this); if ($that.children('td:first-child').children('input')[0].checked) { cbxCount++; } }); $(_config.elem).find('thead').children('tr').children('th:first-child').children('input[type=checkbox]')[0].checked = $that.parent('tbody').children('tr').length === cbxCount; } form.render('checkbox'); }); }); } }); return that; }; /** * 获取选择的行。 */ BTable.prototype.getSelected = function (callback) { var that = this; var _config = that.config; if (!_config.singleSelect) return callback({}); var $tbody = $(_config.elem).find('tbody.btable-content'); $tbody.children('tr').each(function () { var $that = $(this); var $input = $that.children('td:first-child').children('input') if ($input[0].checked) { callback({ elem: $that, id: $input.data('id') }); } }); return that; }; /** * 获取选择的所有行数据 */ BTable.prototype.getSelections = function (callback) { var that = this; var _config = that.config; var $tbody = $(_config.elem).find('tbody.btable-content'); var dom = []; var ids = []; var index = 0; $tbody.children('tr').each(function () { var $that = $(this); var $input = $that.children('td:first-child').children('input') if ($input[0].checked) { dom[index] = $that; ids[index] = $input.data('id'); index++; } }); return callback({ elem: dom, ids: ids, count: dom.length }); }; /** * 获取模板 * @param {Object} options */ function getTpl(options) { var columns = options.columns; var tpl = '{{# if(d.list.length>0 && d.list!=undefined){ }}'; tpl += '{{# layui.each(d.list, function(index, item){ }}'; var tds = ''; for (var i = 0; i < columns.length; i++) { tds += '{{ item.' + columns[i].field + ' }}'; } if (options.checkbox) { tds = '' + tds; } else { tds = '' + tds; } tpl += '' + tds + '' tpl += '{{# }); }}'; tpl += '{{# }else{ }}'; var colLength = options.checkbox && !options.singleSelect ? columns.length + 1 : columns.length; tpl += '暂无数据.'; tpl += '{{# } }}'; return tpl; } var btable = new BTable(); exports('btable', function (options) { return btable.set(options); }); });