hust-epi/admin-ui/yvanui/yvanui.toolbar.js

/**
 * toolbar - jQuery EasyUI
 */
(function ($) {

  $.parser.plugins.push("toolbar");
  $(function () {
    //构造方法
  });

  function createMenu(item) {
    var $dom = $('<ul class="dropdown-menu user-menu hide"></ul>');
    $.yvan.fillCommonProperties($dom, item);

    var items = $.yvan.getItems(item);
    for (var i = 0; i < items.length; i++) {
      var $item = $('<li></li>');
      var $a = $('<a></a>');
      var $icon = $('<i></i>');
      $icon.addClass(items[i].iconCls);
      $a.append($icon);
      $a.append('&nbsp;' + 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($('<span class="yvan-form-toolbar-title">' + opts.title + '</span><span class="yvan-form-toolbar-separate yvan-separate"></span>'));
    }
    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 = $('<input class="' + css + ' ctl_' + items[i].name + '" name="' + items[i].name + '" />');
          $.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 = $('<a class="' + clazz + ' button-wathet" tabIndex="-1"></a>');
          $.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('<span class="yvan-form-toolbar-title"></span>');
      } else if (value === '|') {
        $target.append('<span class="yvan-form-toolbar-separate"></span>');
      }
    } // 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);