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处理图标点击事件
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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!