/*! * B-JUI v1.2 (http://b-jui.com) * Git@OSC (http://git.oschina.net/xknaan/B-JUI) * Copyright 2014 K'naan (xknaan@163.com). * Licensed under Apache (http://www.apache.org/licenses/LICENSE-2.0) */ /* ======================================================================== * B-JUI: bjui-tabledit.js v1.2 * @author K'naan (xknaan@163.com) * -- Modified from dwz.database.js (author:ZhangHuihua@msn.com) * http://git.oschina.net/xknaan/B-JUI/blob/master/BJUI/js/bjui-tabledit.js * ======================================================================== * Copyright 2014 K'naan. * Licensed under Apache (http://www.apache.org/licenses/LICENSE-2.0) * ======================================================================== */ +function ($) { 'use strict'; // TABLEDIT CLASS DEFINITION // ====================== var Tabledit = function(element, options) { this.$element = $(element) this.options = options this.tools = this.TOOLS() this.$tbody = this.$element.find('> tbody') if (!this.$tbody.length) { this.$tbody = $('') this.$element.append(this.$tbody) } this.$numAdd = this.$btnAdd = null } Tabledit.DEFAULTS = { singleNoindex : true } Tabledit.EVENTS = { afterDelete: 'afterdelete.bjui.tabledit' } Tabledit.prototype.TOOLS = function() { var that = this var tools = { initSuffix: function($tbody) { var $trs = $tbody.find('> tr') $trs.each(function(i) { var $tr = $(this) $tr.find(':input, :file, a, label, div').each(function() { var $child = $(this), name = $child.attr('name'), val = $child.val(), fors = $child.attr('for'), id = $child.attr('id'), href = $child.attr('href'), group = $child.attr('data-group'), suffix = $child.attr('data-suffix') if (name) $child.attr('name', name.replaceSuffix(i)) if (fors) $child.attr('for', fors.replaceSuffix(i)) if (id) $child.attr('id', id.replaceSuffix(i).replaceSuffix2(i)) if (href) $child.attr('href', href.replaceSuffix(i)) if (group) $child.attr('data-group', group.replaceSuffix(i)) if (suffix) $child.attr('data-suffix', suffix.replaceSuffix(i)) if (val && val.indexOf('#index#') >= 0) $child.val(val.replace('#index#', i + 1)) if ($child.hasClass('no')) { var prefix = $child.data('prefix') ? $child.data('prefix') : '' $child.val(prefix + (i + 1)) } }) }) }, // Enter for Tab initEnter: function($tbody) { var $texts = $tbody.find(':text') $texts.each(function(i) { $(this).bind('keydown', function (e) { if (e.which == BJUI.keyCode.ENTER) { var nexInd = i + 1 if ($texts.eq(nexInd)) { $texts.eq(nexInd).focus() } e.preventDefault() } }) }) this.initInput($tbody) }, initInput: function($tbody) { $tbody.find('> tr > td').each(function() { var $span = $(this).find('.input-hold') if (!$span.length) { $span = $('') $(this).append($span) } if (!$.support.leadingWhitespace) { // for ie8 $(this).on('propertychange', ':text', function(e) { $span.text($(this).val()) }) } else { $(this).on('input', ':text', function(e) { $span.text($(this).val()) }) } }) }, initTbody: function() { var $table = that.$element, $tbody = that.$tbody $tbody.find('> tr').each(function() { var $tr = $(this), $tds = $tr.find('> td'), $ths = $table.data('bjui.tabledit.tr').clone().find('> th') $tr.data('bjui.tabledit.oldTds', $tr.html()) $ths.each(function(i) { var $td = $tds.eq(i), val = $td.data('val'), $th = $(this), $child = $th.children(), $pic = $th.find('.pic-box') if (typeof val == 'undefined') val = $td.html() if (!$td.data('noedit')) { if ($child.length) { if ($child.is('input:checkbox') || $child.is('input:radio')) { $child.filter('[value="'+ val +'"]').attr('checked', 'checked') } else if ($child.isTag('select')) { $child.find('option[value="'+ $td.data('val') +'"]').attr('selected', 'selected') } else if ($pic.length) { if ($td.data('val')) $th.find('.pic-name').val($td.data('val')) $pic.html($td.html()) } else if ($child.hasClass('wrap_bjui_btn_box')) { $child.find('input[data-toggle]').attr('value', val +'') } else if ($child.is('textarea')) { $child.html(val) if ($child.attr('data-toggle') == 'kindeditor') { $child.attr('data-toggle-old', 'kindeditor').removeAttr('data-toggle') } } else { $child.attr('value', val +'') } $td.html($th.html()) } } }) $tr.on('dblclick', $.proxy(function(e) { _doEdit($tr) }, that)).initui() that.tools.initSuffix($tbody) _doRead($tr) }) $tbody .on('click.bjui.tabledit.readonly', '[data-toggle="doedit"]', function(e) { _doEdit($(this).closest('tr')) }) .on('click.bjui.tabledit.readonly', '[data-toggle="dosave"]', function(e) { var $tr = $(this).closest('tr'), index = $tr.index(), callback = that.options.callback if (that.options.action) { $tr.wrap('
') if ($tr.attr('data-id')) { var name = $table.find('> thead > tr:eq(0)').data('idname') || 'id' $tr.before('') } var data = $tr.parent().serializeArray() if (that.options.singleNoindex) { $.each(data, function(ii, nn) { $.extend(nn, {name:nn.name.replaceSuffix(0)}) }) } $tr.prev('input').remove() $tr .unwrap() .isValid(function(v) { if (v) { if (callback) { callback = callback.toFunc() } else { callback = function(json) { if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) { _doRead($tr) } else { $tr.bjuiajax('ajaxDone', json) } } } $tr.bjuiajax('doAjax', {url:that.options.action, data:data, type:that.options.type || 'POST', callback:callback}) } }) } else { _doRead($tr) } }) that.tools.initEnter($tbody) function _doEdit($tr) { $tr.removeClass('readonly').find('> td *').each(function() { var $this = $(this), $td = $this.closest('td'), val = $td.data('val'), toggle = $this.attr('data-toggle-old'), readonly = $td.data('readonly') if (typeof val == 'undefined') val = $td.html() if ($td.data('notread')) return true if ($this.isTag('select')) $this.val($td.attr('data-val')).selectpicker('refresh').nextAll('.bootstrap-select').removeClass('readonly').find('button').removeClass('disabled') if ($this.is(':checkbox')) { $this.closest('.icheckbox_minimal-purple').removeClass('disabled') $this.closest('.icheckbox_minimal-purple').find('ins').removeClass('readonly') } if ($this.is(':radio')) { $this.closest('.iradio_minimal-purple').removeClass('disabled') $this.closest('.iradio_minimal-purple').find('ins').removeClass('readonly') } if (toggle) { if (toggle == 'dosave') return true else $this.removeAttr('data-toggle-old').attr('data-toggle', toggle) if (toggle == 'spinner') { $this.spinner('destroy').spinner() } if (toggle == 'kindeditor') { //$this.attr('data-toggle', 'kindeditor') $td.initui() } } if ($this.is(':text') || $this.is('textarea')) { $this.off('keydown.readonly') if (readonly) $this.prop('readonly', true) } $this.find('.bjui-lookup, .bjui-spinner, .bjui-upload').show() }) $tr.find('[data-toggle="doedit"]') .attr('data-toggle', 'dosave') .text('完成') } function _doRead($tr) { $tr.addClass('readonly').find('> td *').each(function() { var $this = $(this), $td = $this.closest('td'), toggle = $this.attr('data-toggle') if ($td.data('notread')) return true if ($this.isTag('select')) $this.nextAll('.bootstrap-select').addClass('readonly').find('button').addClass('disabled') if ($this.is(':checkbox')) { $this.closest('.icheckbox_minimal-purple').addClass('disabled') $this.closest('.icheckbox_minimal-purple').find('ins').addClass('readonly') } if ($this.is(':radio')) { $this.closest('.iradio_minimal-purple').addClass('disabled') $this.closest('.iradio_minimal-purple').find('ins').addClass('readonly') } if (toggle) { if (toggle == 'doedit' || toggle == 'dosave') return true else $this.removeAttr('data-toggle').attr('data-toggle-old', toggle) if (toggle == 'kindeditor') { KindEditor.remove($this) } } if ($this.is(':text') || $this.is('textarea')) $this.on('keydown.readonly', function(e) { e.preventDefault() }) $this.find('.bjui-lookup, .bjui-spinner, .bjui-upload').hide() }) $tr.find('[data-toggle="dosave"]') .attr('data-toggle', 'doedit') .text('编辑') } }, doAdd: function() { var tool = this var $table = that.$element if (!that.$numAdd || !that.$btnAdd) return $table .on('keydown.bjui.tabledit.add', 'thead .num-add', function(e) { if (e.which == BJUI.keyCode.ENTER) { that.$btnAdd.trigger('click.bjui.tabledit.add') e.preventDefault() } }) .on('click.bjui.tabledit.add', 'thead .row-add', function(e) { var rowNum = 1 if (!isNaN(that.$numAdd.val())) rowNum = parseInt(that.$numAdd.val()) that.add($table, rowNum) e.preventDefault() }) }, doDel: function($tbody) { var tool = this var delEvent = 'click.bjui.tabledit.del' $tbody.off(delEvent).on(delEvent, '.row-del', function(e) { var $btnDel = $(this) if ($btnDel.data('confirmMsg')) { $btnDel.alertmsg('confirm', $btnDel.data('confirmMsg'), {okCall: function() { tool.delData($btnDel) }}) } else { tool.delData($btnDel) } e.preventDefault() }) }, delData: function($btnDel) { var tool = this var $tbody = $btnDel.closest('tbody') var options = $btnDel.data() var _delRow = function(json) { $btnDel.closest('tr').remove() tool.initSuffix($tbody) tool.afterDelete($tbody) if (options.callback) (options.callback.toFunc()).apply(that, [json]) } if ($btnDel.is('[href^=javascript:]') || $btnDel.is('[href^="#"]')) { _delRow() } else { $btnDel.bjuiajax('doAjax', { url : $btnDel.attr('href'), data : options.data, callback : _delRow }) } }, afterDelete: function($tbody) { var deletedEvent = $.Event(Tabledit.EVENTS.afterDelete, {relatedTarget: $tbody[0]}) that.$element.trigger(deletedEvent) if (deletedEvent.isDefaultPrevented()) return } } return tools } Tabledit.prototype.init = function() { var that = this var tools = this.tools var $table = this.$element.addClass('bjui-tabledit'), $tr = $table.find('> thead > tr:first'), $tbody = this.$tbody var trHtml = $table.find('> thead > tr:first').html() $tr.find('> th').each(function() { var $th = $(this) var title = $th.attr('title') var add = $th.data('addtool') if (title) $th.html(title) if (add) { var $addBox = $('') $th.empty() that.$numAdd = $('') that.$btnAdd = $('') $addBox.append(that.$numAdd).append(that.$btnAdd).appendTo($th) } }) $table.data('bjui.tabledit.tr', $(''+ trHtml +'')) tools.initTbody() tools.doAdd() tools.doDel($tbody) } Tabledit.prototype.add = function($table, num) { var tools = this.tools var $tbody = $table.find('> tbody') var $firstTr, $tr = $table.data('bjui.tabledit.tr') for (var i = 0; i < num; i++) { $tr.find('> th').each(function() { $(this).replaceWith(''+ $(this).html() +'') }) var $addTr = $tr.clone() if (i == 0) $firstTr = $addTr $addTr.hide().appendTo($tbody) tools.initSuffix($tbody) tools.initEnter($tbody) $addTr.show().css('display', '').initui() } /*置入焦点*/ if ($firstTr && $firstTr.length) { var $input = $firstTr.find(':text') $input.each(function() { var $txt = $(this) if (!$txt.prop('readonly')) { $txt.focus() return false } }) } } // TABLEDIT PLUGIN DEFINITION // ======================= function Plugin(option) { var args = arguments var property = option return this.each(function () { var $this = $(this) var options = $.extend({}, Tabledit.DEFAULTS, $this.data(), typeof option == 'object' && option) var data = $this.data('bjui.tabledit') if (!data) $this.data('bjui.tabledit', (data = new Tabledit(this, options))) if (typeof property == 'string' && $.isFunction(data[property])) { [].shift.apply(args) if (!args) data[property]() else data[property].apply(data, args) } else { data.init() } }) } var old = $.fn.tabledit $.fn.tabledit = Plugin $.fn.tabledit.Constructor = Tabledit // TABLEDIT NO CONFLICT // ================= $.fn.tabledit.noConflict = function () { $.fn.tabledit = old return this } // TABLEDIT DATA-API // ============== $(document).on(BJUI.eventType.initUI, function(e) { var $this = $(e.target).find('table[data-toggle="tabledit"]') if (!$this.length) return Plugin.call($this) }) // init add tr $(document).on(BJUI.eventType.afterInitUI, function(e) { var $this = $(e.target).find('table[data-toggle="tabledit"]') $this.each(function() { if ($(this).is('[data-initnum]')) { var initNum = $(this).data('initnum') if (initNum > 0) { Plugin.call($(this), 'add', $(this), initNum) } } }) }) $(document).on('click.bjui.tabledit.data-api', '[data-toggle="tableditadd"]', function(e) { var $this = $(this) var num = $this.data('num') || 1 var table = $this.data('target') if (!table || !$(table).length) return if (!$(table).isTag('table')) return Plugin.call($this, 'add', $(table), num) e.preventDefault() }) }(jQuery);