引导网格和 jqgrid 有什么区别？答案

【问题标题】：What is difference between the bootsrap grid and jqgrid?引导网格和 jqgrid 有什么区别？
【发布时间】：2017-01-06 06:01:51
【问题描述】：

我对@987654326@ 以及如何使用bootstrap 制作网格一无所知。我所知道的是如何制作 jqgrid，目前我正在将 jqgrid 用于我当前的项目。我试图在w3school 中阅读有关基本引导程序的信息，但我看不到如何制作网格，我的意思是就像 jqgrid。是否有任何关于使用引导程序制作网格的文章或教程？请分享。谢谢。

更新

我正在使用旧的 jqgrid v 4.3.3

【问题讨论】：

版本 4.3.3 已经有 4 年的历史了。它没有任何支持，实际上已经死了。 jqGrid现在有两个主要的分支：我开发的free jqGrid（当前版本是4.13.4）和商业Guriddo jqGrid JS（当前版本是5.1.1）。我强烈建议您从 fork 中选择一个，并将 jqGrid 从 fork 升级到最新版本。
@Oleg 我想问一下。如果我从 4.3.3 更改为您的任何建议，我的项目是否也需要进行更改？谢谢回复
我在免费的 jqGrid 版本中使用 4.x.y 转换只是因为我试图保持与旧 (4.x.y) 版本的 jqGrid 的最大兼容性。尽管如此，没有受让人，因此不需要更改。首先，您应该尝试一下。您可以直接从 CDN 加载免费的 jqGrid。见the wiki article。
@Oleg 好的，谢谢，但我认为我坚持我目前的网格，因为如果我试图改变它，我的同事或我工作的公司会对我生气。
这是您的选择。您应该将持有旧版本的风险与升级的风险进行比较。即使您不更改任何代码行，Web 浏览器也将永久更改。看the old answer，它描述了Chrome浏览器一次更新后的问题。 jqGrid 的宽度计算必须在 4.3.3 版本中修复。因此，您没有问题，但在发布新版本的网络浏览器后，未来可能会出现问题。如果需要，jqGrid 的最后一个版本将被修复，但不是 4.3.3 版本。

标签： twitter-bootstrap jqgrid

【解决方案1】：

您好，如果您希望使用 Bootstap 创建一些表，您可以参考以下链接来创建数据表。 https://datatables.net/examples/styling/bootstrap.html

它很容易实现，并带有许多插件，使其易于实现。

希望对你有帮助

【讨论】：

【解决方案2】：

Bootstrap Grid System 将一个屏幕分为 12 列。它对 Bootstrap 跨多个设备的响应特性负责。 Bootstrap 中污染的各种屏幕尺寸是小sm 中md 超小xs 和大lg。基本上，bootstrap 是一个前端 Web 框架，它具有内置的 css 和 javascript 组件，可让您轻松创建漂亮的前端。要在引导程序中创建网格，您首先必须创建一个容器，然后创建一行，然后通过将 .col-md、.col-lg、. col-xs、. col-smclasses 分配给您的 div

下面是一个网格系统的例子。来自 Bootstrap 文档的参考 http://getbootstrap.com/css/

      <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>

还可以从这个 jsfiddle 看一个实现 https://jsfiddle.net/KyleMit/Gt25L/

【讨论】：

【解决方案3】：

jqgrid 和bootstrap 网格是完全不同的东西，但是你可以应用引导网格是 jqgrid，但这没有意义。
==========================================
jqgid
jqgrid 是一种在 url 中传递json 数据的功能，它会自动创建表结构（称为jqgrid），其中提供搜索、排序、分组功能。 jqgrid 你找到的例子 here

引导网格

网页分为12个部分，根据你分配空间的方式类似于引导网格，如col-md-4、col-xs-4、col-lg-4是根据设备屏幕的类型。 bootstrap网格的例子，你找到了here

【讨论】：

你能提供一个关于如何在引导程序中制作网格的 jsfiddle 吗？如果不能，那也没关系。
当然，我会..等一下
w3schools.com/bootstrap/bootstrap_grid_examples.asp 这是一个链接，您可以在其中找到网页的单独部分。这只是演示，在实际网页中，无论您在
bla bla
中写入什么内容，整个内容都仅显示在该宽度框中
w3schools.com/bootstrap/bootstrap_grid_system.asp 查看此链接以了解更多引导网格。这会让你更容易理解。
如果你想创建一个数据网格，它就像一个显示数据的引导表，你可以看看这个选项，这是我迄今为止最好的，允许你将数据导出为所有格式，甚至可以过滤数据search 这比 Datatables 更容易实现bootstrap-table.wenzhixin.net.cn

【解决方案4】：

您没有编写您使用的 jqGrid 版本以及 jqGrid 的哪个分支（free jqGrid、商业 Guriddo jqGrid JS 或版本

旧版本的 jqGrid 对 jqGrid 元素使用 jQuery UI CSS。新版本允许您改用 Bootstrap CSS。 Here 你会发现一个使用 Bootstrap 和 jqGrid 的例子。您需要做的主要是在页面上包含 Bootstrap CSS 并添加 guiStyle: "bootstrap" 选项。就是这样。

更新：此外，Bootstrap 提供了一些 CSS 类，有助于在低分辨率的情况下隐藏网格的列。您可以尝试演示 http://jsfiddle.net/OlegKi/andm1299/45/ 并使用网格调整窗口大小。最后一列（Duration 列）使用 "hidden-xs" Bootstrap 类。如果外部窗口足够短，您将看到该列消失。

【讨论】：