当用户在AlloyUI 3.0.x中单击它时，如何突出显示DataTable行？

时间：2016-11-22 15:00:57

标签： javascript datatable alloy-ui

AlloyUI 1.5.x展示了如何突出显示"Real World" example中的行。该示例将DataTableSelection插件与selectRows: true一起使用，但该代码在AlloyUI 3.0.x中不再有效。

我尝试将DataTable.Highlight module与highlightRows: true一起使用，但只突出显示mouseover上的行：

YUI().use('aui-datatable', 'datatable-highlight', function(Y) {

    /* ...code here... */

    var dataTable = new Y.DataTable({
      /* ...code here... */
      highlightRows: true
    }).render('#myDataTable');
});

请参阅runnable示例（从the "Real World" DataTable example on alloyui.com修改）：

YUI().use(
  'aui-datatable',
  'datatable-highlight',
  function(Y) {
    var remoteData = [{
      active: 'yes',
      address: '1236 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['banana', 'cherry'],
      last_login: '4/19/2007',
      name: 'John A. Smith',
      state: 'CA'
    }, {
      active: 'maybe',
      address: '9996 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['cherry'],
      last_login: ['4/10/2007'],
      name: 'Bob C. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1623 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['cherry'],
      last_login: '4/19/2007',
      name: 'John D. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3217 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['apple', 'cherry'],
      last_login: '2/15/2006',
      name: 'Joan E. Jones',
      state: 'NY'
    }, {
      active: 'maybe',
      address: '9899 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['banana'],
      last_login: '1/23/2004',
      name: 'Bob F. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1723 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['apple'],
      last_login: '4/19/2007',
      name: 'John G. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3241 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['kiwi'],
      last_login: '2/15/2006',
      name: 'Joan H. Jones',
      state: 'NY'
    }, {
      active: 'maybe',
      address: '9909 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['apple', 'banana'],
      last_login: '1/23/2004',
      name: 'Bob I. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1623 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['apple', 'cherry'],
      last_login: '4/19/2007',
      name: 'John J. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3721 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['banana'],
      last_login: '2/15/2006',
      name: 'Joan K. Jones',
      state: 'NY'
    }];

    var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];

    var nestedCols = [{
      key: 'name'
    }, {
      key: 'address'
    }, {
      key: 'city'
    }, {
      key: 'state'
    }, {
      key: 'amount'
    }];

    var dataTable = new Y.DataTable({
      columns: nestedCols,
      data: remoteData,
      highlightRows: true
    }).render('#myDataTable');
  }
);
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="myDataTable"></div>
</div>

当用户在AlloyUI 3.0.x中点击它时，如何突出显示一行？

1 个答案:

答案 0 :(得分：0)

您需要使用DataTableHighlight module代替type: 'rows'：

YUI().use('aui-datatable', 'aui-datatable-highlight', function(Y) {

    /* ...your code here... */

    var dataTable = new Y.DataTable({
      /* ...your code here... */
      plugins: [{
        cfg: {
          type: 'rows'
        },
        fn: Y.Plugin.DataTableHighlight
      }]
    }).render('#myDataTable');
});

以下是使用您的代码的可运行示例：

YUI().use(
  'aui-datatable',
  'aui-datatable-highlight',
  function(Y) {
    var remoteData = [{
      active: 'yes',
      address: '1236 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['banana', 'cherry'],
      last_login: '4/19/2007',
      name: 'John A. Smith',
      state: 'CA'
    }, {
      active: 'maybe',
      address: '9996 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['cherry'],
      last_login: ['4/10/2007'],
      name: 'Bob C. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1623 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['cherry'],
      last_login: '4/19/2007',
      name: 'John D. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3217 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['apple', 'cherry'],
      last_login: '2/15/2006',
      name: 'Joan E. Jones',
      state: 'NY'
    }, {
      active: 'maybe',
      address: '9899 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['banana'],
      last_login: '1/23/2004',
      name: 'Bob F. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1723 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['apple'],
      last_login: '4/19/2007',
      name: 'John G. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3241 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['kiwi'],
      last_login: '2/15/2006',
      name: 'Joan H. Jones',
      state: 'NY'
    }, {
      active: 'maybe',
      address: '9909 Random Road',
      amount: 0,
      city: 'Los Angeles',
      colors: ['green'],
      fruit: ['apple', 'banana'],
      last_login: '1/23/2004',
      name: 'Bob I. Uncle',
      state: 'CA'
    }, {
      active: 'yes',
      address: '1623 Some Street',
      amount: 5,
      city: 'San Francisco',
      colors: ['red'],
      fruit: ['apple', 'cherry'],
      last_login: '4/19/2007',
      name: 'John J. Smith',
      state: 'CA'
    }, {
      active: 'no',
      address: '3721 Another Ave',
      amount: 3,
      city: 'New York',
      colors: ['red', 'blue'],
      fruit: ['banana'],
      last_login: '2/15/2006',
      name: 'Joan K. Jones',
      state: 'NY'
    }];

    var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];

    var nestedCols = [{
      key: 'name'
    }, {
      key: 'address'
    }, {
      key: 'city'
    }, {
      key: 'state'
    }, {
      key: 'amount'
    }];

    var dataTable = new Y.DataTable({
      columns: nestedCols,
      data: remoteData,
      plugins: [{
        cfg: {
          type: 'rows'
        },
        fn: Y.Plugin.DataTableHighlight
      }]
    }).render('#myDataTable');

    dataTable.get('boundingBox').unselectable();
  }
);
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="myDataTable"></div>
</div>

相关问题
最新问题