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
