table.js.svn-base

嵌入式无线路由系统openwrt的web配置工具

/*

Class: FlashSYS.Table
  Creates dynamic table element

Copyright:
  Copyright (C) 2008 OpenRB.com

Arguments:
  container - (element or id) table will be placed inside this container
  options - (object)

Options:
  prefix - (string) id prefix, defaults to 'fstable_'
  trPrefix - (string) translation key prefix
  classPrefix - (string) css class prefix
  filters - filtering options, not yet implemented
  sortable - (boolean) whether rows can be sorted or not
  sortBy - (string) will sort by given column name automatically when specified
  tableHead - (object) table head cells with options, key specifies cell name (and is translated when set), value specifies extra options
  tableRows - (object) table rows with data, key specifies row name / id, value specifies row cells and extra options
  tableWidth - (null or integer) table width in pixels, if not specified table will use container's width
  click - (function) function to execute on row click, less priority than cell click
  params - (object) extra parameters that are passed to executed click function

Properties:
  rows - (object) row cache by name / id
  rowCount - (integer) row count, used for cache update
  cellWidth - (array) cell width cache for every column
  headCells - (array) head cell cache, used for sorting
  callbacks - (array) callback functions for every column cell
  translate - (array) whether to execute column cell translation or not
  columns - (array) columns by id, used as search cache
  columnCount - (integer) total column count
  columnClick - (array) column click function cache
  sortId - (integer) current column id used for sorting
  sortAsc - (boolean) sorting order (is ascending or not)

headOptions:
  width - (integer) given cell column width in %
  axis - ('string' or 'number') specifies which comparison type to use when sorting by this column
  blank - (boolean) defaults to false, if set - cell value is blank, no sorting is possible for this column
  click - (function) function to execute on this column cell click, defaults to FlashSYS.load if params are specified
  callback - (function) if specified, column cell value will be converted using callback function, does not affect sorting
  translate - (boolean) translate column cell values or not
  params - (object) extra parameters for click function can be specified here, overrides row extra parameters

rowOptions:
  noclick - (boolean) defaults to false, if set - row click action is ignored (cell / column can override this)
  cells - (array) row cells with data and options, array element can be a string or an object
  cls - (string) custom CSS class for given row

cellOptions:
  value - (string) cell value
  noclick - (boolean) defaults to false, if set - cell click and row click actions are ignored
  translate - (boolean) defaults to false, if set - cell value is translated and new value is used for sorting
  cls - (string) custom CSS class for given cell
  title - (string) mouse hover text

*/
FlashSYS.Table = new Class({
  Implements: [Options],

  rows: {},
  rowCount: 0,
  cellWidth: [],
  headCells: [],
  callbacks: [],
  translate: [],
  columns: [],
  columnCount: 0,
  columnClick: [],
  sortId: -1,
  sortAsc: true,

  options: {
    trPrefix: '',
    prefix: '',
    classPrefix: 'FSTable',
    filters: false,
    sortable: false,
    tableHead: {},
    tableRows: null,
    tableWidth: null,
    click: null,
    sortBy: null
  },

  initialize: function(container, options) {
    this.container = $(container);
    this.setOptions(options);

    // set table id
    this.idPrefix = (this.options.prefix ? this.options.prefix + '_' : 'fstable_') + FlashSYS.idCounter.toString() + '_';
    FlashSYS.idCounter++;

    // add filter row if required
    if (this.options.filters) {
      this.filterWrap = new Element('div', {
        'class': this.options.classPrefix + 'Filter'
      }).inject(this.container);
    }

    // default click function is params were specified but click funtion was not
    if (this.options.params && !this.options.click) {
      this.options.click = $load;
    }

    // create table wrap
    this.table = new Element('div', {
      'id': this.idPrefix + 'table',
      'class': this.options.classPrefix
    }).inject(this.container);

    if (this.options.tableWidth) {
      this.table.setStyle('width', tableWidth.toInt() );
    }

    // add table head
    this.tableHead = new Element('div', {
      'id': this.idPrefix + 'thead',
      'class': this.options.classPrefix + 'THead'
    }).inject(this.table);

    // add table body
    this.tableBody = new Element('div', {
      'id': this.idPrefix + 'tbody',
      'class': this.options.classPrefix + 'TBody'
    }).inject(this.table);

    // add table spacer
    this.tableSpacer = new Element('div', {
      'class': this.options.classPrefix + 'TSpacer'
    }).inject(this.container);

    // initialize head values
    this.initHead();

    // there are some predefine rows - add them
    if (this.options.tableRows) {
      this.loadValues( this.options.tableRows );
    }
  },
  /*

  Function: addRow
    Add one row with cells, no data is inserted at this point

  Arguments:
    rowName - (string) row name / id
    rowOptions - (object) row specific options

  */
  addRow: function(rowName, rowOptions) {
    var row = new Element('div', {
      'id': this.idPrefix + 'tbody_' + rowName,
      'class': this.options.classPrefix + 'TRow'
    }).inject(this.tableBody);

    var cells = [];

    // add cells with required widths
    rowOptions.cells.each(function(cellOptions, index){
      var cell = new Element('div', {
        'styles': {
          'width': this.cellWidth[ index ].toString() + '%'
        }
      }).inject(row);

      var cellTxt = new Element('span').addEvent('click', this.cellClick.bind(this, [rowName, row, cell, index])).inject(cell);
      cells.push({ 'cell': cell, 'txt': cellTxt });
    }, this);

    // store row cell info
    row.store('cells', cells).store('id', this.rowCount);

    // add to row cache
    this.rows[ rowName ] = row;
    this.addClearer(row);

    this.rowCount++;
  },
  /*

  Function: cellClick
    Cell / row click dispatcher

  Arguments:
    rowName - (string) row name / id
    row - (element) clicked row
    cell - (element) clicked cell
    column - (number) clicked column

  */
  cellClick: function(rowName, row, cell, column) {
    var rowOptions = row.retrieve('options', {});
    var columnOptions = this.columnClick[ column ];

    // cell-specific click function exists
    if (columnOptions && columnOptions.click) {
      // get cell options and check if clicking is enabled
      var cellOptions = cell.retrieve('options');
      var data = columnOptions.params && columnOptions.params.noEncode ? rowName : {id: rowName};

      if (cellOptions) {
        if (cellOptions.noclick) {
          return;
        }
        if (cellOptions.data && !columnOptions.params.noEncode) {
          data.extra = cellOptions.data;
        }
      }
      // confirm statement
      if (columnOptions.confirm && !confirm(FlashSYS.translate(columnOptions.confirm))) {
        return;
      }

      // run column click function
      columnOptions.click($merge(this.options.params, columnOptions.params, {data: data}));
    }
    // default table row click and click disabled not specified
    else if (this.options.click && !rowOptions.noclick) {
      var data = rowOptions && rowOptions.params && !rowOptions.params.encode ? rowName : {id: rowName};
      this.options.click($merge(this.options.params, rowOptions.params, {data: data}));
    }
  },
  /*

  Function: loadValues
    Loads table with new values, rows are created / deleted only when required

  Arguments:
    loadValues - (object) table rows with data

  */
  loadValues: function(tableRows) {
    // first: scan old rows, if it's not present in new row list - drop it
    $each(this.rows, function(rowOptions, rowName){
      if (!tableRows[ rowName ]) {
        this.deleteRow(rowName);
      }
      else {
        var rowOptions = tableRows[ rowName ];
        if ($type(rowOptions) == 'array') {
          rowOptions = { 'cells': rowOptions };
        }

        this.setValues(rowName, rowOptions);
      }
    }, this);

    // second: add new rows
    $each(tableRows, function(rowOptions, rowName){
      if (!this.rows[ rowName ]) {
        if ($type(rowOptions) == 'array') {
          rowOptions = { 'cells': rowOptions };
        }

        this.addRow(rowName, rowOptions);
        this.setValues(rowName, rowOptions);
      }
    }, this);

    // sort table if required
    if (this.options.sortable && this.sortId >= 0) {
      this.sortAsc = !this.sortAsc;
      this.doSort( this.headCells[ this.sortId ] );
    }
  },
  /*

  Function: deleteRow
    Deletes a single row

  Arguments:
    rowName - (string) row name / id

  */
  deleteRow: function(rowName) {
    var row = this.rows[ rowName ];
    if (!row) {
      return;
    }

    var rowId = row.retrieve('id');
    if (rowId === null) {
      return;
    }

    if (this.options.sortable) {
      // drop cache entries
      this.columns.each(function(colCache, colId){
        this.columns[ colId ].splice(rowId, 1);