bootstrap和jqGrid结合使用(改变表格样式风格)

首先给你们一个连接:如果看不懂英文的话,使用谷歌浏览器,可以有翻译功能

http://www.guriddo.net/documentation/guriddo/javascript/#using-bootstrap-v3-css-framework

如果是bootstrap v3版本的话,按照如下方式引入文件即可

<!DOCTYPE html> 
< html  lang = “en” > 
< head > 
   < meta  charset = “utf-8”  /> 
   <! - 指向Bootstrap css的
   链接- > < link  rel = “stylesheet”  href = “ https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css“ > 
   <! - 网格所需的CSS 
   链接- > < link  rel = ”stylesheet“  type = “text / css”  media = “screen” href =“../../../  css /trirand/ui.jqgrid-bootstrap.css” /> 
   <! -  jQuery库是所有Guriddo产品的先决条件 - > 
   < script  type = “text / ecmascript”  src = “js / jquery.min.js” > </ script > 
   <! - 我们支持40多个本地化 - > 
   < script  type = “text / ecmascript”  src = “js / trirand / i18n / grid.locale -en.js“ > </ script > 
   <! - 这是jqGrid的Javascript文件 - >   
   < script  type = ”text / ecmascript“ src =“js / trirand / jquery.jqGrid.min.js” > </ script > 
   < script > 
       $ jgrid 默认值styleUI  =  'Bootstrap' ; 
   </ script > 
   < script  src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js” > </ script > 
   < title > jqGrid with Bootstrap </ title > 
</ > 
< body >
...
</ body > 
</ html >

其他版本上面有介绍

需要引入的插件里面应该有一个文件不好找,在这里我给出地址

ui.jqgrid-bootstrap-ui.css这个文件

下载地址:http://guriddo.net/?page_id=103292

选择最左面的Guriddo jqGrid JS即可

下载后的文件路径:Guriddo_jqGrid_JS_5_3_X_demo\css\trirand

在定义jqGrid属性的时候添加

styleUI: 'Bootstrap'即可
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Bootstrap Treeview 和 Bootstrap 分栏可以很容易地结合使用,以创建一个具有多级层次结构的导航菜单。 下面是一个简单的示例: ```html <div class="container"> <div class="row"> <div class="col-md-4"> <div id="treeview"></div> </div> <div class="col-md-8"> <h1>Content</h1> </div> </div> </div> ``` 在这个示例中,我们使用Bootstrap 的分栏组件来创建一个两列布局。左侧列占据了 4 个网格,右侧列占据了 8 个网格。 左侧列中的 div 元素使用了 id="treeview" 属性,这是我们将要使用 Bootstrap Treeview 插件渲染的容器。 接下来,我们需要引入 BootstrapBootstrap Treeview 的 CSS 和 JavaScript 文件,并在 JavaScript 中初始化 Treeview 插件: ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> <script> $(function() { var data = [ { text: 'Parent 1', nodes: [ { text: 'Child 1', nodes: [ { text: 'Grandchild 1' }, { text: 'Grandchild 2' } ] }, { text: 'Child 2' } ] }, { text: 'Parent 2' }, { text: 'Parent 3' } ]; $('#treeview').treeview({data: data}); }); </script> ``` 在这个示例中,我们创建了一个包含多级层次结构的数据对象,并将其传递给 Treeview 插件的 data 选项。 最后,我们在 JavaScript 中使用 $('#treeview').treeview({data: data}) 方法将 Treeview 插件应用于 id="treeview" 的 div 元素。 这样,我们就可以在左侧列中创建一个具有多级层次结构的导航菜单,而右侧列中可以放置任何内容,例如显示所选菜单项的详细信息、表单等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值