jQuery Bootgrid 一个专为 Bootstrap 设计的表格控件 - 文章教程

jQuery Bootgrid 一个专为 Bootstrap 设计的表格控件

发布于 2020-09-21 字数 5116 浏览 1275 评论 0

jQuery Bootgrid 是一个强大的表格控件,专为 Bootstrap 而设计,当然也可用于其他的语言或者框架组件,漂亮、时尚、直观的表格控件,特别是针对于 Bootstrap 设计。

jQuery Bootgrid 一个专为 Bootstrap 设计的表格控件

特点

响应式网页设计

移动设备越来越重要,时间也越来越少。因此,为所有设备开发一个网站是保持开发时间和成本低的正确解决方案。

jQuery Bootgrid 一个专为 Bootstrap 设计的表格控件

可访问性支持

让每个人在没有额外工作的情况下都能看到它–只是使用它。

服务器端数据加载(异步)

通过以下方式异步加载数据阿贾克斯通过调用例如休息服务。

jQuery Bootgrid 一个专为 Bootstrap 设计的表格控件

动态操纵

动态地添加、清除或删除行。API.

导航

强大的分页和搜索字段可以帮助您轻松浏览数据。

样式支撑

默认样式基于引导。

柔性设计

你是设计师,这完全取决于你如何设计你的表格。

高度可配置

一切都是可配置的&插件完全基于可以定制的模板。

jQuery Bootgrid 一个专为 Bootstrap 设计的表格控件

数据 API

数据属性也可以设置所有设置。

客户端数据加载(内存中)

将基本表转换为具有高级功能的表(例如排序、分页、搜索等)。

单行和多行选择支持

如今,任何地方都需要交互,而选择正是帮助您做到这一点的一种特性。

本地化支持

标签可以很容易地更改。

还有更多..

看看这些例子,了解更多关于它的知识。

安装

传统方式

JQueryBootGrid 是一个托管在 GitHub 上的开源项目,因此可以通过多种方式下载。最简单和最快的开始方式是下载编译和压缩版本。

压缩编译版本

不包括任何多余文件,只是的 JS 档案。

http://www.jquery-bootgrid.com/Download/CompiledSources

不包括任何文件;只是赤裸裸的JS档案。

源代码

包含原始源文件。通过使用 grunt api 命令 API 文档将自动生成。

http://www.jquery-bootgrid.com/Download/SourceCode

包管理器

JQueryBootGrid也可以在下面的包管理器上使用。

NuGet

Microsoft 开发平台的包管理器包括 .net。你可以在 NuGet 上找到包裹 这里。要在项目中引用当前版本的jQueryBootGrid,请使用以下命令。

PM> Install-Package jQuery.Bootgrid

NPM

包管理器Node.js。你可以在 NPM 上找到这个包裹 这里,要在项目中引用当前版本的jQueryBootGrid,请使用以下命令。

$ npm install jquery-bootgrid

bower

要在项目中引用当前版本的 jQueryBootGrid,请使用以下命令。

$ bower install jquery.bootgrid

CDN

JQueryBootGrid 发布在以下 CDN 上。

CDNJS

CDNJS 是 JavaScript 和 CSS 框架的一个已知内容交付网络。您可以在 CDNJS 上找到 jQueryBootGrid 这里

使用方法

快速开始所需的一切都是:

  • 在HTML代码中包括 jQuery、jquery bootgrid 和 Bootstrap 库。
  • 通过添加 data-column-id 属性来定义表布局和数据列。
  • 指定用于填充数据表的数据 URL,并通过 data-api 在表上直接将 ajax 选项设置为 true。
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <meta charset="utf-8">
    <!-- Styles -->
    <link href="bootstrap.css" rel="stylesheet">
    <link href="jquery.bootgrid.css" rel="stylesheet">
  </head>
  <body>
    <table
      id="grid"
      data-toggle="bootgrid"
      data-ajax="true" data-url="/api/data/basic"
      class="table table-condensed table-hover table-striped"
    >
      <thead>
        <tr>
          <th data-column-id="id">ID</th>
          <th data-column-id="name">Sender</th>
        </tr>
      </thead>
    </table>
    <!-- Scripts -->
    <script src="jquery.js"></script> 
    <script src="jquery.bootgrid.js"></script>
  </body>
</html>

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0