/** * toolbar - jQuery EasyUI */ (function ($) { $.parser.plugins.push("toolbar"); $(function () { //构造方法 }); function createMenu(item) { var $dom = $(''); $.yvan.fillCommonProperties($dom, item); var items = $.yvan.getItems(item); for (var i = 0; i < items.length; i++) { var $item = $('
  • '); var $a = $(''); var $icon = $(''); $icon.addClass(items[i].iconCls); $a.append($icon); $a.append(' ' + items[i].text); $a.click(items[i].onClick); $item.append($a); $dom.append($item); } return $dom; } function render(target, context) { var opts = $.data(target, 'toolbar').options; var $target = $(target); $target.addClass('yvan-form-toolbar'); $target.html(''); if ($.trim(opts.title)) { $target.append($('' + opts.title + '')); } var items = $.yvan.getItems(opts); // 工具栏的按钮,与下级的表格进行关联 // 如果按钮有 hideOnUnselected 属性,代表如果表格没有选中任何行,是不需要显示的 var relateToGridArray = []; for (var i = 0; i < items.length; i++) { var value = opts.items[i]; if ($.type(value) === 'object') { if (items[i].hasOwnProperty('xtype')) { var css = 'easyui-' + items[i].xtype; var $dom = $(''); $.yvan.fillCommonProperties($dom, items[i]); $target.append($dom); //初始化元素 $dom[items[i].xtype](items[i]); if ($.type(items[i].onRender) === 'function') { items[i].onRender.call($dom[0], $target, items[i], context); } } else { if ($.type(value.onBeforeRender) === 'function') { if (value.onBeforeRender.call(this, $target, value, context) === false) { return; } } var clazz = "easyui-linkbutton"; if (value.hasOwnProperty('menu')) { value.iconCls = "fa fa-angle-down"; clazz = "easyui-menubutton"; } var $dom = $(''); $.yvan.fillCommonProperties($dom, value); $target.append($dom); if (window.hasOwnProperty('shortcut')) { shortcut.processButton($dom, value, context); } if (value.hasOwnProperty('menu')) { var $menu = createMenu(value.menu); var menuId = $.yvan.createId('menu'); $menu.attr('id', menuId); $target.append($menu); $menu.menu({}); value.menu = '#' + menuId; $dom.menubutton(value); } else { $dom.linkbutton(value); } if (value.hideOnUnselected) { //toolbar 与下面的表格进行关联 relateToGridArray.push($dom[0]); } if ($.type(value.onRender) === 'function') { value.onRender.call($dom[0], $target, value, context); } } } else if (value === '-') { $target.append(''); } else if (value === '|') { $target.append(''); } } // for //目前 hideOnUnselected 属性,只能与 grid 表格做关联 if (relateToGridArray.length > 0) { setTimeout(function () { var $grid = $target.closest('.ui-jqgrid').down('grid'); if ($grid && $grid.length > 0) { //找到表格, 并绑定表格的事件 setInterval(function () { if ($grid.find('.ui-state-highlight').length > 0) { relateToGridArray.forEach(function (item) { $(item).show(); }); } else { relateToGridArray.forEach(function (item) { $(item).hide(); }); } }, 500); } else { console.error('can\'t find grid', $target); } }); } } $.fn.toolbar = function (options, param) { if (typeof options === 'string') { var method = $.fn.toolbar.methods[options]; return method(this, param); } options = options || {}; return this.each(function () { var state = $.data(this, 'toolbar'); if (state) { $.extend(state.options, options); } else { $.data(this, 'toolbar', { options: $.extend({}, $.fn.toolbar.defaults, options) }); } render(this, param); }); }; $.fn.toolbar.methods = {}; $.fn.toolbar.defaults = {}; })(jQuery);