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 高级语法介绍
Jun 15 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
python和opencv实现抠图
2018/07/18 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
市场开发计划书
2014/05/07 职场文书
教师考核评语大全
2014/12/31 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
python文件与路径操作神器 pathlib
2022/04/01 Python