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

Question

AlloyUI 1.5.x 展示展示了如何在其 "Real World" example 中突出显示行。该示例使用 DataTableSelection 插件和 selectRows: true，但是，该代码在 AlloyUI 3.0.x.

中不再有效

我试过使用 DataTable.Highlight module with highlightRows: true，但它只会突出显示 mouseover 上的行：

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

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

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

查看可运行示例（修改自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？

Answer 1

您需要使用 DataTableHighlight module with 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>

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

How can I highlight a DataTable row when a user clicks on it in AlloyUI 3.0.x?

javascript

datatable

alloy-ui