码迷,mamicode.com
首页 > 其他好文 > 详细

在Chrome运行Bootstrap Table测试程序报错

时间:2015-02-05 07:11:18      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:table   chrome   bootstrap   

在学习Flask的过程中,一直在寻找一个合适的前端框架,用了一段时间的EasyUI,觉得美观还有使用习惯不是很符合个人风格,就有意转向Bootstrap。


因为以开发管理系统为主,表格控件是影响我选择前端框非常重要的因素。Bootstrap自带的表格控件功能不是很丰富,在网上搜了一下,找到一个叫Bootstrap Table 的控件,基于MIT协议的开源控件。


下载建立相关目录,就按照官方例子写了一个简单的测试程序,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.min.js"></script>
  </head>
  <body>
    <table data-toggle="table" data-url="data.json" data-cache="false" data-height="299">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>
  </body>
</html>

在浏览器(Chrome)里面运行了一下,发现出来的效果跟官方例子大相径庭:

技术分享

按F12调试,发现浏览器报以下错误信息:

XMLHttpRequest cannot load file:///D:/code/bootstrap/data.json?order=asc&_=1423059391467. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.


百度了一下,发现是Chrome默认不支持加载本地json,怎么去设置我就没有深究,直接换到FireFox一切正常:

技术分享


本文出自 “自由自我” 博客,请务必保留此出处http://hhuayuan.blog.51cto.com/1630327/1611687

在Chrome运行Bootstrap Table测试程序报错

标签:table   chrome   bootstrap   

原文地址:http://hhuayuan.blog.51cto.com/1630327/1611687

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!