jqGrid jQuery 表格插件测试代码


Posted in Javascript onAugust 23, 2011

官方Demo地址:http://www.trirand.com/blog/jqgrid/jqgrid.html

效果图:
jqGrid jQuery 表格插件测试代码

页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>本地数据</title> 
<link href="css/redmond/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> 
<link href="css/ui.jqgrid.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#list1").jqGrid({ 
datatype:"local", 
height:250, 
colNames:['自动编号','地区编号','地区名称','所属城市编号'], 
colModel:[ //这一项比较重要, 其中的name属性主要是用于后期的页面代码(注意这里的范围是本页面上的代码,不会涉及到后台代码), 而index属性是则是用于涉及后台时,给后台传递排序字段 
{name:'id',index:'id',width:60,sorttype:"int"}, 
{name:'areaID',index:'areaID',width:80,sortable:false}, //sortable是该字段是否排序 
{name:'area',index:'area',width:180}, 
{name:'father',index:'father',width:100,sortable:false} //colModel两个最主要就是1:name前台js用,2:index给后台传递排序字段 
], 
multiselect:true, //是否允许多选择多项 
caption:"中国各城市的主要地区" //表格的标题文字 
}); 
var mydata=[ 
{id:"1",areaID:'110101',area:'东城区',father:'110100'}, 
{id:"2",areaID:'110102',area:'西城区',father:'110100'}, 
{id:"3",areaID:'110103',area:'崇文区',father:'110100'}, 
{id:"4",areaID:'110104',area:'宣武区',father:'110100'}, 
{id:"5",areaID:'110105',area:'朝阳区',father:'110100'}, 
{id:"6",areaID:'110106',area:'丰台区',father:'110100'}, 
{id:"7",areaID:'110107',area:'石景山区',father:'110100'}, 
{id:"8",areaID:'110108',area:'海淀区',father:'110100'}, 
{id:"9",areaID:'110109',area:'门头沟区',father:'110100'}, 
{id:"10",areaID:'110111',area:'房山区',father:'110100'} 
]; 
for(var i=0; i<mydata.length; i++) //循环给每行添加数据 
{ 
$("#list1").jqGrid('addRowData',i+1,mydata[i]); 
} 
}); 
</script> 
</head> 
<body> 
<table id="list1"></table> 
<div id="pager1"></div> 
</body> 
</html>
Javascript 相关文章推荐
javascript实用方法总结
Feb 06 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 #Javascript
js 函数的副作用分析
Aug 23 #Javascript
javascript 运算数的求值顺序
Aug 23 #Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 #Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 #Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 #Javascript
jquery 回车事件实现代码
Aug 23 #Javascript
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
python创建和删除目录的方法
2015/04/29 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
利用Python检测URL状态
2019/07/31 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
django中related_name的用法说明
2020/05/20 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
贝佳斯官方网站:Borghese
2020/05/08 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
大学生实习思想汇报
2014/01/12 职场文书
学校门卫管理制度
2014/01/30 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS