js插件---jqGrid插件如何使用
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插件如何使用的更多相关文章
- 给Chrome和Firefox添加js脚本作为插件的方法
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 手写js面向对象选项卡插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Js与flash交互：在html页面中用js与MyReport插件交互
Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...
- jqGrid插件的重载表格的解决方案
jqGrid插件的重载表格的解决方案 $("#table_list_1").empty();// 清空表格内容 var parent=$("#gbox_table_lis ...
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- js封装成插件
由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- Hadoop 框架基础（四）
** Hadoop 框架基础(四) 上一节虽然大概了解了一下 mapreduce,徒手抓了海胆,不对,徒手写了 mapreduce 代码,也运行了出来.但是没有做更深入的理解和探讨. 那么…… 本节目 ...
- 解决夸dll返回dynamic无法访问
public static class DynamicFactory { //创建线程安全(对象不会再同一时刻被多个线程访问)的字典对象 private static ConcurrentDictio ...
- NodeJS学习笔记 (15)二进制数据-buffer(ok)
模块概览 Buffer是node的核心模块,开发者可以利用它来处理二进制数据,比如文件流的读写.网络请求数据的处理等. Buffer的API非常多,本文仅挑选 比较常用/容易理解 的API进行讲解,包 ...
- css columns 与overflow结合的问题
想实现上面这样分栏,并且溢出滚动的效果.可是自己下面的代码只能得到横向滚动条.觉得出现这个情况觉得还蛮有意思的,特地记录一下. <li v-for="(item,index) in s ...
- 把qtdesigner中的ui文件生成py文件 anaconda
无奈,马上实习就要结束了,但是自己的长进才是在stm32方面,虽然对linux有了些接触 但本质上没有任何进展,不能不说这事我的悲哀,在研三的时候却要做别人大二时做的事情 如今又是精力太散,迷上了py ...
- Lenovo k860i 移植Android 4.4 cm11进度记录【上篇已完结】
2014.5.16 为了验证一下下载的CM11的源码有没有问题,决定编译一下cm官方支持的机器,手上正好有台nexus7 2012,就拿它为例测试一下在mac os x平台的整个编译过程. 1. 最开 ...
- shell脚本不同运行方式的差异
说明:以下是个人的见解,不一定都正确,如有错误,欢迎指正! 一,shell脚本的运行方式,最常见的有以下几种: 1 ) . xxx.sh,注意,前面是一个点'.' 2 ) source xxx.sh ...
- intellij idea中快速抽取方法
Intellij Idea使用教程汇总篇 问题:有时候一个方法里面嵌套了很多逻辑,想拆分为多个方法方便调用:或者一个方法复用性很高,这时,这个方法嵌套在局部方法里面肯定是不方便的,如何快速抽取出这个方 ...
- 洛谷 P1176 路径计数2
P1176 路径计数2 题目描述 一个N×N的网格,你一开始在(1, 1),即左上角.每次只能移动到下方相邻的格子或者右方相邻的格子,问到达(N, N),即右下角有多少种方法. 但是这个问题太简单了, ...
- 编译impala、拓展impala语法解析模块
以前也编译过,但是每次编译都忘记怎么做,然后都得重新找需要下载的文件. 编译文件:buildall.sh 如果想只编译前端可以这样运行: buildall.sh -fe_only 编译时会去S3下载一 ...