|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<script type=
"text/javascript"
>
var
lastsel3;
//选择一行进行编辑时用到的
$(
function
(){
$(
"#list"
).jqGrid({
url:
'studentShow_do.jsp'
,
datatype:
'json'
,
mtype:
'post'
,
colNames:[
'学号'
,
'姓名'
,
'年龄'
,
'生日'
],
colModel :[
{name:
'sid'
, index:
'sid'
, width:155, align:
'center'
,editable:
true
},
//edittype 修改时设置编辑框的HTML样式的
{name:
'sname'
, index:
'sname'
, width:190, align:
'center'
,editable:
true
,edittype:
'select'
,editoptions:{value:
"1:张三;2:李四;3:王五"
}},
//行内编辑时自定义的验证valiAge方法中写验证条件
{name:
'age'
, index:
'age'
, width:180, align:
'center'
,editable:
true
,editrules:{custom:
true
,custom_func:valiAge}},
/**对于时间格式的显示formatter:'date'格式化时间和formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'} 配合使用,
* H:i:s用于显示时分秒,newformat: 'Y-m-d',当Y为小写时 只显示年份的后两位如1988则显示88;m(月),d(日)为大写时则显示英文(简写)的月日;
*/
{name:
'brith'
, index:
'brith'
,formatter:
'date'
,formatoptions:{srcformat:
'Y-m-d'
, newformat:
'Y-m-d'
}, width:250, align:
'center'
,editable:
true
,sorttype:
"date"
}
],
//forceFit : true,//调整列宽度
pager:
'#pager'
,
//定义页码控制条Page Bar,需要一个div
rownumbers:
true
,
//如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增(翻页后的值与rowList有关)。此列名为'rn'.
rowNum:5,
//一页中显示的最大条数,返回条数大于此值时,仍显示此值的条数.
rowList:[20,50,100],
//一个数组，用于设置Grid可以接受的rowNum值
sortname:
'sid'
,
//初始根据哪个列来排序, 当在表格中点击不同的列头,可以实现动态根据某列来排序,将会把点击的列名传到后台来实现根据不同的字段来排序
sortable:
true
,
viewrecords:
true
,
//设置是否在Pager Bar显示所有记录的总数
sortorder:
'asc'
,
//排序asc or desc
prmNames:{page:
'page'
,rows:
'rows'
,totalrows:
'totalrows'
,sort:
"sidx"
},
//设置默认传到后台的参数名称
loadtext:
'等等'
,
height:
'80%'
,
altRow:
true
,
multiselect:
true
,
//是否显示多选框
multiboxonly:
false
,
//是否只有点击多选框时,才执行选择多选框checkbox.默认为false,点击一行亦选定此行的多选框
multiselectWidth: 50,
//多选框所在列的宽度
page:1,
//初始显示第几页
//cellEdit: true,//与colModel中editable属性配合使用,当editable:true,cellEdit:true时可以对editable:true的列进行单个单元格编辑,cellEdit:false时(colModel中所有列editable都为true时)整行编辑
editurl:
'ok.jsp'
,
//编辑栏编辑后发送的地址(整行)
cellurl:
'ok.jsp'
,
//单元格的发送地址
gridview:
true
,
//构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用
subGrid :
true
,
//开启显示子表的按钮
caption:
"jqGrid test"
,
subGridRowExpanded:
function
(subgrid_id,row_id) {
//显示子表
var
subgrid_table_id =
"subgrid_"
+subgrid_id;
$(
"#"
+subgrid_id).html(
"<table id='"
+subgrid_table_id+
"'></table>"
);
$(
"#"
+subgrid_table_id).jqGrid({
url:
'studentShow_do.jsp'
,
datatype:
'json'
,
colNames:[
'学号'
,
'姓名'
,
'年龄'
,
'生日'
],
colModel :[
{name:
'sid'
, index:
'sid'
, width:155, align:
'center'
},
{name:
'sname'
, index:
'sname'
, width:190, align:
'center'
},
{name:
'age'
, index:
'age'
, width:180, align:
'center'
},
{name:
'brith'
, index:
'brith'
, width:250, sortable:
false
}
],
height:
'100%'
});
},
onSelectRow :
function
(rowid,sid,status){
if
(rowid && rowid!==lastsel3){
//当选中的不是上一次选中的行就(restoreRow)释放(恢复)上一次选中的行,避免选中多行
jQuery(
'#list'
).jqGrid(
'restoreRow'
,lastsel3);
jQuery(
'#list'
).jqGrid(
'editRow'
,rowid,
true
,pickdates);
lastsel3=rowid;
}
else
{
jQuery(
'#list'
).jqGrid(
'editRow'
,rowid,
true
,pickdates);
lastsel3=rowid;
}
},
loadComplete:
function
(){
//alert("s");
}
});
//多重表头
//顶级表头
jQuery(
"#list"
).jqGrid(
'setGroupHeaders'
, {
useColSpanStyle:
false
,
//没有表头的列是否与表头列位置的空单元格合并
groupHeaders:[
//合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student
{startColumnName:
'sid'
, numberOfColumns: 4, titleText:
'All Student Info'
}
]
});
//二级表头
jQuery(
"#list"
).jqGrid(
'setGroupHeaders'
, {
useColSpanStyle:
false
,
//没有表头的列是否与表头列位置的空单元格合并
groupHeaders:[
//合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student
{startColumnName:
'sid'
, numberOfColumns: 3, titleText:
'Base Student Info'
},
{startColumnName:
'brith'
, numberOfColumns: 2, titleText:
'other'
}
]
});
jQuery(
"#list"
).jqGrid(
'navGrid'
,
'#pager'
,{edit:
true
,add:
true
,del:
true
});
//$("#list").jqGrid('inlineNav','#pager');//行内编辑 (或与单元格编辑(选择) 引冲突)
//对话框
$(
"#dialog"
).dialog({
autoOpen:
false
,
show:
"blind"
,
hide:
"explode"
});
});
function
pickdates(rowid){
$(
"#"
+rowid+
"_brith"
,
"#list"
).datepicker({dateFormat:
"yy-mm-dd"
});
//时间控件
}
function
valiAge(value,colname) {
if
(value < 0 || value >120) {
return
[
false
,
"请填写0-120之间的数字!"
];
}
else
{
return
[
true
,
"ok"
];
}
}
</script>
|
|
1
2
3
4
5
6
7
|
<
body
>
<
table
id
=
"list"
border
=
"1"
></
table
>
<
div
id
=
"pager"
></
div
>
<
div
id
=
"dialog"
title
=
"Basic dialog"
>
<
p
>展示所有学生信息</
p
>
</
div
>
</
body
>
|
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
