基于Bootstrap的jquery动态数据表格插件

当前位置:主页 > jQuery库 > 表格 > 基于Bootstrap的jquery动态数据表格插件
基于Bootstrap的jquery动态数据表格插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-03-26
    阅读:
简要教程

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