基于Bootstrap的jquery动态数据表格插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

raydreams.js是一款基于Bootstrap的jquery动态数据表格插件。该jquery动态数据表格的特点是使用简单，它能通过json动态加载表格所需的数据，并通过配置参数设置表格列是否排序和添加功能按钮等。

使用方法

在页面中引入bootstrap相关文件，jquery和raydreams.js文件。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/raydreams.js"></script>

HTML结构

使用一个<div>来作为容器，在它里面会生成bootstrap表格。

<div id="dataTable" class="table table-striped table-bordered">
  <!--<thead>
    <tr>
      <th data-ray-field="firstName">First Name</th>
      <th data-ray-field="lasName">Last Name</th>
      <th data-ray-field="gender">Gender</th>
      <th data-ray-field="email">Email</th>
      <th data-ray-field="title">Title</th>
      <th data-ray-field="city">City</th>
    </tr>
  </thead>-->
</div>

初始化插件

首先你需要准备好表格的数据，通常数据是一个数组，里面的每一个对象是一行表格数据，类似下面的样子。

var myData =[  
   {  
      "id":"1",
      "firstName":"Darnall",
      "lastName":"Eakeley",
      "title":"Research Assistant I",
      "grade":8,
      "ssn":"313-24-2493",
      "birthDate":"1995-03-22T20:42:15Z"
   },
   {  
      "id":"2",
      "firstName":"Nollie",
      "lastName":"Poli",
      "title":"Electrical Engineer",
      "grade":3,
      "ssn":"539-37-8776",
      "birthDate":"1988-09-28T20:24:37Z"
   },
   ...
]

然后在页面DOM元素加载完毕之后，通过下面的方法来生成表格并填充数据。

jQuery("#dataTable").raytable({
  data: myData
  columns: [
    { title: "Info", icons: [{ glyph: "glyphicon-info-sign", handler: iconAction, data:"id" }], renderIf: isManager },
    { field: "firstName", title: "First Name", sort:true },
    { field: "lastName", title: "Last Name", sort: true },
    { field: "title", title: "Title" },
    { field: "grade", title: "Grade", sort: true },
    { field: "ssn", title: "SSN"  },
    { field: "birthDate", title: "DOB", sort: true, format: parseDate },
    { title: "Delete", icons: [{ glyph: "glyphicon-trash", handler: iconAction, data: "id" }] }
  ]
});

配置参数

该jquery动态数据表格插件的可用配置参数有：

datasource：表格数据的数据源。
- data：初始化时的表格数据，可以是一个空的数组，或是一个json对象。在初始化之后，可以通过方法myTable.data(myData,'id')来动态设置数据。
- keyfield：用于标示每一个表格行的唯一标示符。
columns：表格列，一个数组，包括下面的一些字段。
- field：字段名称。
- title：表格头显示的标题。
- width：表格单元格的宽度，单位像素。
- icons：显示的图标，可以是一个或多个图标。其中，glyph代表Bootstrap 3 glyphicons图标的class名称。handler代表点击图标后的回调函数（可选）。data代表设置单元格的附加属性（可选）。
- sort：（可选，默认为false）设置该表格列是否可以进行排序。
- renderIf：用来跳过基于某些条件的单元格图标（可选）。
- format：格式化表格显示（可选）。
pageSize：每页显示的表格行数（可选，默认为25行）。
rowNumbers：显示行号（可选，默认为false）。
maxPageButtons：是否显示最大页数按钮（可选，默认为false）。
rowClickHandler：如果表格行没有图标处理事件，并且该表格行被点击，可以通过该参数来设置一个点击后的回调函数。

方法

动态设置表格数据

通过data方法可以动态的设置表格数据。它的第一个参数是一个JSON对象，第二个参数是一个唯一的标示符。

dataTable.data(myData,'id');

访问绑定数据

for (var i; i < dataTable.datasource.data.length; ++i
{
  var item = dataTable.datasource.data[i];
}

处理图标点击事件

function iconAction(event)
{
  // event is jQuery event
  // cast it to a jQuery element and get the ray-data attribute which the field set in the definition
  var data = jQuery(event.target).data('ray-data');

  // or use event.data which is an object {id:objectKey, rowIdx:clickedRow}
  alert('You clicked the icon with data = ' + event.data.id + ' on row ' + event.data.rowIdx );
}

处理表格行点击事件

function rowAction(event)
{
  // clicking a row outside of an icon is similar - just get the ray-key attribute
    var id = jQuery(event.target).data('ray-key');
    alert('You clicked row ' + event.data.rowIdx + ' with object ID ' + event.data.id );
}

该基于Bootstrap的jquery动态数据表格插件的github地址为：https://github.com/GrumpyCockatiel/raytools