JQuery 插件FlexiGrid 之完全配置与使用Word格式.docx
- 文档编号:8326892
- 上传时间:2023-05-11
- 格式:DOCX
- 页数:13
- 大小:89.37KB
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("
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQuery 插件FlexiGrid 之完全配置与使用 插件 FlexiGrid 完全 配置 使用