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

/**
 * yvan.yvtreegrid.js
 * @author luoyifan
 * 2019-07-18 21:30:00
 */
'use strict';
(function ($) {

  var filterable = false;

  var pageable = false;

  if (!jqxTreeGrid) {
    console.warn('no jqxTreeGrid!!');
    return;
  }

  function buildColumns($dom, option) {

    if (option.filterable == false) {
      filterable = false;
    } else {
      filterable = true;
    }

    if (option.pageable == true) {
      pageable = true;
    }
    else {
      pageable = false;
    }
    /*===== Columns ======*/
    var columns = option.columns;
    if ($.type(columns) === 'array' && $.type(columns[0]) === 'array') {
      //easyui 的设置方法
      columns = columns[0];
      var columnsNew = [];
      for (var i = 0; i < columns.length; i++) {
        if (columns[i].hidden === true) {
          continue;
        }

        var vv = columns[i];
        var ret = {
          dataField: vv.field,
          text: vv.title,
          type: vv.type || 'string'
        };
        if (vv.type === 'number') {
          $.extend(ret, {cellsalign: 'right', cellsformat: 'd'});
        }
        if (vv.align == 'right') {
          $.extend(ret, {cellsalign: 'right', cellsformat: 'd'});
        }
        if (vv.align == 'center') {
          $.extend(ret, {cellsalign: 'center', cellsformat: 'd'});
        }
        if ($.type(vv.width) !== 'undefined') {
          $.extend(ret, {width: vv.width});
        } else {
          if (option.autoSizeColumns) {
            $.extend(ret, {width: 80});
          }
        }
        if (vv.type === 'bool') {
          ret.cellsrenderer = (function (onOffValue) {
            return function (row, columnfield, value, defaulthtml, columnproperties) {

              if ($.trim(value) === onOffValue.on) {
                return '<div style="position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -12px;" class="jqx-widget jqx-checkbox" checked="checked"><div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"><div style="width: 16px; height: 16px;"><span style="width: 16px; height: 16px;" class="jqx-checkbox-check-checked"></span></div></div><div style="clear: both;"></div></div>';
              }

              if ($.trim(value) === onOffValue.off) {
                return '<div style="position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -12px;" class="jqx-widget jqx-checkbox"><div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"><div style="width: 16px; height: 16px;"><span style="width: 16px; height: 16px;"></span></div></div><div style="clear: both;"></div></div>';
              }

              return defaulthtml;
            };
          })({on: vv.on, off: vv.off});
        }
        if ($.type(vv.formatter) === 'function') {
          ret.cellsrenderer = (function (formatter) {
            return function (row, columnfield, value, defaulthtml, columnproperties) {
              value = formatter.call(this, value);
              if (!columnproperties) {
                columnproperties = {cellsalign: 'left'};
              }
              return '<span class="jqx-grid-cell-' + columnproperties.cellsalign + '-align" title="' + value + '" style="margin-top: 8px;padding: 0 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + value + '</span>';
            };
          })(vv.formatter);

        } else if ($.type(vv.formatter) === 'array') {
          ret.cellsrenderer = (function (formatter) {
            return function (row, columnfield, value, defaulthtml, columnproperties) {
              for (var i = 0; i < formatter.length; i++) {
                if (formatter[i]['id'] === $.trim(value)) {
                  value = formatter[i]['text'];
                  break;
                }
              }

              if (!columnproperties) {
                columnproperties = {cellsalign: 'left'};
              }
              // 如果formatter中有html标签处理标签之后再赋值到title
              if (value.indexOf('>') > -1) {
                return '<span class="jqx-grid-cell-' + columnproperties.cellsalign + '-align" title="' + filterHTMLTag(value) + '"  style="margin-top: 8px;">' + value + '</span>';
              }
              return '<span class="jqx-grid-cell-' + columnproperties.cellsalign + '-align" style="margin-top: 8px;">' + value + '</span>';
            };
          })(vv.formatter);

        } else {
          ret.cellsrenderer = (function () {
            return function (row, columnfield, value, defaulthtml, columnproperties) {
              return '<span class="jqx-grid-cell-' + columnproperties.cellsalign + '-align" title="' + value + '" style="margin-top: 8px;padding: 0 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + value + '</span>';
            };
          })(vv.formatter);
        }

        // 标题居中
        if (vv.titleAlign === 'left') {
          ret.renderer = function (value) {
            return '<div class="jqx-grid-cell-left-align" style="margin-top: 8px;">' + value + '</div>';
          }
        } else if (vv.titleAlign === 'right') {
          ret.renderer = function (value) {
            return '<div class="jqx-grid-cell-right-align" style="margin-top: 8px;">' + value + '</div>';
          }
        } else {
          ret.renderer = function (value) {
            return '<div class="jqx-grid-cell-center-align" style="margin-top: 8px;">' + value + '</div>';
          }
        }

        columnsNew.push(ret);
      }
      columns = columnsNew;
    }

    if (option.rownumbers) {
      columns = [{
        pinned: true,
        exportable: false,
        text: "",
        columntype: 'number',
        resizable: false,
        sortable: false,
        filterable: filterable,
        dataField: '__NO__',
        editable: false,
        cellsAlign: 'right',
        align: 'right',
        cellsrenderer: function (row, column, value) {
          return '<div class="jqx-grid-cell-right-align" style="margin-top: 8.5px;">' + (value + 1) + '</div>';
        },
        createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
          var editor = $("<div class='asterisk'>*</div>").appendTo(htmlElement);
          return editor;
        },
        initEverPresentRowWidget: function (datafield, htmlElement) {
        },
        getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
        },
        resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
        }
      }].concat(columns);
    }

    return columns;
  }

  function buildDataSource($dom, easyuiOpt, columns, data, jqxOption) {

    var dataAdapter, source;

    //本地直接给数据
    if ($.type(data) === 'array') {
      source = {
        localdata: data,
        datatype: "json",
        id: easyuiOpt.idField,
        hierarchy: {
          keyDataField: {name: easyuiOpt.keyDataField},
          parentDataField: {name: easyuiOpt.parentDataField}
        },
        //datafields: datafields, //这里不能给定 fields ，给定了就无法动态计算列了
        //beforeprocessing: function (root) { //本地数据 不支持分页数
        //  $dom.jqxGrid('source')._source.totalrecords = root.length;
        //}
      };
      dataAdapter = new $.jqx.dataAdapter(source);
    }

    return dataAdapter;
  }

  function init(target) {
    var state = $.data(target, 'yvtreegrid');
    var easyuiOpt = state.options;
    var $dom = $(target);

    var columns = buildColumns($dom, easyuiOpt);

    /*===== 复制新的 option ======*/
    var jqxOption = {
      height: '100%',
      width: '100%',
      columnsResize: true,
      columnsHeight: 36,
      altRows: true,
      //sortable: true,
      enableBrowserSelection: true,
      checkboxes: easyuiOpt.checkbox,
      filterable: filterable,
      filterMode: 'simple',
      columns: columns,
    };

    /*===== 数据源 ======*/
    var dataAdapter = buildDataSource($dom, easyuiOpt, columns, easyuiOpt.data, jqxOption);
    $.extend(jqxOption, {
      source: dataAdapter
    });
    delete easyuiOpt.data;

    /*===== 分页 ======*/
    $.extend(jqxOption, {
      pageable: pageable,
    });

    /*====== 工具栏 ======*/
    if (easyuiOpt.hasOwnProperty('toolbar')) {
      var toolbar = easyuiOpt.toolbar;

      $.extend(jqxOption, {
        showtoolbar: true,
        rendertoolbar: function ($dom) {
          if ($.type(toolbar) === 'array') {
            $dom.power('renderEach', {
              $target: $dom,
              items: toolbar,
            });

          } else if ($.type(toolbar) === 'object') {
            $dom.power('renderDispatch', {
              $target: $dom,
              item: toolbar,
            });
          }
        },
      });

      if (toolbar.hasOwnProperty('height')) {
        jqxOption.toolbarheight = toolbar.height || 38;
      }
    }

    //execute DOM
    $dom.jqxTreeGrid(jqxOption);
    $dom.on('rowDoubleClick', function (event) {
      if (event.args.row.expanded) {
        $dom.jqxTreeGrid('collapseRow', event.args.key);
      } else {
        $dom.jqxTreeGrid('expandRow', event.args.key);
      }
    });
    $dom.on('rowClick', function () {
      if ($.type(easyuiOpt.onRowClick) === 'function') {
        easyuiOpt.onRowClick.apply(this, arguments);
      }
    });
    $dom.on('rowSelect', function () {
      if ($.type(easyuiOpt.onRowSelect) === 'function') {
        easyuiOpt.onRowSelect.apply(this, arguments);
      }
    });
    $dom.on('rowCheck', function () {
      if ($.type(easyuiOpt.onRowCheck) === 'function') {
        easyuiOpt.onRowCheck.apply(this, arguments);
      }
    });
    $dom.on('rowUncheck', function () {
      if ($.type(easyuiOpt.onRowCheck) === 'function') {
        easyuiOpt.onRowCheck.apply(this, arguments);
      }
    });

    if (!easyuiOpt.border) {
      $dom.css({
        "border-style": 'none'
      });
    }

    // function resizeMe() {
    //   var $panel = $(this).parent();
    //   var d = $panel[0].offsetHeight - 20;
    //   // $dom.css({
    //   //   "height":d+'px'
    //   // });
    //   // var id = $dom.attr('id');
    //   // $('#horizontalScrollBar' + id).css({
    //   //     "top":d-16+'px'
    //   // });
    //   // //d = $('#verticalScrollBar' + id)[0].offsetHeight - 20;
    //   // $('#verticalScrollBar' + id).css({
    //   //   "height":d+'px'
    //   // });
    //
    //   //d = $('#content' + id)[0].offsetHeight - 20;
    //   // $('#content' + id).css({
    //   //   "height":d+'px'
    //   // });
    //   $panel.css({
    //     "height": d + 'px'
    //   });
    // }

    // var $panel = $dom.parent();
    //
    // if ($panel.data().hasOwnProperty('panel')) {
    //   $panel.panel({onResize: resizeMe});
    //   resizeMe.call($panel[0]);
    // }
    // // var id = 'super_'+$dom.attr('id');
    // // var d = $('#'+id)[0].offsetHeight-20;
    // // $dom.css({
    // //   "height":d+'px'
    // // });

    return $dom;
  }

  $.fn.power.defaults.xtype.yvtreegrid = function ($targetDOM, option, context, id) {
    var tid = 'toalCount' + id;
    var $dom = $('<div id="' + id + '" xtype="yvtreegrid"></div>');
    $targetDOM.append($dom);
    $targetDOM.parent().append('<div style="height: 30px; width: 100%; background-color: #f6f6f6;"> <div id="' + tid + '" style=" float:right;">暂无数据</div></div>');
    return $dom.yvtreegrid(option, context);
  };

  $.fn.yvtreegrid = function (options, param) {
    if (typeof options == 'string') {
      var method = $.fn.yvtreegrid.methods[options];
      if (method) {
        var args = [this];
        for (var i = 1; i < arguments.length; i++) {
          args.push(arguments[i]);
        }
        return method.apply(this, args);

      } else {
        console.error('not found method:' + options);
      }
    }

    options = options || {};
    return this.each(function () {
      var state = $.data(this, 'yvtreegrid');
      if (state) {
        $.extend(state.options, options);
      } else {
        $.data(this, 'yvtreegrid', {
          options: $.extend({}, $.fn.yvtreegrid.defaults, options)
        });
      }
      init(this, param);
    });
  };

  /**
   * 获取指定的行编号的对应数据
   * 如果不设置参数就获取当前或被选中的行数据
   */
  function getSelected($dom) {
    var selection = $dom.jqxTreeGrid('getSelection');
    if (selection && selection.length > 0) {
      return selection[0];
    }
    return null;
  }

  function getCheckedRows($dom) {
    return $dom.jqxTreeGrid('getCheckedRows');
  }

  $.fn.yvtreegrid.methods = {

    /**
     * 获取指定的行编号的对应数据
     * 如果不设置参数就获取当前或被选中的行数据
     */
    rowData: getSelected,
    currentRowData: getSelected,
    getSelected: getSelected,

    /**
     * 获取被勾选的行
     */
    getCheckedRows: getCheckedRows,

    selectRow: function ($dom, value) {
      $dom.jqxTreeGrid('selectRow', value);
    },

    reload: function (jq, option) {
      return jq.each(function () {
        var target = this;
        var state = $.data(target, 'yvtreegrid');
        var $dom = $(target);

        option = $.extend(state.options, option);

        var ttt = '暂无数据';
        if (option && option.data && option.data.length > 0) {
          ttt = '共' + option.data.length + '条';
        }


        $('#toalCount' + $(this).attr('id')).html(ttt);

        var columns = buildColumns($dom, option);
        var jqxOption = {};
        var dataAdapter = buildDataSource($dom, option, columns, option.data, jqxOption);
        $.extend(jqxOption, {
          source: dataAdapter
        });
        //console.log('build source queryParams:', option.queryParams);
        $dom.jqxTreeGrid(jqxOption);
        delete option.data;
      });
    },
    expandAll: function ($dom) {
      $dom.jqxTreeGrid('expandAll');
    }
  };

  $.fn.yvtreegrid.defaults = {
    width: '100%',
    height: '90%',
    checkbox: false,
    autoSizeColumns: true,
    columnsHeight: 36,
    border: false
  };

  //yvtreegrid
})(jQuery);