JQuery 插件FlexiGrid 之完全配置与使用Word格式.docx
《JQuery 插件FlexiGrid 之完全配置与使用Word格式.docx》由会员分享，可在线阅读，更多相关《JQuery 插件FlexiGrid 之完全配置与使用Word格式.docx（13页珍藏版）》请在冰点文库上搜索。
7.
url:
'
../ReleaseInfoServlet?
hidden=manage'
8.
dataType:
json'
9.
colModel
:
[
10.
{display:
信息编号'
name
RINO'
width
50,
sortable
true,
align:
center'
hide:
false},
11.
信息标题'
RITITLE'
250,
},
12.
信息类别'
IC.ICNAME'
100,
13.
信息热点'
RIHOTPOINT'
60,
14.
!
--{display:
信息内容'
RICONTENT'
},-->
15.
发布日期'
RIDATE'
120,
16.
发布作者'
RIAUTHOR'
80,
}
17.
],
18.
buttons
19.
{name:
添加'
bclass:
add'
onpress
button},
20.
删除'
delete'
21.
修改'
modify'
22.
{separator:
true}
23.
24.
searchitems
25.
isdefault:
true},
26.
27.
28.
29.
30.
sortname:
"
RINO"
31.
sortorder:
desc"
32.
usepager:
33.
title:
信息发布管理'
34.
useRp:
35.
rp:
20,
36.
showTableToggleBtn:
37.
width:
780,
38.
height:
300
39.
40.
）;
41.
42.
function
button（com,grid）
43.
44.
if
（com=='
）
45.
46.
${"
}.value="
delete"
;
47.
if（$（'
.trSelected'
grid）.length==0）{
48.
alert（"
请选择要删除的数据"
49.
}else{
50.
if（confirm（'
是否删除这
+
$（'
grid）.length
条记录吗?
））
51.
52.
var
id
="
53.
for（var
i=0;
i<
grid）.length;
i++）{
54.
if（i==$（'
grid）.length-1）{
55.
+=
+$（'
grid）.find（"
td:
first"
）.eq（i）.text（）;
56.
else
57.
）.eq（i）.text（）+"
&
58.
59.
60.
window.location.href="
hidden="
+${"
}.value+"
+id;
61.
62.
63.
64.
65.
66.
add"
67.
infoAdd.jsp?
}.value;
68.
69.
70.
71.
modify"
72.
if（$（"
.trSelected"
）.length==1）{
73.
td"
）.eq（0）.text（）;
74.
}else
）.length>
1）{
75.
请选择一个修改,不能同时修改多个"
76.
）.length==0）{
77.
请选择一个您要修改的新闻信息"
78.
79.
80.
flexgrid参数介绍:
1.height:
200,
//flexigrid插件的高度，单位为px
2.width:
‘auto’,
//宽度值，auto表示根据每列的宽度自动计算
3.striped:
//是否显示斑纹效果，默认是奇偶交互的形式
4.novstripe:
false,
5.minwidth:
30,
//列的最小宽度
6.minheight:
//列的最小高度
7.resizable:
//是否可伸缩
8.url:
//ajax方式对应的url地址
9.method:
‘POST’,
//
数据发送方式
10.dataType:
‘xml’,
数据加载的类型
11.errormsg:
‘Connection
Error’,//错误提升信息
12.usepager:
//是否分页
13.nowrap:
//是否不换行
14.page:
1,
//默认当前页
15.total:
//总页面数
16.useRp:
//是否可以动态设置每页显示的结果数
17.rp:
15,
每页默认的结果数
18.rpOptions:
[10,15,20,25,40],//可选择设定的每页结果数
19.title:
false,//是否包含标题
20.pagestat:
‘Displaying
{from}
to
{to}
of
{total}
items’,//显示当前页和总页面的样式
21.procmsg:
‘Processing,
please
wait
…’,//正在处理的提示信息
22.query:
”,//搜索查询的条件
23.qtype:
”,//搜索查询的类别
24.nomsg:
‘No
items’,//无结果的提示信息
25.minColToggle:
//minimum
allowed
column
be
hidden
26.showToggleBtn:
//show
or
hide
toggle
popup
27.hideOnSubmit:
true,//隐藏提交
28.autoload:
true,//自动加载
29.blockOpacity:
0.5,//透明度设置
30.onToggleCol:
false,//当在行之间转换时
31.onChangeSort:
false,//当改变排序时
32.onSuccess:
false,//成功后执行
33.onSubmit:
false
调用自定义的计算函数
注意:
Head标签必须要引入
link
rel="
stylesheet"
href="
css/flexigrid/flexigrid.css"
text/css"
/link>
3.<
script
text/javascript"
src="
lib/jquery/jquery.js"
/script>
4.<
js/flexigrid.js"
jquery.js、flexigrid.css、flexigrid.js
三个主要文件
自己要根据自己的文件路径.去引入css\js文件
页面完成启动tomcat测试页面会不会显示控件.
应该是没有问题的,只是没有数据
主要的还是后台的操作
这里由于时间关系只介绍select方法了.
可以看到flex无刷新的路径是一个servlet.看看servlet做了些什么?
Java代码
1.response.setContentType（"
text/html;
charset=UTF-8"
2.ReleaseInfoDao
rid
=
new
ReleaseInfoDao（）;
3.String
request.getParameter（"
4.PrintWriter
out
response.getWriter（）;
首先接收路径传过来的hidden值.
因为后面我会根据hidden值做各种操作.所以url重写了一些字段.大家可以不用如此.
1.if（hidden.equals（"
manage"
））{
2.//
获得当前页数
String
pageIndex
page"
4.//
获得每页数据最大量
pageSize
rp"
6.//
获得模糊查询文本输入框的值
query
String（request.getParameter（"
query"
）.getBytes（"
ISO8859-1"
）,"
UTF-8"
8.//
获得模糊查询条件
qtype
qtype"
if（query=="
||（"
）.equals（query））{
Map
pageInfo
HashMap（）;
pageInfo.put（"
pageIndex）;
total"
rid.getReleaseInfoCount（））;
14.//
数据JSON格式化
jsonStr
rid.creReleaseInfoJSON（rid.getReleaseInfo（Integer.parseInt（pageIndex）,
Integer.parseInt（pageSize））,
pageInfo）;
16.//
response相关处理
response.setContentType（"
html/txt"
response.setCharacterEncoding（"
utf-8"
response.setHeader（"
Pragma"
no-cache"
Cache-Control"
no-cache,
must-revalidate"
try
response.getWriter（）.write（jsonStr）;
response.getWriter（）.flush（）;
response.getWriter（）.close（）;
catch
（IOException
e）
e.printStackTrace（）;
rid.getReleaseInfoCountLike（qtype,
query））;
33.//
rid.creReleaseInfoJSON（rid.getReleaseInfoLike（Integer.parseInt（pageIndex）,
Integer.parseInt（pageSize）,
qtype,
query）,
35.//
可以看到许多request.getParameter（"
***"
是后去flexigrid控件的一些参数.
大家可以到flexigrid.js文件里面看到这些参数.
page//获取当前的页数.
rp//每页显示多少行数据
1.rp:
query//点击放大镜出现搜索功能,是Input文本框的值
qtype//是搜索功能后面的select的值
根据query的操作判断是模糊查询还是全部查询数据.
Servlet全部代码看完了.
看看.Dao层的数据层的代码吧.
主要引用Dao的代码如下
主要代码1.
1.pageInfo.put（"
升级会员 