最近刚刚从ExtJS转到JQuery,对于我这个大多数时间都写后台的人始终不是件太简单的事。不过看了几本JQuery的书,上网Google了一大堆插件,真是觉得当初悔不该选ExtJS这个死板的东东下手学习。
客户要一个类似ExtJS Grid的列表,自己写吧闲麻烦,找了个jqGrid的插件看了下,发现这东西确实不错,ExtJS Grid有的功能它基本上都有了,有些甚至还超出了我的预想。就是不知道实际应用起来如何,稳不稳定,暂且再当一次小白鼠吧。
http://www.trirand.com/blog/?page_id=6
,先去官网上下下来,解压后把js和css目录下的文件拷到工程目录,另外该插件还需要JQuery UI,将JQuery,JQuery UI一并拷到目录下:
以下是各文件内容
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-smoothness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<scrip src="js/jquery-1.3.2.min.js" type="text/javascrip"></scrip>
<scrip src="js/jquery-ui-1.7.2.min.js" type="text/javascrip"></scrip>
<scrip src="js/plugin/jqGrid/i18n/grid.locale-en.js" type="text/javascrip"></scrip>
<scrip src="js/plugin/jqGrid/jquery.jqGrid.min.js" type="text/javascrip"></scrip>
<scrip src="js/index.js" type="text/javascrip"></scrip>
<style>
body {font-size: 12px;}
</style>
</head>
<body>
<div id="content">
<table id="colch"></table>
<div id="pcolch"></div>
<div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
</div>
</body>
</html>
index.js
$(document).ready(function() {
var $mygrid = $("#colch").jqGrid( {
url : 'table.xml',
datatype : "xml",
autowidth : true,
viewrecords : true,
sortable : true,
rowNum : 10,
height : '100%',
pager : '#pcolch',
sortname : 'invdate',
sortorder : "desc",
ExpandColumn : 'note',
caption : "Column Chooser Example",
rowList : [ 10, 20, 30 ],
colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
editable : true,
editoptions : {
readonly : true,
size : 10
},
width : 55
}, {
name : 'invdate',
index : 'invdate',
editable : true,
searchoptions : {
dataInit : function(el) {
$(el).datepicker( {
dateFormat : 'yy-mm-dd'
});
}
},
width : 90
}, {
name : 'name',
index : 'name asc, invdate',
editable : true,
width : 100
}, {
name : 'amount',
index : 'amount',
editable : true,
width : 80
}, {
name : 'tax',
index : 'tax',
editable : true,
width : 80
}, {
name : 'total',
index : 'total',
editable : true,
width : 80
}, {
name : 'note',
index : 'note',
editable : true,
sortable : false
} ]
});
$mygrid.jqGrid('navGrid', '#pcolch', {
view : true,
search : false
}, {
// edit options
height : 290,
reloadAfterSubmit : false,
jqModal : false,
closeOnEscape : true,
bottominfo : "Fields marked with (*) are required"
}, {
// add options
height : 290,
reloadAfterSubmit : false,
jqModal : false,
closeOnEscape : true,
bottominfo : "Fields marked with (*) are required",
closeAfterAdd : true
});
// toggle search row button
$("#colch").jqGrid('navButtonAdd', "#pcolch", {
caption : "Toggle",
title : "Toggle Search Toolbar",
buttonicon : 'ui-icon-pin-s',
onClickButton : function() {
$mygrid[0].toggleToolbar();
}
});
// clean search value button
$("#colch").jqGrid('navButtonAdd', "#pcolch", {
caption : "Clear",
title : "Clear Search",
buttonicon : 'ui-icon-refresh',
onClickButton : function() {
$mygrid[0].clearToolbar();
}
});
// select display column button
$("#colch").jqGrid('navButtonAdd', '#pcolch', {
caption : "Columns",
title : "Reorder Columns",
onClickButton : function() {
jQuery("#colch").jqGrid('columnChooser', {
done : function(perm) {
if (perm) {
this.jqGrid("remapColumns", perm, true);
var gwdth = this.jqGrid("getGridParam", "width");
this.jqGrid("setGridWidth", gwdth);
}
}
});
}
});
$("#colch").jqGrid('filterToolbar');
});
table.xml
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<page>1</page>
<total>3</total>
<records>56</records>
<row id='1'>
<cell>1</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='2'>
<cell>2</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='3'>
<cell>3</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='4'>
<cell>4</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='5'>
<cell>5</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='6'>
<cell>6</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='7'>
<cell>7</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='8'>
<cell>8</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='9'>
<cell>9</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
<row id='10'>
<cell>10</cell>
<cell>2010-01-23</cell>
<cell>test</cell>
<cell>note</cell>
<cell>200.00</cell>
<cell>10.00</cell>
<cell>210.00</cell>
</row>
</rows>
以下是最终效果截图
查看
添加
编辑
搜索
自定义显示列
- 大小: 27.5 KB
- 大小: 30.9 KB
- 大小: 33.6 KB
- 大小: 35.4 KB
- 大小: 37.2 KB
- 大小: 39.5 KB
- 大小: 36 KB
分享到:
相关推荐
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
jqgrid
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid中文文档API,使用JQGRID
JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
jquery.jqgrid
jqGrid5.5 学习
jQgrid+demo
jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0
jqGrid详解及高级应用,Jquery Jqgrid使用手册.能使jqGrid初学者更加方便快捷的掌握jqGrid控件的使用,让有一定jqGrid基础的人更深层次的认识jqGrid
jqGrid demo
jqGrid_API中文
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
jqgrid 的帮助文档 jqGrid属性
jqGrid 最新版 3.7.2 离线帮助手册,方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框
jqGrid详解及高级应用