js插件---jqGrid插件如何使用

一、总结

一句话总结：jqdrid还是依赖加js初始化的方式，很多时候插件的问题一般都是引入的css和js的问题，jqgrid里面遇到的问题就是下载包有一些js和css没有，因为是依赖而不属于本身

1、直接看插件官方文档好还是看中介（amazeui，bootstrap等）的文档好？

有些时候直接官方文档可能更加方便

有些时候则是这些中介的文档方便

所以其实可以都看一下，比较一下就知道用哪个了

2、jqGrid的数据是怎么获取的？

用接口获取的jsonp格式的数据

 <script type="text/javascript">

     $(document).ready(function () {

         $("#jqGrid").jqGrid({

             url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',

             mtype: "GET",

     styleUI : 'Bootstrap',

             datatype: "jsonp",

             colModel: [

                 { label: 'OrderID', name: 'OrderID', key: true, width: 75 },

                 { label: 'Customer ID', name: 'CustomerID', width: 150 },

                 { label: 'Order Date', name: 'OrderDate', width: 150 },

                 { label: 'Freight', name: 'Freight', width: 150 },

                 { label:'Ship Name', name: 'ShipName', width: 150 }

             ],

     viewrecords: true,

             height: 250,

             rowNum: 20,

             pager: "#jqGridPager"

         });

     });

 </script>

3、jqGrid插件报初始化函数无法使用的原因是什么？

uncaught函数肯定是因为没找到，也就是js引入出现了问题

不仅是因为差文件，文件的顺序也不对

zmazeui的插件使用哪里有给所需插件和顺序

下载包里面有一些要引入的文件没有（黄色标注的），也正常

<link rel="stylesheet" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css">

<link rel="stylesheet" href="../../../css/amazeui.min.css">

<link rel="stylesheet" href="../dist/amazeui.jqgrid.min.css">

<script src="http://cdn.amazeui.org/jquery/2.1.4/jquery.min.js"></script>

<script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-cn.js"></script>

<script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>

<script src="../dist/amazeui.jqgrid.min.js"></script>

二、js插件---jqGrid插件如何使用

1、截图

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jqGrid Loading Data - Million Rows from a REST service</title>

     <!-- amazeui的默认引入 -->

 <!--     <link rel="stylesheet" href="../../../css/amazeui.min.css">

     <script src="../../../js/jquery.min.js"></script>

     <script src="../../../js/amazeui.min.js"></script>

 <script src="../dist/amazeui.jqgrid.min.js"></script>

 <link rel="stylesheet" href="../dist/amazeui.jqgrid.min.css">

 <link rel="stylesheet" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css">

   <script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script> -->

     <!-- 插件对应的js和css -->

   <script src="http://cdn.amazeui.org/jquery/2.1.4/jquery.min.js"></script>

 <link rel="stylesheet" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css">

 <link rel="stylesheet" href="../../../css/amazeui.min.css">

 <link rel="stylesheet" href="../dist/amazeui.jqgrid.min.css">

 <script src="http://cdn.amazeui.org/jquery/2.1.4/jquery.min.js"></script>

 <script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-cn.js"></script>

 <script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>

 <script src="../dist/amazeui.jqgrid.min.js"></script>

   <script>

     // $.jgrid.defaults.width = 780;

   </script>

 </head>

 <body>

 <div style="margin-left:20px">

     <table id="jqGrid"></table>

     <div id="jqGridPager"></div>

 </div>

 </body>

 <script type="text/javascript">

   $(document).ready(function () {

     $("#jqGrid").jqGrid({

       url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',

       mtype: "GET",

       styleUI : 'AmazeUI',

       datatype: "jsonp",

       colModel: [

         { label: 'OrderID', name: 'OrderID', key: true, width: 85 },

         { label: 'Customer ID', name: 'CustomerID', width: 150 },

         { label: 'Order Date', name: 'OrderDate', width: 150 },

         { label: 'Freight', name: 'Freight', width: 150 },

         { label:'Ship Name', name: 'ShipName', width: 150 }

       ],

       viewrecords: true,

       height: 250,

       rowNum: 20,

       pager: "#jqGridPager"

     });

   });

  </script>

 </html>
 

js插件---jqGrid插件如何使用的更多相关文章

  1. 给Chrome和Firefox添加js脚本作为插件的方法

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...

  2. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  3. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. Js与flash交互：在html页面中用js与MyReport插件交互

    Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...

  6. jqGrid插件的重载表格的解决方案

    jqGrid插件的重载表格的解决方案 $("#table_list_1").empty();// 清空表格内容 var parent=$("#gbox_table_lis ...

  7. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  8. js封装成插件

    由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...

  9. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

  1. RecordAccumulator 1

    介绍 前面讲过producer会将数据保存在RecordAccumulator中,并通过Sender发送数据.RecordAccumulator 就相当于一个队列保存着那些准备发送到server的数据 ...

  2. CSS 奇技淫巧

    用button实现垂直水平居中对齐 http://www.baidufe.com/item/113ce1894da2b5203669.html “今天同事在群里分享了一个特牛叉的前端小技巧:用butt ...

  3. 双列集合Map的嵌套遍历

    双列集合Map的嵌套使用,例如HashMap中还有一个HashMap,这样的集合遍历起来稍微有点儿复杂.例如一个集合:HashMap<Integer,HashMap<String,Inte ...

  4. PostgreSQL Replication之第四章 设置异步复制（2）

    4.2 配置级联复制 正如您在本章已经看到的,设置流复制真的很容易.只需要设置几个参数,做一个基础备份,并享受您的复制设置. 在许多情况下,这种情况更有一点点微妙.在这个例子中我们假设:我们要使用一个 ...

  5. c# protected public private internal

    1 internal 只能在一个项目中引用,不能跨项目引用,只有在同一程序集的文件中 2 public 最高级别的访问权限 对访问公共成员没有限制 3 private 最低级别的访问权限 只能在声明它 ...

  6. 20180929 北京大学 人工智能实践：Tensorflow笔记08

    https://www.bilibili.com/video/av22530538/?p=28 ———————————————————————————————————————————————————— ...

  7. [APIO2010]巡逻（树的直径）

    [APIO2010]巡逻 题目描述 在一个地区中有 n 个村庄,编号为 1, 2, ..., n.有 n – 1 条道路连接着这些村 庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到 ...

  8. 题解 CF383C 【Propagating tree】

    这道题明明没有省选难度啊,为什么就成紫题了QAQ 另:在CF上A了但是洛谷Remote Judge玄学爆零. 思路是DFS序+线段树. 首先这道题直观上可以对于每一次修改用DFS暴力O(n),然后对于 ...

  9. Ubuntu 14.04 SNMP安装与配置

    http://blog.csdn.net/wang1144/article/details/51177260 http://blog.csdn.net/shanzhizi/article/detail ...

  10. COGS——T1310. [HAOI2006]聪明的猴子

    http://cogs.pro/cogs/problem/problem.php?pid=1310 ★   输入文件:monkey.in   输出文件:monkey.out   简单对比时间限制:1 ...