jquery + jqGrid + json 实例

最新推荐文章于 2024-07-24 11:38:03 发布
最新推荐文章于 2024-07-24 11:38:03 发布
阅读量120 收藏
点赞数
文章标签： json jQuery HTML ViewUI
[img]http://dl.iteye.com/upload/attachment/366604/67391123-346f-3b81-90b7-a2a4b0fbbcd3.png[/img]

jqgriddemo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>jQuery jqGrid Demo joyopod</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.all.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-zh_CN.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<!--添加grid.tree.js -->
<script src="js/grid.treegrid.js" type="text/javascript"></script>


<script type="text/javascript" src="json2.js"></script>
</head>
<body>
<div>
</div>
<div class="content">
<table id="list1" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>


</body>
</html>

json2.js

$(document).ready(function(){
jQuery("#list1").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'menu',
ExpandColClick: true,
url: 'tree1.json',
datatype: 'json',
colNames: ["menu", "url"],
colModel: [{
name: 'menu',
index: 'menu',
hidden: false,
sortable: false
}, {
name: 'url',
index:'url',
hidden: false
}],
pager: false,
height:'auto',
width:'500',
viewrecords: true,
caption:'LIST'
});
});

tree1.json

{
total:1,
page:1,
records:8,
rows:[
{
id: 1,
cell:[
'joyopod',
'第一级父节点 level=0',
0,
null,
false,
false
]
}, {
id: 2,
cell:[
'第一子节点',
'level=1',
1,
1,
true,
true
]
}, {
id: 3,
cell:[
'第二子节点',
'level=1',
1,
1,
true,
true
]
}, {
id: 4,
cell:[
'第三子节点',
'第二个父节点 leve=1',
1,
1,
false,
false
]
}, {
id: 5,
cell:[
'第一个孙子节点',
'第三个父节点 level=2',
2,
4,
false,
false
]
},
{
id: 6,
cell:[
'第一个曾孙节点',
'level=3',
3,
5,
false,
false
]
}, {
id: 7,
cell:[
'第一个玄孙节点',
'level=4',
4,
6,
true,
false
]
}
, {
id: 8,
cell:[
'960slj',
'id=8',
0,
null,
false,
false
]
},
{
id: 9,
cell:[
'第四个子节点',
'id=9 level=1',
1,
8,
true,
false
]
},
{
id: 10,
cell:[
'第五个子节点',
'id=10 level=1',
1,
8,
true,
false
]
}

]
}
joyopod
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq插件之仿“卓越亚马逊”首页弹出菜单效果
wyl232
08-19 99
jq插件之仿“卓越亚马逊”首页弹出菜单效果 转自http://www.cnblogs.com/regedit/archive/2008/07/02/1234340.html /*弹出式菜单*///没剑 2008-07-03//http://regedit.cnblogs.com/*参数说明*///showobj:要显示的菜单ID//timeout：延时时间,鼠标停留/离开后延时多久开始显示/隐藏...
解决jquery跨域cookie丢失问题
追求卓越，精彩人生
12-12 3952
方式一：采用jsonp方式实现解决，建议采取这种方式实现。前端代码： $.ajax({ type: "POST", url: "http://*",
jQuery表格插件jqGrid之JSON数据
那一抹、璀璨
03-25 1268
这次真正的用到数据库中的数据了，其实这也是我们用jqGrid的根本，谁本地数据也用这么庞大的插件。 因为jqGrid数据都是异步获取的，其实我们应该首先明白，数据是如何去获取的，jqGrid实例图本身就向我们展示的很清楚了, 我们要传递给后台的数据就是1:pagesize-页大小（即页面显示多少条记录,通常的分页大小),2:curpage-当前页码（要让后台知道你要取哪一页的数据），3：排序字
jq php-excel,jqGrid 导出excel表格代码(php+jqgrid实例)_PHP教程
weixin_35891724的博客
03-16 96
jqgrid php demophp代码// create the jqgrid instance$grid = new jqgridrender($conn);// write the sql query$grid->selectcommand = 'select orderid, orderdate, customerid, freight, shipname from longorde...
jQuery jqgrid 应用实例
weixin_30823833的博客
11-22 81
1.html <div class="ibox-content"> 　　<div class=\"jqGrid_wrapper\"> 　　　　<table id="table_list_1"></table> 　　　　<div id="pager_list_1"></div> 　　</div> ...
jquery + JsonView + spring + ibatis实例
坚持原则-保持简单
01-14 94
本着尽量轻量级、尽量少依赖的原则选择了这一组合。主要思路是前端jquery以getJSON取得数据，然后展示，减少页面刷新，减少jsp的使用，数据层根据需要选择ibatis或hibernate什么的。 ibatis的配置就不贴了，下面是spring的主要配置，用了annotation，需要配置的也少。 [code="xml"] ...
jqgrid php 实例下载,jquery增加时编辑jqGrid(实例代码)
weixin_39968801的博客
04-03 70
复制代码 代码如下:function showTestSubjectGrid() {$("#testSubjectGrid").jqGrid({url: "",datatype: "json",height: 215,width: 480,caption: "测试科目",autoheight: true,autowidth: true,scrollrows: false, // 是否显示行滚动条m...
13jqGrid - 加载JSON数据
阿甘兄
04-24 593
HTML代码举例 <html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="list2"></table> <div id="pager2"><...
19jqGrid - 多选
阿甘兄
04-24 400
这个例子展示了行的多选。 HTML代码举例 <html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="list9"></table> <div id="pag...
jquery.jqGrid-4.5.4
11-11
2. **初始化表格**：通过JavaScript代码创建jqGrid实例，设置相关参数，如表格ID、数据源、列定义等。 3. **绑定数据**：可以使用JSON、XML或纯JavaScript数组等形式将数据加载到表格。 4. **监听事件**：根据需要...
jQuery jqGrid 3.5 完整实例包.zip
11-16
2. **远程数据源支持**：jqGrid支持从服务器获取数据，如通过AJAX请求JSON或XML格式的数据。这使得动态加载和实时更新数据变得简单。 3. **列自定义**：每个列都可以单独配置，包括标题、宽度、对齐方式、是否可...
jquery.jqGrid-4.4.3
12-19
在 HTML 页面中引入 jqGrid 的 JavaScript 和 CSS 文件，然后使用 jQuery 选择器创建 jqGrid 实例，并设置相应的配置选项。例如： ```html <table id="list"></table> <div id="pager"></div> jQuery("#list")....
jquery增加时编辑jqGrid(实例代码)
12-09
代码如下:function showTestSubjectGrid() { $(“#testSubjectGrid”).jqGrid({ url: “”, datatype: “json”, height: 215, width: 480, caption: “测试科目”, autoheight: true, autowidth: true, ...
微信小程序安装vant组件库和使用
qq_61132537的博客
07-23 634
van-button type="primary">主要按钮</van-button>
本地部署SearXNG
m0_62458145的博客
07-23 482
当您安装 SearXNG 时，默认的输出格式是 HTML 格式。请将以下行添加到 settings.yml 文件中。如前面的示例所示，settings.yml 文件位于 ${PWD}/searxng/settings.yml。SearXNG 是一个免费的互联网元搜索引擎，整合了各种搜索服务的结果。用户不会被跟踪，也不会被分析。中填写访问地址，例如：http://x.x.x.x:8080，如果你想通过其他方式安装 SearXNG，请参考。3. 在 Dify 中集成 SearXNG。
HTTP请求入参类型解读
最新发布
Bekind2010的专栏
07-24 1052
在HTTP请求中，请求头用于指示资源的MIME类型，即请求体的媒体类型。它告诉服务器实际发送的数据类型是什么，以便服务器能够正确地解析和处理这些数据。可以有多种值，每种值都对应着不同的媒体类型。以下是一些常见的?enctypeenctypeform-datatext/plaintext/plaintext/htmltext/htmltext/xmltext/xmltext/xml每种都对应着不同的数据格式和用途，选择合适的对于确保数据被正确解析和处理至关重要。
Gson使用TypeAdapterFactory和TypeAdapter实现Json中的Key统一修改
Zorro的博客
07-23 228
【代码】Gson使用TypeAdapterFactory和TypeAdapter实现Json中的Key统一修改。
spring-from表单
weixin_51482243的博客
07-22 902
2.Controller定义的接口指定consumes，produces对应的是客户端请求header的Content-Type，Accept；标记在方法上,对应接口的第2层地址；500是请求头Accept=text/plain,接口代码produces=MediaType.TEXT_PLAIN_VALUE,但代码响应是某类的对象;3.面试题/接口文档-要求请求参数是int类型，测试请求参数时还是字符串，但开发的代码需要类型转换，如@RequestParam(name="xx")Integer xx,
jqGrid使用教程：jQuery数据网格操作
1. 基本配置：创建 jqGrid 实例，设置表格的基本属性，如宽度、高度、列定义等。例如： ```javascript $("#grid").jqGrid({ url: 'data.php', // 数据来源 datatype: 'json', colModel: [ // 列定义 {name: 'id'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值